Heim > Artikel > Web-Frontend > Eine kurze Diskussion über 7 wissenswerte Methoden in TypeScript
Dieser Artikel stellt Ihnen 7 Methoden in TypeScript vor, die Sie kennen müssen. Ich hoffe, er wird Ihnen hilfreich sein!
Das Typsystem in TypeScript ist sehr leistungsfähig. Es bietet uns Typensicherheit. So beliebt Typsysteme auch sind, sie können unseren Code auch unübersichtlich und unlesbar machen, wenn wir Typen und Schnittstellen nicht planen und entwerfen.
Das Vermeiden von Codeduplizierungen und das Erstellen wiederverwendbarer Typen ist ein wichtiger Bestandteil beim Schreiben von prägnantem Code. Generics sind eine Funktion von TypeScript, die es uns ermöglicht, wiederverwendbare Typen zu schreiben. Schauen Sie sich das folgende Beispiel an:
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
}Fügen Sie den richtigen Typ in den generischen Typ von Add ein, der zur Beschreibung der Addition zweier Zahlen oder der Verkettung zweier Zeichenfolgen verwendet werden kann. Anstatt für jede Funktion einen Typ zu schreiben, müssen wir dies mit Generika nur einmal tun. Dies erspart uns nicht nur Aufwand, sondern macht unseren Code auch sauberer und weniger fehleranfällig. 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 'name' because it is a read-only property.6. ReturnType30690cee1a11d5dfbdced93b89f678ee
ReturnType
Die folgenden 7 verwende ich oft.
1. Pick4e2a32c6388cf5960c2e01475a1f2df9
Pickwählt den Attributsatz Keys aus Type aus, um einen neuen Typ zu erstellen von Literalen oder String-Literalen. Der Wert von Keys muss ein Schlüssel vom Type sein, andernfalls wird sich der TypeScript-Compiler beschweren. Dieser Dienstprogrammtyp ist besonders nützlich, wenn Sie ein leichteres Objekt erstellen möchten, indem Sie bestimmte Eigenschaften aus einem Objekt auswählen, das über viele Eigenschaften verfügt.import axios from 'axios' type Response = ReturnType<typeof axios> function callAPI(): Response{ return axios("url") }
2. Omit4e2a32c6388cf5960c2e01475a1f2df9
Omit ist das Gegenteil von Pick. Keys bedeutet nicht, welche Attribute beibehalten werden sollen, sondern die Menge der Attributschlüssel, die weggelassen werden sollen. Dies ist nützlicher, wenn wir nur bestimmte Eigenschaften vom Objekt entfernen und andere beibehalten möchten. 🎜rrreee🎜🎜3. Partial30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜Partial erstellt einen Typ, bei dem alle seine Typattribute auf optional gesetzt sind. Dies kann sehr nützlich sein, wenn wir Aktualisierungslogik für ein Objekt schreiben. 🎜rrreee🎜🎜4. Erforderlich62c7bca83627d50881591b7faa9f6dc2🎜🎜🎜Erforderlich ist das Gegenteil von Teilweise. Es erstellt einen Typ, bei dem alle Eigenschaften erforderlich sind. Damit kann sichergestellt werden, dass in einem Typ keine optionalen Eigenschaften vorhanden sind. 🎜rrreee🎜🎜5. Readonly30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜Readonly Konstruiert einen Typ, in dem alle Eigenschaften des Typs auf schreibgeschützt gesetzt sind. Die Neuzuweisung eines neuen Wertes TS führt zu einem Fehler. 🎜rrreee🎜🎜6. ReturnType30690cee1a11d5dfbdced93b89f678ee🎜🎜🎜ReturnType Konstruiert einen Typ aus dem Rückgabetyp eines Funktionstyps. Dies ist sehr nützlich, wenn wir mit Funktionstypen aus externen Bibliotheken arbeiten und darauf basierend benutzerdefinierte Typen erstellen möchten. 🎜rrreee🎜Zusätzlich zu den oben genannten gibt es noch andere Dienstprogrammtypen, die uns helfen können, saubereren Code zu schreiben. Einen Link zur TypeScript-Dokumentation zu Dienstprogrammtypen finden Sie hier. 🎜🎜🎜https://www.typescriptlang.org/docs/handbook/utility-types.html🎜🎜🎜Utility-Typen sind eine sehr nützliche Funktion von TypeScript. Entwickler sollten sie nutzen, um Hardcoding-Typen zu vermeiden. Sehen Sie besser aus als Ihre Kollegen? Das müssen Sie wissen! 🎜🎜🎜Dieser Artikel ist abgedruckt unter: https://segmentfault.com/a/1190000040574488🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über 7 wissenswerte Methoden in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!