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.