TypeScript Cheat Sheet (original) (raw)
Last Updated : 04 Mar, 2025
TypeScript is a strongly typed, object-oriented, compiled programming language developed and maintained by Microsoft. It is a superset of JavaScript, adding static types and other powerful features to improve development efficiency and code quality. TypeScript is widely used in web development, especially in large-scale applications.
TypeScript Cheat Sheet
TypeScript Features
Here are some of the main features of TypeScript:
- **Static Typing – Enables type checking at compile time.
- **Object-Oriented – Supports classes, interfaces, and inheritance.
- **Robust & Secure – Helps catch errors early with strict type checks.
- **Platform-Independent – Runs on any platform that supports JavaScript.
- **Portable – Works across different browsers and OS environments.
- **Multithreaded (Asynchronous Support) – Uses async/await and Promises.
- **Interoperable – Compatible with JavaScript and its libraries
Here’s a complete TypeScript cheat sheet that covers everything from installation to advanced topics, and examples.
1. Installation
To use TypeScript, you need to install it globally or locally in your project.
Global Installation
npm install -g typescript
Local Installation
npm install typescript --save-dev
Check Version
tsc --version
Compile TypeScript to JavaScript
tsc filename.ts
For more details, you can explore this article: How to Install TypeScript.
2. Basic Variables
TypeScript provides basic types to define variables with specific data types.
JavaScript `
let isDone: boolean = false; // Boolean let count: number = 42; // Number let name: string = "TypeScript"; // String let list: number[] = [1, 2, 3]; // Array of numbers let tuple: [string, number] = ["hello", 10]; // Tuple (fixed-type array) let notSure: any = 4; // Any (dynamic type, avoid using) let nothing: void = undefined; // Void (no type, used for functions) let u: undefined = undefined; // Undefined let n: null = null; // Null
`
3. Basic Data Types
| Type | Description | Example |
|---|---|---|
| boolean | Represents true/false values. | let isDone: boolean = false; |
| number | Represents both integers and floating-point numbers. | let count: number = 42; |
| string | Represents textual data. | let name: string = "TypeScript"; |
| number[] | Represents an array of numbers. | let list: number[] = [1, 2, 3]; |
| [string, number] | Represents a tuple (fixed-type array). | let tuple: [string, number] = ["hello", 10]; |
| any | Represents a dynamic type (use sparingly). | let notSure: any = 4; |
| void | Represents the absence of a type (used for functions that return nothing). | let nothing: void = undefined; |
| undefined | Represents an uninitialized variable. | let u: undefined = undefined; |
| null | Represents an intentional absence of an object value. | let n: null = null; |
4. Advanced Data Types
TypeScript supports advanced types for more complex scenarios.
Union Types
Union Types allows a variable to hold multiple types.
JavaScript `
let value: string | number = "hello"; value = 42;
`
Intersection Types
Combines multiple types into one.
JavaScript `
type A = { a: number }; type B = { b: string }; type C = A & B; // { a: number, b: string }
`
Literal Types
Restricts a variable to a set of specific values.
JavaScript `
let direction: "left" | "right" | "up" | "down" = "left";
`
Type Aliases
Type aliases in TypeScript allow you to create a new name for an existing type
JavaScript `
type StringOrNumber = string | number; let id: StringOrNumber = "123";
`
5. Functions
Functions in TypeScript can have typed parameters and return values.
Typed Function
Typed functions in TypeScript allow you to define the types of parameters a function accepts and the type of value it returns.
JavaScript `
function add(x: number, y: number): number { return x + y; }
`
Optional and Default Parameters
Optional parameters (using ?) allow omitting the argument in function calls, resulting in undefined within the function. Default parameters (using = value) provide a fallback if the argument is not provided.
JavaScript ``
function greet(name: string, greeting: string = "Hello"): string {
return ${greeting}, ${name};
}
``
Arrow Functions
Arrow functions provide a more concise syntax for defining functions compared to traditional function expressions.
JavaScript ``
// Concise arrow function (implicit return) const add = (a: number, b: number) => a + b;
// Arrow function with explicit return and block body
const greet = (name: string) => { return Hello, ${name}!; };
``
6. Interfaces
Interfaces in TypeScript define a contract or shape for data. They specify the properties (and sometimes methods) that an object should have.
JavaScript ``
interface Person { name: string; age: number; greet(): void; }
const person: Person = {
name: "Alice",
age: 30,
greet() {
console.log(Hello, my name is ${this.name});
},
};
``
7. Classes
Classes in TypeScript provide a blueprint for creating objects. They encapsulate data (properties) and behavior (methods) into a single unit.
JavaScript ``
class Animal { name: string;
constructor(name: string) { this.name = name; }
speak(): void {
console.log(${this.name} makes a noise.);
}
}
class Dog extends Animal { breed: string;
constructor(name: string, breed: string) { super(name); this.breed = breed; }
speak(): void {
console.log(${this.name} barks.);
}
}
const dog = new Dog("Rex", "Labrador"); dog.speak();
``
8. Generics
Generics in TypeScript allow you to write reusable components that can work with a variety of types without sacrificing type safety.
JavaScript `
function identity(arg: T): T { return arg; }
let output = identity("hello");
class Box { value: T;
constructor(value: T) { this.value = value; } }
const box = new Box(42);
`
9. Utility Types
Utility types in TypeScript provide a set of pre-defined type transformations that perform common operations on types.
Partial
Partial is a utility type that takes a type T and constructs a new type where all properties of T are optional.
JavaScript `
interface User { name: string; age: number; } const partialUser: Partial = { name: "GeeksforGeeks" };
`
Readonly
Readonly is a utility type that takes a type T and creates a new type where all properties of T are read-only.
JavaScript `
const readonlyUser: Readonly = { name: "Geeks", age: 30 };
`
Record<K, T>
Record<K, T> is a utility type that constructs an object type whose property keys are K and whose property values are T. K can be a string, number, or symbol literal, and T can be any type.
JavaScript `
const userMap: Record<string, User> = { "1": { name: "Geeks", age: 30 }, };
`
Pick<T, K>
Pick<T, K> constructs a new type by picking a set of properties K (which is a union of string literals) from type T
JavaScript `
type UserName = Pick<User, "name">;
`
10. Type Assertions
Type assertions in TypeScript allow you to override the compiler's type inference and explicitly tell it what type a value is.
JavaScript `
let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;
`
11. Modules
Modules in TypeScript allow you to organize your code into separate files, improving code maintainability and reusability.
Exporting
JavaScript `
export class MyClass { /* ... / } export const myFunction = () => { / ... */ };
`
Importing
JavaScript `
import { MyClass, myFunction } from "./myModule";
`
12. Advanced Concepts In Typescript
Conditional Types
JavaScript `
type NonNullable = T extends null | undefined ? never : T;
`
Mapped Types
JavaScript `
type Readonly = { readonly [P in keyof T]: T[P]; };
`
Template Literal Types
JavaScript ``
type EventName = on${Capitalize<string>};
``