共计 3648 个字符,预计需要花费 10 分钟才能阅读完成。
目录
-
根底类型语法
-
原始类型
- 字符串
- 数字
- 布尔值
- Null
- Undefined
- Symbol
- Void
- Never
- any 类型
- Object 类型
- 数组类型
-
元组类型
- 元组的应用场景
-
枚举类型
- 特点
- DEMO
- 枚举类型会入侵代码
- 常量枚举
-
- TypeScript 学习地图
根底类型语法
原始类型
字符串
const a: string = 'foobar'
数字
const b: number = 100 // NaN、Infinity
布尔值
const c: boolean = true // false
Null
const e: null = null
非严格模式下 string、number、boolean、void
容许为空null
,严格模式下不行
// 严格模式下会报错
const d: string = null
如何敞开严格模式? 置文件中找
strict
{ "compilerOptions": { // true 是开启严格模式,false 是敞开严格模式 "strict": false, } }
Undefined
const f: undefined = undefined
Symbol
尽管是原始类型,然而这个类型是 ES6
提出的,默认的配置是ES3
,所以会报错。
如果 target
改成 es5
,Symbol
也会报错,怎么办呢? TypeScript(一) —— 类型规范库中有具体阐明
const h: symbol = Symbol()
Void
它示意没有任何类型。
const d: void = undefined
最长当一个函数没有返回值时,你通常会见到其返回值类型是 void
。
function Fuc(): void {console.log('hello world')
}
Never
目前没有见到用的,看文档说函数抛出异样会用,所以这里先不做解释。
any 类型
any
是任意类型,其依然是动静类型,和一般的 JavaScript
变量是一样的,能够存储任意类型的值,在运行中也能够扭转成任意类型的值,语法上都不会报错,因为是任意类型的值所以 TypeScript
不会对其做类型查看。
let foo: any = 'string'
foo = 100
foo.bar()
// 以后 value 能够是任意类型的值
function stringify(value: any) {return JSON.stringify(value)
}
stringify('string')
stringify(100)
stringify(true)
而正是因为 any
不会进行类型查看,所以还是存在类型平安的问题,所以不要轻易应用,其存在还是次要 为了老代码的兼容存在。
Object 类型
Object
类型即非原始类型,不单单指对象类型,还包含对象、数组、函数类型。
// 应用原始类型会报错
// 这里 object 不是只接管对象,而是包含函数、数组和对象
const foo: object = function () {} // 对象 {} // 数组 []
单纯要对象类型须要定义字面量模式,限度是赋值的对象构造必须和定义的完全一致,不能多也不能少。
const obj: {foo: number, bar: string} = {foo: 123, bar: 'string'}
如果在 TypeScript
中限度对象类型,更业余的形式是应用接口,接口的货色下次再说。
数组类型
// 一般申明
const arr1: Array<number> = [1, 2, 3]
// 简短申明
const arr2: number[] = [1, 2, 3]
举个例子:传入数字的参数,最初返回数字的总和
// 所以这里要确定咱们这里是不是数字类型,增加数组类型注解
function sum (...args: number[]) {// reduce 的第一个参数是上一次回调的后果 第二个参数是以后值(初始值为 0),最初返回两者之和
return args.reduce((prev, current) => prev + current, 0)
}
console.log(sum(1, 2, 3, 4, 5)) // 15
console.log(sum(1, 2, '3', 4, 5)) // error!
元组类型
元组是明确元素数量,以及每个元素类型的数组。能够数组字面量来申明元组类型。
// 上面的如果类型和数量不统一都会报错
const tuple: [number, string] = [1, 'string']
// 如果要拜访元组的元素,仍旧应用下标的形式拜访即可
const age = tuple[0]
const name = tuple[1]
// 也能够应用数组解构的形式拜访
const [age, name] = tuple
元组的应用场景
- 在函数中返回多个返回值
React useState() Hook
返回的是元组类型Object.entries()
获取对象中所有的键值数组,每个键值就是一个元组
枚举类型
开发过程中,常常波及到须要用某几个数值去代表某几种状态。其余语言中很常见这种数据结构,然而在 JS
中并没有这种数据结构,个别会用对象去模仿。
const PostStatus = {
Draft: 0,
Unpublished: 1,
Published: 2
}
const page = {
title: 'typeScript 指南',
content: 'content',
status: PostStatus.Draft
}
特点
当初 TypeScript
中有了枚举类型,其特点是:
- 给一组数值取一个语义性更好的名字
- 一组数据中只存在几个固定的值,不存在超出范围的可能性
DEMO
举个例子:上面是出版书籍的三个状态:
Draft
是草稿状态:0
Unpublished
是未出版:1
Published
是已出版:2
// enum 是枚举类型,前面是枚举名称,外面应用的是等号并不是冒号
enum PostStatus {
Draft = 0,
Unpublished = 1,
Published = 2
}
// 应用的时候还是用对象. 的形式去应用
const post = {
title: 'typeScript 指南',
content: 'content',
status: PostStatus.Published // 1 // 0
}
如果不加 =
,那么值就默认从0
开始累加
enum PostStatus1 {
Draft, // 0
Unpublished, // 1
Published // 2
}
如果给了第一个值,那么之后的成员都会在此基础上进行累加
enum PostStatus2 {
Draft = 6, // 6
Unpublished, // 7
Published // 8
}
枚举的值还能够是字符串,字符串无奈自增长,须要每个都进行赋值
enum PostStatusStr {
Draft = 'string1',
Unpublished = 'string2',
Published = 'string3'
}
枚举类型会入侵代码
枚举类型会入侵到运行时的代码,简略说就是会影响编译的后果,TypeScript
的大多数类型最终都会被编译移除掉,只是为了开发的时候能进行类型查看,而枚举会编译成 双向的键值对对象
, 能够通过值找键,能够依据键找值。
上面这种代码就会保留到我的项目中
var PostStatus;
(function (PostStatus) {
// 能够看到上面的代码,内层应用枚举的键存储枚举的值,外层再用枚举的值去做键,存一下枚举的键
PostStatus[PostStatus["Draft"] = 0] = "Draft";
PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";
PostStatus[PostStatus["Published"] = 2] = "Published";
})(PostStatus || (PostStatus = {}));
这样做的目标是:能够动静的依据枚举值去获取枚举的名称
PostStatus[0] // Draft
如果咱们不必下面这个语句去拜访键,那么倡议应用 常量枚举
常量枚举
常量枚举就是在 enum
后面增加const
,这样就不会对代码进行入侵,下面的双向键值对的代码会被移除,只是在最初增加一些正文。
- 不加
const
的编译后代码
var PostStatus;
(function (PostStatus) {PostStatus[PostStatus["Draft"] = 0] = "Draft";
PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";
PostStatus[PostStatus["Published"] = 2] = "Published";
})(PostStatus || (PostStatus = {}));
var post = {
title: 'Hello TypeScript',
content: 'content',
status: PostStatus.Published // 1 // 0
};
- 加
const
的编译后代码
// 下面的 PostStatus 会去掉,换成上面间接取的值
var post = {
title: 'Hello TypeScript',
content: 'content',
status: 2 /* Published */ // 1 // 0
};
TypeScript 学习地图