TypeScript is a powerful superset of JavaScript that adds static types, making your code more robust and maintainable. Whether you're a beginner or an experienced developer, having a cheat sheet can be incredibly handy. This post provides a comprehensive cheat sheet to help you quickly reference key TypeScript concepts and syntax.
Basic Types
-
any: A type that can be anything.
let variable: any;
-
boolean: True or false values.
let isDone: boolean = false;
-
number: All numbers, including integers and floats.
let decimal: number = 6;
-
string: Textual data.
let color: string = "blue";
-
array: Arrays of a specific type.
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
-
tuple: An array with a fixed number of elements of specific types.
let x: [string, number];
x = ["hello", 10];
-
enum: A way to define a set of named constants.
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
-
void: The absence of any type, commonly used for functions that do not return a value.
function warnUser(): void {
console.log("This is my warning message");
}
-
nullandundefined: Their own types as well as subtypes of all other types.
let u: undefined = undefined;
let n: null = null;
Advanced Types
-
union: A variable that can hold multiple types.
let value: string | number;
value = "hello";
value = 42;
-
type alias: Creating a new name for a type.
type Name = string;
type NameOrNumber = Name | number;
-
interface: Describes the shape of an object.
interface Person {
firstName: string;
lastName: string;
}
let user: Person = { firstName: "John", lastName: "Doe" };
-
type assertion: Telling the compiler to treat a variable as a different type.
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
Functions
- Function Types: Describing the types of functions.
function add(x: number, y: number): number {
return x + y;
}
let myAdd: (x: number, y: number) => number = function(x, y) { return x + y; };
- Optional and Default Parameters: Parameters that are optional or have default values.
function buildName(firstName: string, lastName?: string): string {
return firstName + " " + (lastName || "");
}
Classes
- Basic Class: Defining a class with properties and methods.
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
- Inheritance: Extending a class to create a new class.
class Animal {
move(distanceInMeters: number = 0) {
console.log(`Animal moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
let dog = new Dog();
dog.bark();
dog.move(10);
Generics
- Generic Functions: Functions that work with any data type.
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
- Generic Classes: Classes that work with any data type.
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
Utility Types
- Partial: Makes all properties in a type optional.
interface Todo {
title: string;
description: string;
}
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}
- Readonly: Makes all properties in a type read-only.
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users"
};
Conclusion
This cheat sheet covers the essentials of TypeScript, providing a quick reference for common types, functions, classes, and more. Keep it handy as you work on your TypeScript projects to streamline your development process and ensure you're using the language to its full potential.
Top comments (0)