TypeScript 之 Type
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)
const data = { x: 123 }
type Content2 = typeof data
// Content2 = { x: number }
类型来自方法返回值(Type from Func Return)
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)
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
TypeScript 之 Type的更多相关文章
- TypeScript & as & Type Assertion
TypeScript & as & Type Assertion Type Assertion (as) That is not vanilla JavaScript, it is T ...
- [TypeScript] Work with DOM Elements in TypeScript using Type Assertions
The DOM can be a bit tricky when it comes to typing. You never really know exactly what you're going ...
- [TypeScript] Use the TypeScript "unknown" type to avoid runtime errors
The "any" type can be very useful, especially when adding types to an existing JavaScript ...
- [TypeScript] Increase TypeScript's type safety with noImplicitAny
TypeScript tries to infer as much about your code as it can. But sometimes there really is not enoug ...
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
Using the optional “+” sign together with mapped type modifiers, we can create more explicit and rea ...
- [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type
ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...
- (译文)开始学习Webpack-应用TypeScript,配置热加载和Source Map
项目初始化:采用TypeScript 我们的版本是: $ node --version v8.5.0 $ npm --version 5.5.1 npm版本升级了,因为npm最近带来了新特性,本地会生 ...
- 6、什么是TypeScript、TypeScript的安装、转换为.js文件
1.什么是TypeScript (本人用自己的理解梳理了一下,不代表官方意见) TypeScript:Type+ECMAScript6 TypeScript是一种预处理编程语言,遵循es6标准规范,在 ...
- [TypeScript] Transform Existing Types Using Mapped Types in TypeScript
Mapped types are a powerful and unique feature of TypeScript's type system. They allow you to create ...
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
This lesson introduces the --strictNullChecks compiler option and explains how non-nullable types di ...
随机推荐
- 使用tomcat部署java的war包操作
修改tomcat配置文件server.xml 修改端口号,别跟其他已经被使用的端口号起冲突 修改项目所在路径 <?xml version="1.0" encoding=&qu ...
- PostgreSQL 创建数据库
PostgreSQL 创建数据库可以用以下三种方式: 1.使用 CREATE DATABASE SQL 语句来创建. 2.使用 createdb 命令来创建. 3.使用 pgAdmin 工具. CRE ...
- SpringBoot 项目部署(初级)
之前的项目一直在本地电脑上写,最近需要将项目部署到服务器上进行联调测速度.于是,在网上搜集资料后简单的进行一下总结. 由于本次打包部署是为了测试,于是很多内容做的还不算详尽,只是将项目简单的打包为ja ...
- ImGUI 1.87 绘制D3D外部菜单
ImGUI 它是与平台无关的C++轻量级跨平台图形界面库,没有任何第三方依赖,可以将ImGUI的源码直接加到项目中使用,该框架通常会配合特定的D3Dx9等图形开发工具包一起使用,ImGUI常用来实现进 ...
- 玖章算术受邀参加红杉Talk「创新的复利」科技专场,共同探讨云计算的前世今生
9月2日,本周五14:00 「创新的复利」 Sequoia Talk系列论坛,首期直播盛大启动.在第一期科技专场,4位红杉中国资深投资人.8位创新创业者将带我们深入工业软件.机器人.云计算等领域,围绕 ...
- 华为网关交换机开启DHCP server服务
华为网关交换机可以配置基于全局地址池的DHCP服务器,也可以配置基于接口地址池的DHCP服务器,本人比较倾向于配置基于接口地址池的DHCP服务器,因此在这里只介绍后者. 第一步:开启DHCP功能 [S ...
- OpenAPI 接口幂等实现
OpenAPI 接口幂等实现 1.幂等性是啥? 进行一次接口调用与进行多次相同的接口调用都能得到与预期相符的结果. 通俗的讲,创建资源或更新资源的操作在多次调用后只生效一次. 2.什么情况会需要保证幂 ...
- 使用 StringUtils.split 的坑
点赞再看,动力无限. 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. 在日常的 Java 开发中,由于 J ...
- 基于docker和cri-dockerd部署kubernetes v1.25.3
基于docker和cri-dockerd部署kubernetes v1.25.3 1.环境准备 1-1.主机清单 主机名 IP地址 系统版本 k8s-master01 k8s-master01.wan ...
- C#在Xp系统执行.exe程序的报错怎么查看原因
我的电脑---->管理---->事件查看器----->应用程序,查看错误来源