typescript.md

React with TypeScript example

Install dependencies

npm install typescript

Install required type declarations, for example for the default React setup:

npm install @types/react @types/react-dom @types/react-helmet @types/styled-jsx

Create a tsconfig.json file in your project root, as required by your project. For example:

{
    "compilerOptions": {
        "target": "es5",
        "strict": true,
        "esModuleInterop": true,
        "jsx": "react"
    }
}

Important: Parcel 1.x uses tsc compiler for compiling TypeScript files, which means that Babel plugins such as styled-jsx do not work out of the box (source). Parcel 2.x will allow optional TypeScript compiling via Babel 7+ using @babel/preset-typescript (source), but for now a 3d party Parcel plugin can be used.

To use Babel plugins install the required dependencies:

npm install parcel-plugin-babel-typescript @babel/preset-typescript

Update your .babelrc presets afterwards:

{
    "presets": [
        "@babel/preset-typescript"
    ],
    "plugins": [
        "styled-jsx/babel"
    ]
}

Make sure that your tsconfig.json is configured to leave JSX transformations to Babel:

{
    "compilerOptions": {
        "jsx": "preserve"
    }
}