webpack + TypeScript + React: Part 3

We continue to explore this development environment; including linting.

This article is part of a series starting with webpack + TypeScript + React: Part 1. All of the examples are also available for download.

Fix

In the previous React example, we had a fairly simple TypeScript compiler configuration. At the same time, we had some oddities, e.g., the way we had to import React. Happened to learn about a create-react-app option that provides a sample tsconfig.json configuration that addresses several issues.

Starting from our previous React example, we update:

fix/tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react",
        "module": "ESNext",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude": [
        "node_modules"
    ],    
}

Observations:

• The module and moduleResolution properties configure TypeScript to treat modules as ESNext modules (really same as ES2015 as far as I can tell) and to use node_modules for third-party packages.
• The allowSyntheticDefaultImports property appears to enable TypeScript to treat CommonJS modules as ESNext modules; allowing use to just use import React from ‘react’.
• Finally, we exclude node_modules as we do not want to transpile third-party modules.

Also, there are some issues with viewing web pages from the file-system; so we can simply run the following from the dist folder (downloads, caches, and runs a lightweight HTTP server).

npx http-server

Ant

Next we will explore a third-party library that inherently supports TypesScript; does not require a separate type declarations; Ant Design.

First we need to support importing CSS files in our webpack build:

npm install css-loader --save-dev
npm install style-loader --save-dev

ant/webpack.config.js

...
module: {
    rules: [
        {
            test: /\.(ts|tsx)$/,
            loader: 'awesome-typescript-loader',
        },       
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                },
                {
                    loader: 'css-loader',
                },
            ],
        },
    ],
...

We then install Ant Design and use it.

npm install antd

ant/src/components/App.tsx

import React from 'react';
import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';
interface AppProps {
    message: string,
};
export default function({ message }: AppProps ) {
    return (
        <div>
            <h1>Hello {message}</h1>
            <Button type="primary">Test</Button>
         </div>
    );
};

Just so happens that Ant Design is written in TypeScript and as such we benefit with some compile time checking; for example, we can immediately see that the Button component does not support the bogus property (either in the editor or when compiling).

note: I was really expecting to find that we additionally would have JSX autocomplete features in Visual Studio Code; I could not find a definitive answer on this.

note: Ant Design, with some additional changes to webpack, supports both a more streamlined import and theme customization; applying the feature as described in the series starting with Ant Design by Example: Part 1, we end up with this example.

Linting

Having become accustomed to strong opinionated linting with ESLint and eslint-config-airbnb, I was happy to learn that there is TSLint and tslint-config-airbnb.

note: From what I can tell, much (if not all) of the compiler linting options are a duplication of what is available with TSLint and tslint-config-airbnb.

Starting from our previous example we install and initialize TSLint.

npm install tslint --save-dev
./node_modules/.bin/tslint --init

Running TSLint with the default rules:

./node_modules/.bin/tslint -c tslint.json 'src/**/*.tsx'

generates quite a few errors:

ERROR: src/components/App.tsx[1, 19]: ' should be "
ERROR: src/components/App.tsx[2, 1]: Import sources within a group must be alphabetized.
ERROR: src/components/App.tsx[2, 20]: ' should be "
ERROR: src/components/App.tsx[3, 8]: ' should be "
ERROR: src/components/App.tsx[5, 11]: interface name must start with a capitalized I
ERROR: src/components/App.tsx[6, 20]: Properties should be separated by semicolons
ERROR: src/components/App.tsx[7, 2]: Unnecessary semicolon
ERROR: src/components/App.tsx[16, 1]: Missing semicolon
ERROR: src/index.tsx[1, 19]: ' should be "
ERROR: src/index.tsx[2, 24]: ' should be "
ERROR: src/index.tsx[3, 17]: ' should be "
ERROR: src/index.tsx[7, 29]: ' should be "

Let us next install the AirBnb rules:

npm install tslint-config-airbnb --save-dev

and update:

linting/tslint.json

{
  "extends": "tslint-config-airbnb"
}

Running TSLint with these rules generates a lot (but different errors).

Warning: The 'no-boolean-literal-compare' rule requires type information.
Warning: The 'strict-boolean-expressions' rule requires type information.
ERROR: src/components/App.tsx[1, 1]: Misnamed import. Import should be named 'react' but found 'React'
ERROR: src/components/App.tsx[2, 1]: Misnamed import. Import should be named 'button' but found 'Button'
ERROR: src/components/App.tsx[6, 1]: Expected indentation of 2 spaces but found 4.
ERROR: src/components/App.tsx[6, 20]: Properties should be separated by semicolons
ERROR: src/components/App.tsx[7, 2]: Unnecessary semicolon
ERROR: src/components/App.tsx[8, 24]: Missing whitespace before function parens
ERROR: src/components/App.tsx[8, 47]: there should be no spaces inside this paren.
ERROR: src/components/App.tsx[9, 1]: Expected indentation of 2 spaces but found 4.
ERROR: src/components/App.tsx[15, 2]: Unnecessary semicolon
ERROR: src/index.tsx[1, 1]: Misnamed import. Import should be named 'react' but found 'React'

note: We also can enable TSLint in Visual Studio Code; allows to lint as we edit.

Observations:

• The rules complain about not matching import names to import file, e.g., import React from ‘react’; But because JSX implicitly needs React, we can disable this warning with /* tslint:disable-next-line */
• We have the same problem, Button vs. button, with imports from the Ant Design library; seems that disabling the warning is the lesser of two evils (want components to be capitalized)
• Also, went ahead and changed the automatic indentation to be two spaces in the source (as well as set as the default in my editor).

Next Steps

In the next article, webpack + TypeScript + React: Part 4, we will explore testing in this environment.