Une brève discussion sur 7 méthodes à connaître dans TypeScript

Cet article partagera avec vous 7 méthodes en TypeScript que vous devez connaître. J'espère qu'il vous sera utile !

Le système de types dans TypeScript est très puissant. Il nous offre une sécurité de type. Aussi appréciés que soient les systèmes de types, ils peuvent également rendre notre code encombré et illisible si nous ne planifions pas et ne concevons pas les types et les interfaces.

Génériques

Éviter la duplication de code et créer des types réutilisables est une partie importante de l'écriture de code concis. Les génériques sont une fonctionnalité de TypeScript qui nous permet d'écrire des types réutilisables. Regardez l'exemple suivant :

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
}

Mettez le type correct dans le type générique Add, qui peut être utilisé pour décrire l'ajout de deux nombres ou la concaténation de deux chaînes. Au lieu d'écrire un type pour chaque fonction, nous n'avons besoin de le faire qu'une seule fois avec des génériques. Non seulement cela nous épargne des efforts, mais cela rend également notre code plus propre et moins sujet aux erreurs. Add的泛型中，它可以被用来描述两个数字的相加或两个字符串的连接。我们不需要为每个函数写一个类型，而只需要用泛型做一次。这不仅节省了我们的精力，而且还使我们的代码更加简洁，更不容易出错。

实用类型

TypeScript 原生提供了几个有用的实用类型来帮助我们进行一些常见的类型转换。这些实用类型是全局可用的，它们都使用了泛型。

下面这7个是我经常用到的。

1. Pick4e2a32c6388cf5960c2e01475a1f2df9

Pick会从 Type 中挑选属性集 Keys 来创建一个新的类型，Keys 可以是一个字符串字面或字符串字面的联合。Keys 的值必须是 Type 的键，否则TypeScript编译器会抱怨。当你想通过从有很多属性的对象中挑选某些属性来创建更轻的对象时，这个实用类型特别有用。

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与Pick相反。 Keys 不是说要保留哪些属性，而是指要省略的属性键集。 当我们只想从对象中删除某些属性并保留其他属性时，这个会更有用。

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 构造了一个类型，其所有的类型属性都设置为可选。当我们在编写一个对象的更新逻辑时，这个可能非常有用。

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与Partial相反。它构造了一个类型的所有属性都是必填的类型。它可以被用来确保在一个类型中没有可选属性出现。

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 构建了一个类型，其类型的所有属性被设置为只读。重新分配新的值 TS 就会报错。

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

Types d'utilitaires

TypeScript fournit nativement plusieurs types d'utilitaires utiles pour nous aider à effectuer certaines conversions de types courantes. Ces types d'utilitaires sont disponibles dans le monde entier et utilisent tous des génériques.

Les 7 suivants sont ceux que j'utilise souvent.

1. Pick4e2a32c6388cf5960c2e01475a1f2df9

Pick sélectionnera l'ensemble d'attributs Keys from Type pour créer un nouveau type. Les clés peuvent être une chaîne Une union. de littéraux ou de chaînes littérales. La valeur de Keys doit être une clé de Type , sinon le compilateur TypeScript se plaindra. Ce type d'utilitaire est particulièrement utile lorsque vous souhaitez créer un objet plus léger en sélectionnant certaines propriétés d'un objet possédant de nombreuses propriétés.

import axios from 'axios'

type Response = ReturnType<typeof axios>

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

2. Omit4e2a32c6388cf5960c2e01475a1f2df9

Omit est l'opposé de Pick. Clés ne signifie pas quels attributs conserver, mais l'ensemble de clés d'attribut à omettre. Ceci est plus utile lorsque nous souhaitons simplement supprimer certaines propriétés de l'objet et en conserver d'autres. 🎜rrreee🎜🎜3. Partial30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜Partial construit un type avec toutes ses propriétés de type définies comme facultatives. Cela peut être très utile lorsque nous écrivons une logique de mise à jour pour un objet. 🎜rrreee🎜🎜4. Obligatoire30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜Obligatoire est l'opposé de Partiel. Il construit un type où toutes les propriétés sont requises. Il peut être utilisé pour garantir qu’aucune propriété facultative n’est présente dans un type. 🎜rrreee🎜🎜5. Readonly30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜Readonly Construit un type dans lequel toutes les propriétés du type sont définies en lecture seule. La réaffectation d'une nouvelle valeur TS entraînera une erreur. 🎜rrreee🎜🎜6. ReturnType30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜ReturnType Construit un type à partir du type de retour d'un type de fonction. C'est très utile lorsque nous traitons de types de fonctions provenant de bibliothèques externes et que nous souhaitons créer des types personnalisés basés sur eux. 🎜rrreee🎜En plus de ceux mentionnés ci-dessus, il existe d'autres types d'utilitaires qui peuvent nous aider à écrire un code plus propre. Un lien vers la documentation TypeScript sur les types d'utilitaires peut être trouvé ici. 🎜🎜🎜https://www.typescriptlang.org/docs/handbook/utility-types.html🎜🎜🎜Les types d'utilitaires sont une fonctionnalité très utile fournie par TypeScript. Les développeurs devraient en profiter pour éviter les types de codage en dur. Vous êtes plus beau que vos collègues ? Voici ce que vous devez savoir ! 🎜🎜🎜Cet article est réimprimé sur : https://segmentfault.com/a/1190000040574488🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!