Fluentui: Not compatible with TypeScript 2 typings of React (@types/react)

[kollster]

office-ui-fabric-react is not compatible with TypeScript 2 typings for React. When you use TypeScript 2 and install the typings for React (npm install --save-dev @types/react) you get a lot of errors. The errors I have found are because office-ui-fabric-react uses old typings for react. A lot of the react events and event handlers use generics in the new typings.

For an example, when you import the office-ui-fabric-react Button in an app, you get the following TypeScript compiler error:

ERROR in node_modules\office-ui-fabric-react\lib\components\Button\Button.Props.d.ts
(34,15): error TS2314: Generic type 'MouseEventHandler' requires 1 type argument(s).

Old react typings that office-ui-fabric-react uses:

    //
    // Event Handler Types
    // ----------------------------------------------------------------------

    interface EventHandler<E extends SyntheticEvent> {
        (event: E): void;
    }

    type ReactEventHandler = EventHandler<SyntheticEvent>;

    type ClipboardEventHandler = EventHandler<ClipboardEvent>;
    type CompositionEventHandler = EventHandler<CompositionEvent>;
    type DragEventHandler = EventHandler<DragEvent>;
    type FocusEventHandler = EventHandler<FocusEvent>;
    type FormEventHandler = EventHandler<FormEvent>;
    type KeyboardEventHandler = EventHandler<KeyboardEvent>;
    type MouseEventHandler = EventHandler<MouseEvent>;
    type TouchEventHandler = EventHandler<TouchEvent>;
    type UIEventHandler = EventHandler<UIEvent>;
    type WheelEventHandler = EventHandler<WheelEvent>;

New event handlers from @types/react

    interface EventHandler<E extends SyntheticEvent<any>> {
        (event: E): void;
    }

    type ReactEventHandler<T> = EventHandler<SyntheticEvent<T>>;

    type ClipboardEventHandler<T> = EventHandler<ClipboardEvent<T>>;
    type CompositionEventHandler<T> = EventHandler<CompositionEvent<T>>;
    type DragEventHandler<T> = EventHandler<DragEvent<T>>;
    type FocusEventHandler<T> = EventHandler<FocusEvent<T>>;
    type FormEventHandler<T> = EventHandler<FormEvent<T>>;
    type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;
    type MouseEventHandler<T> = EventHandler<MouseEvent<T>>;
    type TouchEventHandler<T> = EventHandler<TouchEvent<T>>;
    type UIEventHandler<T> = EventHandler<UIEvent<T>>;
    type WheelEventHandler<T> = EventHandler<WheelEvent<T>>;
    type AnimationEventHandler = EventHandler<AnimationEvent>;
    type TransitionEventHandler = EventHandler<TransitionEvent>;

[unindented]

Same here, encountered this while going through the Get started example:

./node_modules/office-ui-fabric-react/lib/components/Button/Button.Props.d.ts
(34,15): error TS2314: Generic type 'MouseEventHandler' requires 1 type argument(s).

[dzearing]

Thanks guys. We have done the work already to move to TS2, but we found a few breaking changes slowing our move down. E.g. TS2 introduces readonly attributes in the d.ts files which TS1 can't understand. But we aggressively want to move to TS2 so this will happen very soon and this will be cleaned up. I'll assign to myself to ensure we're not blocked.

[Djemel]

Is there a temporary workaround for this issue ?

[kollster]

Temporary workaround

Until this issue is resolved, it is possible to use the skipLibCheck TypeScript compiler option.

tsconfig.json

{
    "compilerOptions": {
        "skipLibCheck": true
    }
}

This may however cause other issues. The feature description can be found here:
skipLibCheck.

TypeScript 2.0 adds a new --skipLibCheck compiler option that causes type checking of declaration files (files with extension .d.ts) to be skipped. When a program includes large declaration files, the compiler spends a lot of time type checking declarations that are already known to not contain errors, and compile times may be significantly shortened by skipping declaration file type checks.

Since declarations in one file can affect type checking in other files, some errors may not be detected when --skipLibCheck is specified. For example, if a non-declaration file augments a type declared in a declaration file, errors may result that are only reported when the declaration file is checked. However, in practice such situations are rare.

[unindented]

@dzearing how is progress looking? Anything we can do to help?

[dzearing]

PR is here.
https://github.com/OfficeDev/office-ui-fabric-react/pull/443

[dzearing]

Merged, published as 0.62.0. @unindented @kollster let me know if you see any issues.

[unindented]

@dzearing this is working fine for me. Thank you very much for your hard work! 😄

[hitendramalviya]

Hi @unindented how did you get this working I am still getting issues:

ERROR in D:\git\sampleApp\node_modules\office-ui-fabric-react\node_modules\@types\react\in
dex.d.ts
(2473,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'data' must be of
 type 'HTMLProps<HTMLElement>', but here has type 'HTMLProps<HTMLElement>'.

ERROR in D:\git\sampleApp\node_modules\office-ui-fabric-react\node_modules\@types\react\in
dex.d.ts
(2474,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'datalist' must b
e of type 'HTMLProps<HTMLDataListElement>', but here has type 'HTMLProps<HTMLDataListElement>'.

I just added two error of them I am getting many errors in my project.

[unindented]

@hitendramalviya What version of @types/react are you using?

[hitendramalviya]

I am using "@types/react": "^15.0.1" anyway with latest version of office-ui-fabric-react they have removed typing of react from dependency, so no problem now there is only one type definition for react i.e. @types/react.

[turbo]

Still getting these errors with Docker CE on ubuntu. Not with Docker on Windows though! Built a React project, using office fabric based on the node:latest image.