Shulou(Shulou.com)06/01 Report--

This article mainly introduces how typescript uses mapping types, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Mapping type

Before you know the mapping type, you need to know keyof, never, typeof, and in.

Keyof:keyof fetches the key of interface

Interface Point {x: number; y: number;} / / type keys = "x" | "y" type keys = keyof Point

Never: the type of value that never exists

Official description:

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

/ / example: full check at compile time type Foo = string | number;function controlFlowAnalysisWithNever (foo: Foo) {if (typeof foo = "string") {/ / where foo is narrowed to string type} else if (typeof foo = = "number") {/ / here foo is narrowed to number type} else {/ / foo here is never const check: never = foo;}}

Using never to avoid the addition of federated types without corresponding implementations, the aim is to write code that is absolutely type safe.

Typeof: take the type of a value

Const a: number = 3 shock / equivalent to: const b: number = 4const b: typeof a = 4

In: check whether an attribute 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 a type is to map one type to another, and simply to understand that the new type converts each attribute of the old type in the same form.

Partial, Readonly, Nullable, Required

Partial converts each attribute to an optional attribute

Readonly converts each property to a read-only property

Nullable is converted to a federated type of old type and null

Required converts each attribute to a required attribute

Type Partial = {[P in keyof T]?: t [P];} type Readonly = {readonly [P in keyof T]: t [P];} type Nullable = {[P in keyof T]: t [P] | null} type Required = {[P in keyof T] -: t [P]} interface Person {name: string; age: number;} type PersonPartial = Partial;type PersonReadonly = Readonly;type PersonNullable = Nullable;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 {await: number; breadth: string;} const obj: Props = {a: 5}; const obj2: Required = {a: 5}; / / Property 'b'is missing in type'{a: number;} 'but required in type' Required'.Pick, Record

Pick selects a set of properties to specify a new type

Record creates a set of properties to specify a new type, which is often used to declare ordinary Object objects

Type Pick = {[P in K]: t [P];} type Record = {[P in K]: t;} interface Todo {title: string; description: string; completed: boolean;} type TodoPreview = Pick;const todo: TodoPreview = {title: "Clean room", completed: false,}; todo; / / = const todo: TodoPreviewinterface PageInfo {title: string;} type Page = "home" | "about" | "contact" Const nav: Record = {about: {title: "title1"}, contact: {title: "title2"}, home: {title: "title3"},}; nav.about; / / = const nav: RecordExclude, Omit

Exclude removes the intersection and returns the rest

Omit applies to the Exclude of the key-value pair object, removing the key-value pair contained in the type

Type Exclude = T extends U? Never: Ttype Omit = Pick// is equivalent to: type A = 'a'type A = Excludeinterface Todo {title: string; description: string; completed: boolean;} type TodoPreview = Omit;const todo: TodoPreview = {title: "a", completed: false,}; ReturnType

Gets the return value type, which is usually a function

Type ReturnType any > = T extends (... args: any) = > infer R? R: any;declare function F1 (): {a: number; b: string}; type T1 = ReturnType;// type T1 = {/ / a: number;// b: string / /} Thank you for reading this article carefully. I hope the article "how to use Mapping types in typescript" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.