no-unused-variable and React in tsx

[priyatham-aps]

Hi,

We are currently using React and Typescript in our application. We have a setup where we have defined a BaseComponent, containing a few common methods that we want a lot of our components to have.

Our BaseComponent looks like the following:

/// <reference path="../../../tsd.d.ts" />
import * as React from "react";

export default class BaseComponent<P, S> extends React.Component<P, S> {
    constructor() {
        super();
    }

    method1(): void {
        //do something
    }
}

The rest of our components look like the following:

/// <reference path="../../../tsd.d.ts" />
import BaseComponent from ".base_component";

export default class MyComponent<P, S> extends BaseComponent<P, S> {
    constructor() {
        super();
    }

    render(): JSX.Element {
        return <div></div>;
    }
}

Now, this code will not compile as React needs to be in scope. React wiki says the following about the same at https://github.com/Microsoft/TypeScript/wiki/JSX#basic-usage:

Note: The identifier React is hard-coded, so you must make React available with an uppercase R.

So, in order for this to work, we had to import React as well by adding the following line in MyComponent:

import * as React from "react";

But, tslint now throws an error on this because of the rule no-unused-variable as React is not being used anywhere within the tsx file. We would very much like to keep this rule in our linting configuration.

So, for the time being, we are using a gross hack like the following to use the unused React variable within MyComponent tsx file:

class Dummy extends React.Component<{}, {}> { }

So, my question to you is would you be able to support the kind of setup that we have? An ability to define exceptions to no-unused-variable rule perhaps? Or any other alternative solution that might resolve our issue by not resorting to that gross hack? I am assuming it won't be a one-off as I do see quite a few people who might want to be building React components in this way.

[jkillian]

A better solution for you is to disable the no-unused-variable rule for your React declaration, like this:

/* tslint:disable:no-unused-variable */
import * as React from "react";
/* tslint:enable:no-unused-variable */

It's cleaner and how we support disabling tslint for special cases. We could have an option to the no-unused-variable rule that allows you to define exceptions, but I feel like that might be unneeded complexity. Let me know how the above solution works for you and what you think of it.

[adidahiya]

Another solution would be to add react-global typings to your typings directory, so that your reference to tsd.d.ts pulls in the global React object: https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react-global.d.ts

I believe this will obviate the need to import "react" in each file.

[priyatham-aps]

@adidahiya
Apologies for the very late reply. The method you suggested works for me. Thanks!