dev-resources.site

for different kinds of informations.

Typescript quick concept refresher and reference

Published at

9/25/2024

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");
  }

null and undefined: 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.

cheatsheet Article's

30 articles in total