Practical TypeScript tips you may not know

Preface
Function Overloading
Mapping Type

Partial, Readonly, Nullable, Required
Pick, Record
Exclude, Omit
ReturnType

Type Assertions

enumerate

Tuple

Paradigm

infer

Summarize

Preface

I have used typescript for a long time, but I feel like I haven't fully used it. Because many features of TypeScript are not used, the code I wrote before is full of any, which can easily lead to many bugs and does not bring out the true "type" power of TypeScript. This article summarizes some tips for using typescript, which can be used when using typescript in the future.

Without further ado, let's get straight to the code.

Function Overloading

When you want to pass user parameters, do not pass flag. When you want to pass para parameters, pass flag. You can write:

interface User {
  name: string;
  age: number;
}

const user = {
  name: 'Jack',
  age: 123
};

class SomeClass {

  public test(para: User): number;
  public test(para: number, flag: boolean): number;

  public test(para: User | number, flag?: boolean): number {
    // Specific implementation return 1;
  }
}

const someClass = new SomeClass();

// ok
someClass.test(user);
someClass.test(123, false);

// Error
// someClass.test(123); 
//Argument of type 'number' is not assignable to parameter of type 'User'.
// someClass.test(user, false);
//Argument of type '{ name: string; age: number; }' is not assignable to parameter of type 'number'.

Mapping Type

Before understanding mapping types, you need to understand keyof, never, typeof, and in.

keyof: keyof takes the key of the interface

interface Point {
    x: number;
    y: number;
}

// type keys = "x" | "y"
type keys = keyof Point;

never: a type of value that never exists

Official description:

the never type represents the type of values that never occur.

// Example: perform comprehensive compile-time checking type Foo = string | number;

function controlFlowAnalysisWithNever(foo: Foo) {
  if (typeof foo === "string") {
    // Here foo is narrowed to type string } else if (typeof foo === "number") {
    // Here foo is narrowed to type number } else {
    // foo is never here
    const check: never = foo;
  }
}

Use never to avoid adding a new union type without a corresponding implementation. The purpose is to write absolutely type-safe code.

typeof: Get the type of a value

const a: number = 3

// equivalent to: const b: number = 4
const b: typeof a = 4

in: Checks whether a property exists on an object

interface A {
  x: number;
}

interface B {
  y: string;
}

function doStuff(q: A | B) {
  if ('x' in q) {
    // q: A
  } else {
    // q: B
  }
}

Mapping type is mapping one type to another type. Simply put, the new type converts each attribute of the old type in the same form.

Partial, Readonly, Nullable, Required

Partial converts each property into an optional property
Readonly Converts each property to a read-only property
Nullable is converted to a union of the old type and null
Required makes each attribute a required attribute

type Partial<T> = {
    [P in keyof T]?: T[P];
}

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}

type Nullable<T> = { 
  [P in keyof T]: T[P] | null 
}

type Required<T> = {
  [P in key of T]-?: T[P]
}

interface Person {
    name: string;
    age: number;
}

type PersonPartial = Partial<Person>;
type PersonReadonly = Readonly<Person>;
type PersonNullable = Nullable<Person>;

type PersonPartial = {
    name?: string | undefined;
    age?: number | undefined;
}

type PersonReadonly = {
    readonly name: string;
    readonly age: number;
}

type PersonNullable = {
      name: string | null;
      age: number | null;
}

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 };
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Pick, Record

Pick selects a set of attributes to specify a new type
Record creates a set of attributes to specify a new type, often used to declare ordinary Object objects

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
}

type Record<K extends keyof any, T> = {
  [P in K]: T;
}

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

todo; // = const todo: TodoPreview


interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const nav: Record<Page, PageInfo> = {
  about: { title: "title1" },
  contact: { title: "title2" },
  home: { title: "title3" },
};

nav.about; // = const nav: Record

Exclude, Omit

Exclude removes the intersection and returns the remaining part
Omit applies to Exclude of key-value pair objects, removing the key-value pairs contained in the type

type Exclude<T, U> = T extends U ? never : T
type Omit = Pick<T, Exclude<keyof T, K>>

// equivalent to: type A = 'a'
type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Omit<Todo, "description">;

const todo: TodoPreview = {
  title: "a",
  completed: false,
};

ReturnType

Get the return value type, usually a function

type ReturnType<T extends (...args: any) => any>
  = T extends (...args: any) => infer R ? R : any;

declare function f1(): { a: number; b: string };
type T1 = ReturnType<typeof f1>;
// type T1 = {
// a: number;
// b: string;
// }

There are many more mapping types, see the Utility Types reference.

Type Assertions

Type assertions are used to explicitly tell TypeScript the detailed type of a value. Proper use can reduce our workload.

For example, a variable does not have an initial value, but we know its type information (it may be returned from the backend). Is there any way to correctly deduce the type information and run it normally? One recommended method online is to set an initial value and then use typeof to get the type (which may be used elsewhere). You can also use type assertions to solve this problem:

interface User { 
    name: string; 
    age: number; 
}

export default class someClass { 
    private user = {} as User;
}

enumerate

Enumeration types are divided into numeric types and string types, where numeric enumerations can be used as flags:

enum AnimalFlags {
    None = 0, 
    HasClaws = 1 << 0, 
    CanFly = 1 << 1, 
    HasClawsOrCanFly = HasClaws | CanFly 
}

interface Animal { 
    flags: AnimalFlags; 
   [key: string]: any; 
}

function printAnimalAbilities(animal: Animal) { 
    var animalFlags = animal.flags; 
    if (animalFlags & AnimalFlags.HasClaws) { 
        console.log('animal has claws'); 
    } 
    if (animalFlags & AnimalFlags.CanFly) { 
        console.log('animal can fly'); 
    } 
    if (animalFlags == AnimalFlags.None) { 
        console.log('nothing'); 
    } 
}

var animal = { flags: AnimalFlags.None }; 
printAnimalAbilities(animal); // nothing 
animal.flags |= AnimalFlags.HasClaws; 
printAnimalAbilities(animal); // animal has claws 
animal.flags &= ~AnimalFlags.HasClaws; 
printAnimalAbilities(animal); // nothing 
animal.flags |= AnimalFlags.HasClaws | AnimalFlags.CanFly; 
printAnimalAbilities(animal); // animal has claws, animal can fly

Use |= to add a flag;
Use &= and ~ together to clear a flag;
| to combine flags.

This may not be commonly used. We can also see similar code in the typescript source code about types:

An enumeration of string type can maintain constants:

const enum TODO_STATUS {
  TODO = 'TODO',
  DONE = 'DONE',
  DOING = 'DOING'
}

function todos (status: TODO_STATUS): Todo[];

todos(TODO_STATUS.TODO)

Tuple

Represents an array of known number and type of elements, which do not have to be of the same type.

let x: [string, number];
x = ['hello', 10];

When making multiple requests, you can apply:

const requestList: any[] = [http.get<A>('http://some.1')]; // Set to any[] type if (flag) { 
    requestList[1] = (http.get<B>('http://some.2')); 
} 
const [ { data: a }, response ] = await Promise.all(requestList) as [Response<A>, Response<B>?]

Paradigm

After defining generics, there are two ways to use them, one is to pass in the generic type, and the other is to use type inference.

declare function fn<T>(arg: T): T; // Define a generic function const fn1 = fn<string>('hello'); // The first way, pass in the generic type string const fn2 = fn(1); // The second way, infer the type of generic T is number from the type number passed in by the parameter arg

An example of building a tree structure from a flat array structure:

// Data before conversion const arr = [ 
{ id: 1, parentId: 0, name: 'test1'}, 
{ id: 2, parentId: 1, name: 'test2'}, 
{ id: 3, parentId: 0, name: 'test3'} 
]; 
// After conversion [{ id: 1, parentId: 0, name: 'test1', 
    childrenList: [ { id: 2, parentId: 1, name: 'test2', childrenList: [] } ] }, 
    { id: 3, parentId: 0, name: 'test3', childrenList: [] } 
]


interface Item { 
    id: number; 
    parentId: number; 
    name: string; 
}

// Get the type of childrenKey from the passed options parameter, and then pass it to TreeItem

interface Options<T extends string> { 
    childrenKey: T; 
} 
type TreeItem<T extends string> = Item & { [key in T]: TreeItem<T>[] | [] }; 
declare function listToTree<T extends string = 'children'>(list: Item[], options: Options<T>): TreeItem<T>[]; 
listToTree(arr, { childrenKey: 'childrenList' }).forEach(i => i.childrenList)

infer

Represents the type variable to be inferred in an extends conditional statement.

type ParamType<T> = T extends (param: infer P) => any ? P : T;

This means: if T can be assigned to (param: infer P) => any, the result is the parameter P in the (param: infer P) => any type, otherwise it returns T.

interface User { 
    name: string; 
    age: number; 
} 
type Func = (user: User) => void 
type Param = ParamType<Func>; // Param = User 
type AA = ParamType<string>; // string

example:

// [string, number] -> string | number
type ElementOf<T> = T extends Array<infer E> ? E : never;

type TTuple = [string, number];

type ToUnion = ElementOf<TTuple>; // string | number


// T1 | T2 -> T1 & T2
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;

type Result = UnionToIntersection<T1 | T2>; // T1 & T2

Summarize

Typescript is very powerful in terms of type restrictions. Due to the limited number of articles, there are other types such as union types, intersection types, etc. Readers can check the information themselves. When you first come into contact with paradigms and their various combinations, you may feel unfamiliar with them. Then you will slowly apply them in the project and try to minimize bugs.

This is the end of this article about practical tips for typescript. For more relevant practical tips for typescript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

6 Practical Tips for TypeScript Development
TypeScript references resource files and prompts that they cannot be found when handling exceptions
Share 7 Practical TypeScript One-Liners

<<: Analysis of the difference between the usage of left join setting conditions in on and where in mysql

>>: Detailed explanation of the most reasonable way to partition the hard disk when installing Ubuntu Linux system