TypeScript 之 Type

IT技术2年前 (2022)发布 IT大王
0

Type

描述:全称叫做 ‘类型别名’,为类型字面量提供名称。比 Interface 支持更丰富的类型系统特性。

Type 与 Interface 区别

  • Interface 只能描述对象的形状,Type 不止
  • Interface 能多次声明进行扩展,Type 不行
  • 在性能方面,Type 接口检查能够更快

特性

和变量类似,可以在不同的作用域中创建具有相同的名称。

TypeScript 内置了许多全局类型,将帮助你在类型系统完成常用的任务。

对象字面量语法( Object Literal Syntax )

type JsonRsponse = {
  version: number;
  outOfStock?: boolean; // 可选属性
  readonly body: string; // 只读属性
  /** In bytes */
  payloadSize: number;  // 编辑器注释提示
  update: (retryTimes: number) => void; // 箭头函数方法
  update2(retryTimes: number): void; // 方法
  (): JsonRsponse; // 函数
  [key: string]: number; // 接受字符串索引,值为number
  new (s: string): JSONResponse; // 构造函数 
}

这些对象字面量的语法和 Interface 的没有区别,详情可阅读我另一篇 Interface 随笔。https://www.cnblogs.com/lxrNote/p/16953606.html

原始类型(Primitive Type)

type SanitizedIput = string
type MissingNo = 404

元组类型(Tuple Type)

元组是知道明确下标的特殊数组
type Data = [
  location: Location,
  timestamp: string
]

联合类型(Union Type)

联合类型是描述众多类型之一
type Size = "small" | "medium" | "large"

交叉类型(Intersection Types)

一种扩展/合并的方法
type local = { x: number } & { y: number }
// local {x:number;y:number}

索引类型(Type Indexing)

如果其它类型别名是引用类型,可以通过索引获取其值类型

type Res = { data: { x: string } }
type Content = Res["data"]
// Conent {x:string}

类型来自值(Type from Value)

重用通过 typeof 运算符取出值在JavaScript 运行时的类型
const data = { x: 123 }
type Content2 = typeof data
// Content2 = { x: number }

类型来自方法返回值(Type from Func Return)

重用方法的返回值作为类型,ReturnType 是内置全局类型
const createFixtures = ()=>{ return 123}
type Fixtures = ReturnType<typeof createFixtures>
// Fixtures = numer

类型来自模块(Type from Module)

const data: import("./data").data

没看懂,知道的朋友指导下。。。。。。

映射类型(Mapped Types)

type Artist = {name: string,bio: string}
type Subscriber<Type> = {
  // 循环遍历泛型参数 Type 的每一个字段
  [Property in keyof Type]:
  (nv: Type[Property]) => void
  //设置类型为一个函数,原始类型为参数
}
type ArtisSub = Subscriber<Artist>
// { name: (nv: string)=>void, bio: (nv:string)=>void }

条件类型(Conditional Types)

在类型系统中充当 if 语句,通过泛型创建,通常用于减少联合类型中的选项数量。
type HasFourLegs<Animal> = Animal extends { legs: 4 } ? Animal : never
type Bird = { cry: '唧唧喳喳', legs: 2 }
type Dog = { cry: '汪汪汪', legs: 4 }
type Ant = { cry: '...', legs: 6 }
type Wolf = { cry: '嗷呜~', legs: 4 }
type Animal = Bird | Dog | Ant | Wolf
type FourLegs = HasFourLegs<Animal>
// FourLegs = Dog | Wolf

模板联合类型(Template Union Types)

字符串模板可以用来组合和操纵类型系统中的文本
type SupportedLangs = "en" | "pt" | "zh";
type FooterLocaleIDs = "header" | "footer";
type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`;
// "en_header_id" | "en_footer_id" | "pt_header_id" | "pt_footer_id" | "zh_header_id" | "zh_footer_id"

感谢观看,欢迎互相讨论与指导,以下是参考资料链接

https://www.typescriptlang.org/static/TypeScript%20Types-ae199d69aeecf7d4a2704a528d0fd3f9.png

© 版权声明
好牛新坐标 广告
版权声明:
1、IT大王遵守相关法律法规,由于本站资源全部来源于网络程序/投稿,故资源量太大无法一一准确核实资源侵权的真实性;
2、出于传递信息之目的,故IT大王可能会误刊发损害或影响您的合法权益,请您积极与我们联系处理(所有内容不代表本站观点与立场);
3、因时间、精力有限,我们无法一一核实每一条消息的真实性,但我们会在发布之前尽最大努力来核实这些信息;
4、无论出于何种目的要求本站删除内容,您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》:https://itdw.cn/ziliao/sfgs.pdf,
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明: http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理;请按照此通知格式填写发至本站的邮箱 wl6@163.com

相关文章