TypeScript

Extensions supportées : ts, tsx

TypeScript est un sur-ensemble typé du JavaScript qui compile en JavaScript simple, qui prend également en charge les fonctionnalités modernes ES2015+. La transformation TypeScript fonctionne sans aucune configuration supplémentaire.

Parcel n'effectue aucune vérification de type. Vous pouvez utiliser tsc --noEmit pour que vos fichiers soient vérifiés par typescript.

<!-- 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'

Lors de l'utilisation de React

Pour utiliser Typescript + React + JSX, vous avez besoin de :

utiliser l'extension .tsx
importer React correctement
utiliser une tsconfig avec une option spéciale "jsx": "react"

Exemple complet :

<!-- 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('Coucou depuis tsx!')

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

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

Consultez complétement cette discussion pour plus de détails : https://github.com/parcel-bundler/parcel/issues/1199

baseURL and paths

Parcel ne peut pas utiliser les directives baseUrl ou paths dans tsconfig.json. Vous pouvez à la place utiliser la convention de chargement du module ~ de Parcel. Dites-le à typescript à peu près comme ça :

// tsconfig.json
// en supposant que vos sources sont dans ./src/
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~*": ["./*"]
    }
  },
  "include": ["src/**/*"]
}

Consultez ce gist pour un exemple complet.

Aidez-nous à améliorer la documentation

Si quelque chose manque ou n'est pas tout à fait clair, veuillez enregistrer une issue sur le dépôt du site web (en anglais) ou modifier cette page.