TypeScript extends JavaScript with static types and other developer features. It helps catch type-related mistakes while preserving access to JavaScript packages. The code that runs is JavaScript: TypeScript must first be transformed for a browser or a runtime such as Node.js. Use its features selectively; they can add complexity when their checks offer little benefit. section 1.1.1 section 2.6
Make a function’s assumptions explicit
A JavaScript function might begin as `function calculateTax(amount) { return amount * 1.2; }`. In TypeScript, write `function calculateTax(amount: number): number { return amount * 1.2; }` to specify the expected parameter and result types. The compiler can check those assumptions; the emitted code remains JavaScript. section 8.2 section 8.3
A typical project brings several pieces together:
- Install TypeScript with a JavaScript package manager, keep source files separate from generated files, and use `tsconfig.json` to configure compilation. Options include the JavaScript target and module format. section 5.10
- Use annotations where useful and let the compiler infer types where it can. Unions, guards, and `strictNullChecks` help describe and check values that need different treatment. section 7.8
- Describe JavaScript packages with their included type declarations or separate declaration packages. A project can also include JavaScript files. section 15.5
Type checking applies beyond simple variables. Function types can describe optional, default, and rest parameters or relate particular parameter types to result types through overloads. Object shape types check properties and methods; optional properties, unions, and intersections describe variations. These checks constrain JavaScript’s flexibility without replacing its underlying behavior. section 8.3 section 10.4
Frameworks use TypeScript differently. Angular relies on it, particularly decorators, but TypeScript features have been removed before Angular templates execute in the browser. React supports TypeScript optionally; its toolchain can use Babel to produce JavaScript while setting the TypeScript compiler’s `noEmit` option. Do not assume every project emits JavaScript through the TypeScript compiler. section 18.6 section 20.2
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
Inspect a React `tsconfig.json` example: `noEmit: true` illustrates a setup in which Babel, rather than the TypeScript compiler, generates JavaScript. section 20.2
