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
.tsxextension - 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.