脚本宝典收集整理的这篇文章主要介绍了Typescript 中的类型操作，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
搬运自官网：https://www.typescriptlang.org/docs/handbook/2/types-from-types.html
TypeScript 的类型系统非常强大（重要），因为它允许用其他类型来表达类型。这个想法最简单的形式是泛型，我们实际上有各种各样的类型运算符可供使用。也可以用我们已经拥有的值来表达类型。
typescript中的泛型与其它语言的类似，既可以用于函数，也可以用于类，示例：
1 function loggingIdentity<Type>(arg: Type): Type { 2 console.log(arg); 3 return arg; 4 } 5 6 interface Lengthwise { 7 length: number; 8 } 9 10 function loggingIdentityWithLengthWise<Type extends Lengthwise>(arg: Type): Type { 11 console.log(arg.length); 12 return arg; 13 } 14 15 let u1 = loggingIdentity<string>("Hello"); 16 let u2 = loggingIdentityWithLengthWise<string>("Hello") 17 18 class GenericNumber<NumType> { 19 zeroValue: NumType; 20 add: ((x: NumType, y: NumType) => NumType); 21 } 22 23 let myGenericNumber = new GenericNumber<number>(); 24 myGenericNumber.zeroValue = 0; 25 myGenericNumber.add = function (x, y) { 26 return x + y; 27 }; 28 console.log(myGenericNumber.add(3,2));
在 TypeScript 中使用泛型创建工厂时，需要通过其构造函数引用类类型。例如，
1 class BeeKeeper { 2 hasMask: boolean = true; 3 } 4 5 class ZooKeeper { 6 nametag: string = "Mikle"; 7 } 8 9 class Animal { 10 numLegs: number = 4; 11 } 12 13 class Bee extends Animal { 14 keeper: BeeKeeper = new BeeKeeper(); 15 } 16 17 class Lion extends Animal { 18 keeper: ZooKeeper = new ZooKeeper(); 19 } 20 21 function createInstance<A extends Animal>(c: new () => A): A { 22 return new c(); 23 } 24 25 createInstance(Lion).keeper.nametag; 26 createInstance(Bee).keeper.hasMask;
获取类型的所有 key 的集合
1 interface Person { 2 name: string; 3 age: number; 4 } 5 type personKeys = keyof Person; 6 //等同于：type personKeys = 'name' | 'age' 7 let p1 = { 8 name: 'thia', 9 age: 30 10 } 11 function getPersonVal (k: personKeys) { 12 return p1[k] 13 } 14 /**等同于 15 function getPersonVal(k: 'name' | 'age'){ 16 return p1[k] 17 } 18 */ 19 getPersonVal('name') //ok 20 getPersonVal('gender') //error
在typescript中 typeof 有两种作用：
1 let str1 = 'hello'; 2 //let声明的是变量，把 'string' 作为值 3 let t = type of str1; 4 //type声明的是类型，把 ‘string’作为类型 5 type myType = typeof str1; 6 7 let a = t; 8 let str2: myType = 'world';
我们可以使用索引访问类型来查找另一种类型的特定属性：
索引类型本身就是一种类型，因此我们可以完全使用联合keyof、 或其他类型：
如果您尝试索引不存在的属性，您甚至会看到错误：
Property 'alve' does not exist on type 'Person'.条件类型的形式有点像condition ? trueExpression : falseExpressionJavaScript 中的条件表达式 ( )：
SomeType extends OtherType ? TrueType : FalseType;
当左侧的类型extends可分配给右侧的类型时，您将在第一个分支（“真”分支）中获得类型；否则，您将在后一个分支（“假”分支）中获得类型。
从上面的示例中，条件类型可能不会立即有用 - 我们可以告诉自己是否Dog extends Animal选择numberor string！但是条件类型的强大之处在于将它们与泛型一起使用。
示例：
1 interface IdLabel { 2 id: number /* some fields */; 3 } 4 interface NameLabel { 5 name: string /* other fields */; 6 } 7 8 function createLabel(id: number): IdLabel; 9 function createLabel(name: string): NameLabel; 10 function createLabel(nameOrId: string | number): IdLabel | NameLabel; 11 function createLabel(nameOrId: string | number): IdLabel | NameLabel { 12 throw "unimplemented"; 13 } 14 15 type NameOrId<T extends number | string> = T extends number 16 ? IdLabel 17 : NameLabel; 18 19 function createLabel<T extends number | string>(idOrName: T): NameOrId<T> { 20 throw "unimplemented"; 21 } 22 23 let a = createLabel("typescript"); 24 25 let b = createLabel(2.8); 26 27 let c = createLabel(Math.random() ? "hello" : 42);
下例让typescript模板知道传入的类型有一个属性叫message
1 type MessageOf<T extends { message: unknown }> = T["message"]; 2 3 interface Email { 4 message: string; 5 } 6 7 type EmailMessageContents = MessageOf<Email>;
我们刚刚发现自己使用条件类型来应用约束，然后提取类型。这最终成为一种常见的操作，条件类型使它更容易。
条件类型为我们提供了一种方法来推断我们使用infer关键字在真实分支中比较的类型。例如，我们可以推断元素类型，Flatten而不是使用索引访问类型“手动”获取它：
1 type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;
在这里，我们使用infer关键字声明性地引入了一个新的泛型类型变量Item，而不是指定如何T在真正的分支中检索元素类型。这使我们不必考虑如何挖掘和探索我们感兴趣的类型的结构。
infer我们可以使用关键字编写一些有用的辅助类型别名。例如，对于简单的情况，我们可以从函数类型中提取返回类型：
1 type GetReturnType<Type> = Type extends (...args: never[]) => infer Return 2 ? Return 3 : never; 4 5 type Num = GetReturnType<() => number>; 6 7 type Str = GetReturnType<(x: string) => string>; 8 9 type Bools = GetReturnType<(a: boolean, b: boolean) => boolean[]>;
当从具有多个调用签名的类型（例如重载函数的类型）进行推断时，会根据最后一个签名进行推断（这可能是最宽松的包罗万象的情况）。无法根据参数类型列表执行重载决议。
当您不想重复自己时，有时一种类型需要基于另一种类型。映射类型建立在索引签名的语法之上，用于声明未提前声明的属性类型：
例：OptionsFlags将从类型中获取所有属性Type并将其值改为bool型
1 type OptionsFlags<Type> = { 2 [Property in keyof Type]: boolean; 3 }; 4 5 type FeatureFlags = { 6 darkMode: () => void; 7 newUserProfile: () => void; 8 }; 9 10 type FeatureOptions = OptionsFlags<FeatureFlags>; 11 12 // type FeatureOptions = { 13 // darkMode: boolean; 14 // newUserProfile: boolean; 15 // }
在 TypeScript 4.1 及更高版本中，您可以使用映射类型中的as子句重新映射映射类型中的键：
1 type Getters<Type> = { 2 [Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property] 3 }; 4 5 interface Person { 6 name: string; 7 age: number; 8 location: string; 9 } 10 11 type LazyPerson = Getters<Person>; 12 // type LazyPerson = { 13 // getName: () => string; 14 // getAge: () => number; 15 // getLocation: () => string; 16 // }
模板文字类型建立在字符串文字类型之上，并且能够通过联合扩展成许多字符串。
它们与JavaScript 中的模板文字字符串具有相同的语法，但用于类型位置。当与具体文字类型一起使用时，模板文字通过连接内容来生成新的字符串文字类型。
当在插值位置使用联合时，类型是可以由每个联合成员表示的每个可能的字符串文字的集合。对于模板文字中的每个插值位置，联合是交叉相乘的：
1 type EmailLocaleIDs = "welcome_email" | "email_heading"; 2 type FooterLocaleIDs = "footer_title" | "footer_sendoff"; 3 4 type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`; 5 // type AllLocaleIDs = "welcome_email_id" | "email_heading_id" | "footer_title_id" | "footer_sendoff_id"
请注意，我们并没有从原始传递对象中提供的所有信息中受益。给定一个firstName（即一个firstNameChanged事件）的变化，我们应该期望回调将收到一个类型的参数string。同样，更改的回调age应该接收一个number参数。我们天真地使用any输入callBack' 参数。同样，模板文字类型可以确保属性的数据类型与该属性的回调的第一个参数类型相同。
使这成为可能的关键见解是：我们可以使用具有泛型的函数，这样：
1 type PropEventSource<Type> = { 2 on<Key extends string & keyof Type> 3 (eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void; 4 }; 5 6 declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>; 7 8 const person = makeWatchedObject({ 9 firstName: "Saoirse", 10 lastName: "Ronan", 11 age: 26 12 }); 13 14 person.on("firstNameChanged", newName => { 15 console.log(`new name is ${newName.toUpperCase()}`); 16 }); 17 18 person.on("ageChanged", newAge => { 19 20 if (newAge < 0) { 21 console.warn("warning! negative age"); 22 } 23 })
这里我们做成on了一个泛型方法。
当用户使用字符串调用时"firstNameChanged'，TypeScript 将尝试推断Key. 为此，它将与Key之前的内容匹配"Changed"并推断字符串"firstName"。一旦 TypeScript 确定了这一点，该on方法就可以获取firstName原始对象的类型，string在本例中就是这样。同样，当使用 调用时"ageChanged"，TypeScript 会找到属性的age类型number.
推理可以以不同的方式组合，通常是解构字符串，并以不同的方式重构它们。
以上是脚本宝典为你收集整理的Typescript 中的类型操作全部内容，希望文章能够帮你解决Typescript 中的类型操作所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。