TypeScript类型使用示例剖析
更新时间：2023年05月05日 09:26:12 作者：渣渣钱端攻城狮
这篇文章主要为大家介绍了TypeScript类型使用示例剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
JavaScript的内置类型 VS TypeScript内置类型
| JS | TS | 备注 | 类型 |
|---|---|---|---|
| number | number | 基础类型 | |
| string | string | 基础类型 | |
| boolean | boolean | 基础类型 | |
| undefined | undefined | 基础类型 | |
| null | null | 基础类型 | |
| symbol | symbol | ES6新增 | 基础类型 |
| bigint | bigint | ES11新增 | 基础类型 |
| Object | object 或 字面量描述 | - | 对象类型 |
| Array | Array<T> 或 元祖描述 | ES6新增 | 对象类型 |
| Promise | Promise<T> | ES6新增 | 对象类型 |
| Date | Date | - | 对象类型 |
| RegExp | RegExp | - | 对象类型 |
| Map、Set | Map<Key, Value> | ES6新增 | 对象类型 |
| ..... | 对象类型 |
除此之外，TypeScript又单独提出了三种类型，分别是元祖(Tuple)、接口(Interface)、枚举(Enum)
元祖
元素个数和类型固定的数组
type Tuple = [number, string];
接口interface
可以描述函数、对象、构造器的结构
描述对象
interface Person {
name: string;
age: number;
}
const personObj: Person = {
name: 'zhangsan',
age: 18
}
// 如果对象的属性不是固定的，可以考虑使用索引签名进行类型声明
interface Person {
name: string;
age: number;
[prop: string]: string | number;
}
描述函数
interface GetDataInterface {
(name: string):string;
}
const getData: GetDataInterface = (name) => {
return `${name}你好`
}
描述构造器
interface Person {
name: string;
age: number;
}
interface PersonConstructor{
new (name: string, age: number): Person;
}
function createPerson(ctor: PersonConstructor): Person{
return new ctor('zhangsan', 18);
}
// 使用createPerson案例
class Employee {
public name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
createPerson(Employee);
interface和type有什么区别？
枚举
数字枚举
enum DataEnum {
A,
B,
C
}
console.log(DataEnum[0]);//反向映射 输出 A
console.log(DataEnum[1]); //反向映射 输出 B
console.log(DataEnum['A']); //正向映射 输出 0
编译后的代码
字符串枚举
enum DataEnum {
ThisA = 'A',
ThisB = 'B',
ThisC = 'C'
}
console.log(DataEnum['ThisA']); // 输出 A
编译后的代码
常量枚举
- 编译阶段生成的对象会被删除
- 常量枚举成员在使用的地方被内联进来
- 不存在映射关系，而且只能正向访问，不能 Directions[0] 这种使用
const enum Directions {
Up,
Down,
Left,
Right
}
console.log(Directions.Up);
编译后的代码
上图编译后的代码是符合ts常量枚举的概念的，但是你会发现，当常量枚举和react、vue结合使用的时候，编译后的代码并不会删除映射对象，编译后常量枚举和普通枚举没有区别，这又是为什么呐？
目前TypeScript受限于babel限制无法支持常量枚举const enum，Babel是一个语法转换器，是逐个脚步一个个编译的，无法处理跨文件的源码更新。例如type.ts文件内导出一个常量枚举，这个常量枚举被多个文件使用，Babel是单个文件编译，并不会根据多个入口对type.ts进行重复编译，所以导致babel编译TS时不支持const enum，会将其当初普通enum处理。
怎么让Babel支持const enum?
Babel V7.15.0+版本，使用 @babel/plugin-transform-typescript插件，配置### optimizeConstEnums为true，可以让Babel编译TS时，如果常量枚举是文件内联，没有export导出，会当成常量枚举进行编译。如果进行了export导出，同样还是会当初普通枚举编译，这是因为Babel的逐个编译单个文件特性导致
字面量类型
字面量类型也就是例如 111、'aaaa'、{a: 1}这种值也可以作为类型。其主要分为两类:
- 第一类是
普通的字面量类型，就是111、'aaa'、{a: 1}这种。 - 第二类是
模板字面量类型，比如test${string}表示以test开头的字符串
functon getData(name: `test${string}`){
}
特殊类型
- never 代表不可达，比如函数抛出异常的时候，就是返回never
- void 代表空，可以是undefined或never
- any 任意类型，任意类型可以复制给它，它也可以赋值给任意类型(never除外)
- unknown 是未知类型，任何类型都可以赋值给它，但是它不可以赋值给别的类型
类型的装饰
?: 可有可无
readonly: 只读属性，不允许修改
interface Person{
readonly name: string;
age?: number;
}
type Tuple = [string, number, object?];以上就是TypeScript类型使用示例剖析的详细内容，更多关于TypeScript类型剖析的资料请关注脚本之家其它相关文章！
相关文章
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了Bootstrap CSS组件之导航条(navbar)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本篇文章主要介绍了javascript阻止事件冒泡和浏览器的默认行为。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
本文主要介绍了amd、cmd、esmodule、commonjs区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要给大家介绍了关于uniapp实现微信小程序支付(前端)的相关资料,发现网上教程很多,单只针对小程序的简单清晰的流程却很少,文字通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
Proxy是JavaScript的一个内置对象，它允许您拦截并自定义对象的行为。本文将和大家简单聊聊JavaScript中Proxy对象的创建与使用，感兴趣的可以了解一下2023-03-03
这篇文章主要为大家详细介绍了javascript实现评分功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
惰性函数定义模式 使用方法...2007-09-09
最近项目结束，很空闲，于是就试着仿照微信跳一跳写了一个极简版的游戏，到底简单到什么程度呢?大家可以参考下本文2018-01-01
返回unix时间戳所对应的具体时间的代码2010-07-07
最新评论