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.

<!-- 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: https://github.com/parcel-bundler/parcel/issues/1199

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.