TypeScript

Supported extensions: ts, tsx

TypeScript is a typed superset of JavaScript that compiles down to plain JavaScript, which also supports modern ES2015+ features. Transforming TypeScript works out of the box without any additional configuration.

Parcel performs no type checking. You can use tsc --noEmit to have typescript check your files.

<!-- index.html -->
<html>
<body>
  <script src="./index.ts"></script>
</body>
</html>

// index.ts
import message from './message'
console.log(message)

// message.ts
export default 'Hello, world'

When using React

To use Typescript + React + JSX, you need to:

use the .tsx extension
properly require React
use a tsconfig with a special option "jsx": "react"

Full example:

<!-- index.html -->
<html>
<body>
  <div id="root"></div>
  <script src="./index.tsx"></script>
</body>
</html>

// index.tsx
import React from 'react'
import ReactDOM from 'react-dom'

console.log('Hello from tsx!')

ReactDOM.render(
  <p>Hello</p>,
  document.getElementById('root'),
)

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react"
  }
}

See this full thread for more details.

baseURL and paths

Parcel does not use the baseUrl or paths directives in tsconfig.json. You can instead use Parcel's ~ module loading convention. Tell typescript about it like so:

// tsconfig.json
// assuming your ts sources are in ./src/
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~*": ["./*"]
    },
  },
  "include": ["src/**/*"]
}

See this gist for a full example.

Module API types

To interact with Parcel's Module API (e.g. when setting up Hot Module Replacement), make sure to install the @types/parcel-env package.

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.