Better than a colleague? TS these 7 methods, you need to know!

Author: juno ng
Translator: Frontend Xiaozhi
Source: medium

There are dreams and dry goods. WeChat search [Moving to the World] Follow this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

The type system in TypeScript is very powerful. It provides us with type safety. Although the type system is popular, if we do not plan and design types and interfaces, it will also make our code messy and difficult to read.

Generic

Avoiding code duplication and creating reusable types is an important part of our writing concise code. Generics are a feature of TypeScript, which allows 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 Add , which can be used to describe the addition of two numbers or the connection of two strings. We don't need to write a type for each function, but only need to do it once with generics. This not only saves our energy, but also makes our code more concise and less error-prone.

Practical type

TypeScript natively provides several useful practical types to help us carry out 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. Pick<Type, Keys>

Pick will select the attribute set Keys from Type to create a new type. Keys can be a string literal or a combination of string literals. The value of Keys must be the key of Type, otherwise the TypeScript compiler will complain. This utility type is especially useful when you want to create lighter objects by picking certain properties from objects with 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. Omit<Type, Keys>

Omit is the opposite of Pick Keys does not mean which attributes to keep, but the attribute key set to be omitted. This is more useful when we only want to remove certain properties from the object and keep other properties.

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

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

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

3. Partial<Type>

Partial constructs a type, all of its type attributes are set to optional. This may 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. Required<Type>

Required is the opposite of Partial It constructs a type whose all attributes are required types. It can be used to ensure that no optional attributes appear 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. Readonly<Type>

Readonly constructs a type, all attributes of the type are set to read-only. If you re-assign the new value TS, an error will be reported.

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 'name' because it is a read-only property.

7. ReturnType<Type>

ReturnType constructs a type from the return type of a function type. It is very useful when we are dealing 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 practical types that can help us write cleaner code. Links to TypeScript documentation on the types of utilities can be found here.

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

Utility types are very useful features provided by TypeScript. Developers should use them to avoid hard-coding types. Want to be better than your colleagues? These are all you need to know!

~ End, I’m Shuwanzhi, I’m going to go to that one, see you next time!

---

Original: https://medium.com/ng/7-utility-types-that-every-typescript-developer-should-know-788fe73421f1

possible bugs of the 161380412c784a code after deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://learue.co/2020/01/a-vue-event-hanling-cheatsheet-the-essentials/

comminicate

There are dreams and dry goods. WeChat search [Move to the World] pay attention to this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.