TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It adds static types to JavaScript, which can help catch errors early and enhance the development experience.
Getting Started with TypeScript
Installation
To install TypeScript globally:
1
npm install -g typescript
Compilation
To compile a TypeScript file to JavaScript:
1
tsc file.ts
To watch a file or files and recompile when changes are made:
1
tsc --watch file.ts
To watch multiple files:
1
tsc --watch *.ts
Configuration
Create a tsconfig.json to configure TypeScript options:
1
2
3
4
5
6
7
8
9
{
"compilerOptions": {
"target": "es6",
"watch": true,
"lib": ["dom", "es2017", "ESNext"],
"allowJs": true,
"strict": true
}
}
Basic Syntax and Data Types
TypeScript’s syntax is a superset of JavaScript. This means all valid JavaScript code is also valid TypeScript.
1
console.log('Hello, TypeScript!');
Data Types
TypeScript enhances JavaScript by adding data types:
1
2
3
let message: string = 'Hello World';
let count: number = 42;
let isActive: boolean = true;
Arrays and Tuples
Arrays:
1
let numbers: number[] = [1, 2, 3];
Tuples:
1
let tuple: [string, number] = ['hello', 10];
Enums
Enums allow you to define a set of named constants:
1
2
3
4
5
6
enum Color {
Red,
Green,
Blue
}
let c: Color = Color.Green;
Any, Unknown, and Never
any: Disables all further type checking.unknown: Ensures type checking is performed.never: Indicates functions that never return.
Query Selectors
TypeScript can infer DOM element types:
1
const body: HTMLBodyElement = document.querySelector('body')!;
Functions
TypeScript enables specifying types for function parameters and return values:
1
2
3
4
5
6
7
function add(a: number, b: number): number {
return a + b;
}
function log(message: string): void {
console.log(message);
}
Interfaces
Interfaces define the shape of objects:
1
2
3
4
5
6
7
8
9
interface User {
name: string;
id: number;
}
const user: User = {
name: "Jane Doe",
id: 1,
};
Classes
TypeScript supports modern JavaScript classes with a richer syntax:
1
2
3
4
5
6
7
8
9
10
11
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
Advanced TypeScript
Generics
Generics allow you to define reusable and type-safe functions, classes, and interfaces:
1
2
3
function identity<T>(arg: T): T {
return arg;
}
Decorators
Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.
1
2
3
4
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
Modules
TypeScript supports ES6 modules:
1
import { moduleFunction } from './module';
Tips and Tricks
- Type Assertions: Use type assertions when you know more about the type of a value than TypeScript does.
- Type Inference: TypeScript infers types where possible, reducing the need to explicitly define types.
- Strict Null Checking: Enable strict null checks to catch null and undefined errors.
Additional Resources
This TypeScript cheatsheet provides a quick reference to essential TypeScript syntax and features, ideal for both beginners and experienced developers transitioning from JavaScript. TypeScript’s static typing adds a layer of reliability and robustness to JavaScript code, making it an increasingly popular choice for web development projects.