đź“ť Edit page
âž• Add page
TS Config
Customize the tsconfig.json
or jsconfig.json
file (for plain JS projects).
Resources
- What is a tsconfig.json in TS docs
- jsconfig.json reference on VS Code docs.
Recommended fields
You don’t need a config, if you are happy with the system defaults.
Here are some fields you can add.
Output directory
If you do not set this, all the output JS files will be next to the TS files.
{
"compilerOptions": {
"outDir": "dist"
}
}
Or
$ tsc -p --outDir dist
Strict
Make JS run in strict mode.
{
"compilerOptions": {
"strict": true
}
}
Module and target
Using import/export
and modern JS.
{
"compilerOptions": {
"module": "esnext",
"target": "esnext",
}
Using require
to import and transpiling to ES6 (or ES5 if you prefer) from something newer like ES7.
{
"compilerOptions": {
"module": "commonjs",
"target": "es6"
}
}
Paths
Alias the src
directory as @
.
{
"compilerOptions": {
"paths": {
"@/*": [
"src/*"
]
}
}
}
Include and exclude
For a Vue project with tests.
{
"compilerOptions": {
"include": [
"src/**/*.ts",
"src/**/*.vue",
"tests/**/*.ts"
]
}
}
Full
A bunch of fields set together.
{
"compilerOptions": {
"outDir": "dist",
"sourceMap": true,
"noImplicitAny": true,
"module": "esnext",
"target": "esnext"
}
}
Sample files in repos
- Vue apps.
- vue-typescript-quickstart - a basic Vue TypeScript app.
- badge-generator
- VS Code Extensions.
- JavaScript Bundling Quickstarts - there are a few TS projects with “typscript” in the name and those have minimal TS configs.