Nov 27, 2018

Creating a React and TypeScript Project

Creating a React and TypeScript app is super easy now. Prior to CRA 2.1 TypeScript, we’d have to use separate scripts to include TypeScript with our React app. As of CRA 2.1, TypeScript support is in the box. All we need is npm 5.2 or later installed.

Creating our project

Let’s give this a go by running the following command in a folder of our choice, where we want to create the project:

npx create-react-app app —typescript

The npx tool temporarily installs the create-react-app npm package and uses it to create our project. Neat!
We chose to call our project app.
We also specified --typescript, which is the bit that tells the tool to set the project up with TypeScript.

The tool will take a minute or so to create our project.

Adding TSLint

Adding TSLint to a React and TypeScript helps us make our code even more readable and maintainable. Unfortunately, CRA doesn’t include this in its setup, so, we’ll do this ourselves by running the following commands in a Terminal:

cd app
npm install tslint tslint-react --save-dev

We just installed TSLint as a development dependency along with some standard linting rules for React projects.

Let’s configure TSLint by adding a file called tslint.json at the same level as package.json with the following content:

{
  "extends": ["tslint:latest", "tslint-react"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

If we want the linting rules to be a little more stable as TSLint evolves, we can use tslint:recommended rather than tslint:latest.

We can override specific rules we want by adding a rules field.

Adding a TSLint Visual Studio Code extension

The TypeScript TSLint Plugin VS code extension seems to be the most popular extension these days.

After we have installed this plugin we need to enable it in tsconfig.json:

{
  "compilerOptions": {
    ...,
    "plugins": [{"name": "typescript-tslint-plugin"}]
  },
  ...
}

Fixing the linting error in App.tsx

Now that our app is using TSLint, we have a small problem in the App component that needs fixing.

CRA linting error

We need to add the access modifier to the render method:

class App extends Component {
  public render() {
    return ( ... );
  }
}

Adding automatic formatting

Some of the linting rules that are to do with the format of our code (such as semi colons at the end of statements) can be automatically dealt with by a tool like Prettier.

We can install Prettier by executing the following command in the Terminal:

npm install prettier --save-dev

To make Prettier play nice with TSLint we first install the tslint-config-prettier rule preset:

npm install tslint-config-prettier --save-dev

We then add this to tslint.json:

{
  "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

We specify the formatting rules we want in a .prettierrc file which sits at the same level as package.json:

{
  "printWidth": 80,
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

Adding a Prettier Visual Studio Code extension

The Prettier - Code formatter VS code extension is popular extension these days.

We can get Prettier to apply formatting when a file is saved in Visual Studio Code by ticking the Format on Save option is ticked in User Settings: