首页 > 其他 > 详细

typescript 高级类型理解

时间:2021-04-01 22:58:10      阅读:21      评论:0      收藏:0      [点我收藏+]

一 TypeScript基本概念定义:TypeScript核心原则之一是对值所具有的结构进行类型检查。

泛型:是指在函数,接口,类定义时不指名具体某种类型,在运行时指定特定类型的一种特性。
enum枚举:表示一个命名元素的集合。
 

二 元组与数组区别:

在所有的数据类型里,Array是唯一的泛型类型,也是唯一有两种不同的写法:Array<T>T[]

元组的长度是固定已知的。因此使用场景也非常明确,适合用在有固定的标准/参数/配置的地方,比如经纬度坐标、屏幕分辨率等。

 

三 交叉类型与联合类型与类型保护:https://www.cnblogs.com/fei-hui/p/14498919.html

Typescript支持通过&|操作符对类型声明进行扩展

交叉类型(并集):用&相连的多个类型。

 1 interface A {
 2   name: string,
 3   age: number,
 4   sayName: (name: string) => void
 5 }
 6 interface B {
 7   name: string,
 8   gender: string,
 9   sayGender: (gender: string) => void
10 }
11 
12 let a: A & B
13 
14 // 都是合法的
15 a.age
16 a.sayName

联合类型(合集):联合类型是具有 或 关系的多个类型组合而成,只要满足其中一个类型即可,用|相连,只能访问所有源类型的公共成员。

两者之间的区别主要体现在联合类型主要在做类型的合并,如Form4TypeForm6Type;而交叉类型则是求同排斥,如Form3TypeForm5Type

 1 interface A {
 2   name: string,
 3   age: number
 4 }
 5 interface B {
 6   name: string,
 7   sayGender: (gender: string) => void
 8 }
 9 
10 let a: A | B
11 
12 a.name // 可以访问
13 a.age // 不可以访问
14 
15 type Form1Type = { name: string; } & { gender: number; }
16 // 等于 type Form1Type = { name: string; gender: number; }
17 type Form2Type = { name: string; } | { gender: number; }
18 // 等于 type Form2Type = { name?: string; gender?: number; }
19 
20 let form1: Form1Type = { name: ‘王五‘ } // 提示缺少gender参数
21 let form2: Form2Type = { name: ‘刘六‘ } // 验证通过
22 
23 type Form5Type = { name: string; } & { name?: number; gender: number; }
24 // 等于 type Form5Type = { name: never; gender: number; }
25 type Form6Type = { name: string; } | { name?: number; gender: number; }
26 // 等于 type Form6Type = { name?: string | number; gender: number; }
27 
28 let form5: Form5Type = { name: ‘张三‘, gender: 1 } // 提示name的类型为never,不能进行赋值
29 let form6: Form6Type = { name: ‘张三‘, gender: 1 } // 验证通过

类型保护:

常用的类型保护有typeof类型保护,instanceof类型保护和自定义类型保护

1 function BuildURL(param: string | number): any {
2   if (typeof param === ‘string‘) {
3     return param.toUpperCase()
4   }
5 }

由于使用了typeof类型保护,所以在if的分支里可以告诉编译器放心的调用string类型的方法,编译器也会给出自动提示

 

四 interface与Type区别:https://juejin.cn/post/6844903749501059085#heading-11

接口是在我们的应用程序中充当契约的结构。它定义了要遵循的类的语法,这意味着实现接口的类必须实现它的所有成员。

相同点:1都可以描述一个对象或者函数 2 都允许拓展(extends)

区别: type可以而interface不可以:

  • type 可以声明基本类型别名,联合类型,元组等类型
  • type 语句中还可以使用 typeof 获取实例的 类型进行赋值
interface 能够声明合并
 1 interface User {
 2  name: string
 3  age: number
 4 }
 5 
 6 interface User {
 7  sex: string
 8 }
 9 
10 /*
11 User 接口为 {
12  name: string
13  age: number
14  sex: string 
15 }
16 */

 

五 类型别名: 类型别名会给一个类型起个新名字。 类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。

type strType = string | number | boolean;
let str2: strType = "10";
str2 = 10;
str2 = true;

interface muchType1 {
  name: string
}
interface muchType2 {
  age: number
}
type muchType = muchType1 | muchType2
let obj: muchType = { name: "张三" }
let obj2: muchType = { age: 10 }
let obj4: muchType = { name: "张三", age: 10 }

 强大的类型别名操作API:https://cloud.tencent.com/developer/article/1541321

强大的类型别名操作Demo:https://blog.csdn.net/weixin_33895695/article/details/91373813 

typeScript中interface与type对比面试题:https://www.cnblogs.com/EnSnail/p/11233592.html

 

 

 

typescript 高级类型理解

原文:https://www.cnblogs.com/terrymin/p/14608350.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!