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:

  1. use the .tsx extension
  2. properly require React
  3. 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.

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.