文章第一句话为“这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
ts是以JavaScript为基础构建的语言,是一个JavaScript的超集,可以在任何支持JavaScript的平台中执行,它扩展了JavaScript并添加了类型,但它不能被JS解析器直接执行,需要编译为js
好处:
ts有更好的类型提示,合理利用ts可以提高编码效率
ts提供的静态编译可以让程序更健壮,提前知道程序的不安全之处,而不是运行时报错才知道
ts新增了类型,支持ES的新特性,添加了ES不具备的新特性,并且有着强大的开发工具和丰富的配置选项
语法:
let 变量: 类型
let 变量: 类型 = 值
function fn(参数: 类型, 参数: 类型): 类型 {
...
}
当变量声明和赋值同时进行,TS编译器会自动判断变量的类型,可以省略掉类型声明
类型
1、number:和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量,TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
2、string:表示文本数据类型。 和JavaScript一样,可以使用双引号(")或单引号(')表示字符串。
3、boolean:true/false值
4、字面量:只能赋值其本身,可以结合联合类型使用
let b: 'male' | 'female'
b = 'male'
b = 'female'
5、any:任意类型,可以任意赋值,ts类型检查器不会对这些值进行检查
let a: any // 显示any
let b // 隐式any,只声明变量,不声明类型及赋值时,该变量类型为any
7、unknown:表示未知的类型,可以任意赋值。与any的区别在于,any类型可以赋值给其他任意类型的变量,unknown类型不能直接赋值给其它类型的变量(可以用判断或类型断言解决)
let a: unknown
a = 10
a = true
a = 'hi'
let b: string
b = 'hello'
if (typeof a === 'string') {
b = a
}
// 或类型断言
b = a as string
8、void:空值,多用于规定函数的返回值类型,表示该函数没有返回值或返回值为undefined或null
9、never:没有值,表示的是那些永不存在的值的类型。常用于那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。
never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使any也不可以赋值给never。
10、object:表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型
- 指定对象中包含哪些属性
// 语法:{属性名: 类型, 属性名: 类型}
// 在属性名后加?,表示该属性是可选的
let a: {name: string, age?: number}
a = {name: 'xia'}
a = {name: 'xia', age: 18}
// [propName: string]: any 表示可以添加任意类型的属性
let b: {name: string, [propName: string]: any} // name的属性是必须的,其它属性任意添加
b = {name: 'xia', gender: 'nan', age: 20}
- 设置函数结构的类型声明
// 语法:(形参: 类型, 形参: 类型, ...) => 返回值类型
let a: (arg0: number, arg2: number) => number
a = function(n1:number, n2:number):number {
return n1 + n2
}
11、数组:
// 定义一:类型[],表示此类型元素组成的一个数组
let a: string[]
a = ['hello', 'hi']
// 定义二:Array<类型>
let b: Array<number>
b = [1, 2]
12、tuple(元组):表示一个已知元素数量和类型的数组,各元素的类型不必相同
// 语法:[类型,类型,类型]
let a: [number, string]
a = [10, 'hello']
13、enum(枚举):可以为一组数值赋予友好的名字
enum Gender {
male,
female
}
let a: {name: string, gender: Gender}
a = {name: 'xia', gender: Gender.male}
五、高级类型
1、联合类型:使用 | 来连接多个类型
let b: number | string
b = 124
b = 'hello'
2、类型断言
b = a as string
b = <string>a
3、交叉类型:使用 & 链接多个类型,将多个类型合并为一个类型,它包含了所需的所有类型的特性
let a: {name: string} & {age: number}
a = {name: 'xia', age: 18}
关键字
extends
infer
readonly
in
...
ts还提供了许多内置对象可以方便快捷的创建类型