A brief discussion on 7 methods worth knowing in TypeScript

This article will share with you 7 methods in TypeScript that you need to know. I hope it will be helpful to you!

#The type system in TypeScript is very powerful. It provides us with type safety. As beloved as type systems are, they can also make our code cluttered and unreadable if we don't plan and design types and interfaces.

Generics

Avoiding code duplication and creating reusable types is an important part of writing concise code. Generics are a feature of TypeScript that allow us to write reusable types. Look at the following example:

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {
  return a + b
}

const addStrings: Add<string> = (a, b) => {
  return a + b
}

Put the correct type into the generic type of Add, which can be used to describe the addition of two numbers or the concatenation of two strings. Instead of writing a type for each function, we only need to do it once with generics. Not only does this save us effort, but it also makes our code cleaner and less error-prone.

Utility types

TypeScript natively provides several useful utility types to help us perform some common type conversions. These utility types are globally available and they all use generics.

The following 7 are the ones I often use.

1. Pick4e2a32c6388cf5960c2e01475a1f2df9

Pick will select the attribute set Keys from Type to create a New type, Keys can be a string literal or a union of string literals. The value of Keys must be a key of the Type , otherwise the TypeScript compiler will complain. This utility type is particularly useful when you want to create a lighter object by picking certain properties from an object that has many properties.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Pick<User, "name" | "age">

// type BasicUser = {
//   name: string;
//   age: number;
// }

2. Omit4e2a32c6388cf5960c2e01475a1f2df9

Omit is the opposite of Pick. Keys It does not mean which attributes to keep, but the set of attribute keys to omit. This is more useful when we just want to remove certain properties from the object and keep others.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Omit<User, "address" | "occupation">

// type BasicUser = {
//   name: string;
//   age: number;
// }

3. Partial30690cee1a11d5dfbdced93b89f678ee

Partial Constructs a type with all its type attributes set is optional. This can be very useful when we are writing update logic for an object.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type PartialUser = Partial<User>

// type PartialUser = {
//   name?: string;
//   age?: number;
//   address?: string;
//   occupation?: string;
// }

4. Required30690cee1a11d5dfbdced93b89f678ee

##Required is the opposite of Partial. It constructs a type where all properties are required. It can be used to ensure that no optional properties are present in a type.

type PartialUser = {
  name: string
  age: number
  address?: string
  occupation?: string
}

type User = Required<PartialUser>

// type User = {
//   name: string;
//   age: number;
//   address: string;
//   occupation: string;
// }

5. Readonly30690cee1a11d5dfbdced93b89f678ee

Readonly Constructs a type with all properties of its type set is read-only. Reassigning a new value TS will result in an error.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type ReadOnlyUser = Readonly<User>

const user: ReadOnlyUser = {
  name: "小智",
  age: 24,
  address: "厦门",
  occupation: "大迁世界"
}

user.name = "王大冶"
// Cannot assign to &#39;name&#39; because it is a read-only property.

6. ReturnType30690cee1a11d5dfbdced93b89f678ee

ReturnType Constructs a type from the return type of a function type. It is very useful when we deal with function types from external libraries and want to build custom types based on them.

import axios from 'axios'

type Response = ReturnType<typeof axios>

function callAPI(): Response{
  return axios("url")
}

In addition to the above mentioned, there are other utility types that can help us write cleaner code. A link to the TypeScript documentation on utility types can be found here.

https://www.typescriptlang.org/docs/handbook/utility-types.html

Utility types are a very useful feature provided by TypeScript. Developers should take advantage of them to avoid hardcoding types. Looking better than your colleagues? Here’s what you need to know!

This article is reprinted at: https://segmentfault.com/a/1190000040574488

For more programming-related knowledge, please visit:

Introduction to Programming ! !

The above is the detailed content of A brief discussion on 7 methods worth knowing in TypeScript. For more information, please follow other related articles on the PHP Chinese website!