Guida a TypeScript · 1/6
Per ora questo capitolo è disponibile solo in inglese.
TypeScript is JavaScript with a static type system layered on top. The compiler, tsc, checks your types and then emits plain JavaScript, which Node.js or a browser runs as usual. Keep one fact in mind from day one: types exist only at compile time. Nothing about them survives into the code that actually runs.
This chapter walks through installing Node.js and TypeScript, configuring a project with tsconfig.json, the common ways to run TypeScript code, and setting up your editor.
The TypeScript compiler ships as an npm package, so you need Node.js first. Grab the LTS release from nodejs.org, or use a version manager such as nvm if you work across several projects with different requirements. Then confirm the install:
node --version
npm --versionRather than installing TypeScript globally, add it to each project as a dev dependency. That way everyone on the team, and your CI server, compiles with exactly the same version.
mkdir hello-ts
cd hello-ts
npm init -y
npm install --save-dev typescript
npx tsc --versionnpx tsc runs the compiler from the local node_modules. Next, generate a config file:
npx tsc --inittsc --init writes a heavily commented tsconfig.json. You can trim it down to the options that matter while you are learning:
{
"compilerOptions": {
"target": "es2022",
"module": "nodenext",
"strict": true,
"rootDir": "src",
"outDir": "dist",
"sourceMap": true,
"skipLibCheck": true
},
"include": ["src"]
}| Option | What it controls |
|---|---|
target | Which JavaScript syntax level the output uses |
module | The module format and how imports are resolved |
strict | Turns on the whole family of strict checks |
rootDir and outDir | Where sources live and where output goes |
sourceMap | Lets debuggers map back to your .ts lines |
include | Which files belong to the project |
Turn on strict from the very first commit. Enabling it later on an established codebase tends to surface hundreds of errors at once. Every option is documented in the .
Create src/index.ts:
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message = greet("TypeScript");
console.log(message);The : string parts are type annotations. Call greet(42) and the compiler rejects it before the code ever runs. Because the config uses "module": "nodenext", also add "type": "module" to package.json so Node treats the emitted files as ES modules. Then build and run:
npx tsc
node dist/index.jstsc checks everything under src and writes dist/index.js. One surprise for newcomers: by default it still emits JavaScript even when there are type errors. If you would rather block output on errors, enable noEmitOnError.
Compiling before every run gets tedious during development. tsx executes .ts files directly by stripping the types on the fly. It does not type-check, though, so pair it with tsc --noEmit, which checks without writing any files.
npm install --save-dev tsx
npx tsx src/index.ts
npx tsx watch src/index.ts
npx tsc --noEmitRecent Node.js releases can also run .ts files natively by erasing type annotations. Syntax that needs real code generation, such as enum, has limited support there, so check the documentation for the Node.js version you use before relying on it.
Wire the common commands into package.json so nobody has to remember them:
{
"type": "module",
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc",
"typecheck": "tsc --noEmit",
"start": "node dist/index.js"
}
}Visual Studio Code bundles the TypeScript language service, so completions, inline errors, rename, and go-to-definition work out of the box. A few habits make it even better:
npx tsc agree.JetBrains IDEs such as WebStorm support TypeScript out of the box as well. To experiment without installing anything, open the TypeScript Playground in your browser.
npm install --save-dev typescript and run it via npx tsc.strict in tsconfig.json from the start.tsc for builds, tsx for quick runs during development, and tsc --noEmit for type checking.
0 commenti
Accedi · Accedi per lasciare un commento.