1. 文字类型
除了一般的string,number类型外, 我们还可以在类型的位置引用特定的字符串和数字
如果不给变量添加类型注释, 而直接赋予字符串或数字初始值, TypeScript会根据值对端为string或number类型
let str = 'hello world'
// let str: string
let num = 20
// let num: number
这不是问题类型
文字类型,是将字符串或数字添加到类型注释的位置
let str:'hello world' = 'hello world'
// let str: "hello world"
let num:20 = 20
// let num: 20
就起本身而言, 文字类型并不是很有价值,因为变量只能赋予跟类型相同的值. 变量自始至终都只能有一个值
2. 不太常见基本数据类型
2.1 bigint
从ES2020开始, JavaScript新增了一个基本类型BigInt,用于非常大的整数
// 构造函数创建bigint
const num:bigint = BigInt(100)
// const num: bigint
// 字面量创建bigint值
const num2:bigint = 100n
// const num2: bigint
2.2 symbol
symbol是JavaScript中通过函数Symbol()创建全局唯一应用的类型
// 添加Symbol类型注释
let uname:Symbol = Symbol('name')
// let uname: symbol
// 推断Symbol类型
let sname = Symbol('name')
// let sname: symbol
3. 联合类型
TypeScript的类型系统允许使用各种运算符从现有的类型中构建新的类型
3.1 定义联合类型
联合类型是有两种或多种其他类型组成的类型. 表示可能是这些类型中的任何一种类型的值
例如:
let numOrStr:string | number;
// let numOrStr: string | number
示例中通过|符合来组合string和number两种基本类型,得到一个新的类型string | number联合类型
通过联合类型注释的变量numOrStr可以赋值string类型的值也可以赋值number类型的值
let numOrStr:string | number;
// let numOrStr: string | number
numOrStr = 'hello'
console.log(numOrStr) // hello
numOrStr = 20
console.log(numOrStr) // 20
3.2 使用联合类型
提供与联合类型匹配的值很容易,至于要提供与联合类型任何成员匹配的类型即可.
但如果需要使用联合类型呢?
注意:TypeScript只有对联合类型每个成员都有的情况下才允许操作.
例如,获取上个示例变量的length属性
let len = numOrStr.length;
// 类型“number”上不存在属性“length”。
此时就会报错, 因为string | number联合类型中成员number类型并不具有length属性
解决的方法就是通过缩小联合类型, 就像没有类型注释的JavaScript一样.
通过条件判断, 让TypeScript根据代码结构推断出更具体的类型时, 变量的类型就发生缩小
例如:
let len:number;
if(typeof numOrStr === 'string'){
len = numOrStr.length;
// let numOrStr: string
}else{
len = numOrStr
// let numOrStr: number
}
通过条件分支, 进入到true分支后变量numOrStr的类型被缩小为只有string类型. 因为number类型的值是进入不到true分支,
而联合类型中剩下的类型则进入false分支.
这样我们在true分支中使用length属性就不会有任何问题
有的时候,联合属性都有某个共同点, 例如数组和字符串都有slice方法.
类似于这种,如果联合中每个成员都有共同的属性, 则可以直接使用该属性,而不用缩小类型范围
例如:
let numOrStr:string | number[];
// let numOrStr: string | number[]
// ok
let arr = numOrStr.slice(0,2)
// let numOrStr: string | number[]
4. 类型别名
我们一直通过在类型注释中编写对象类型和联合类型来使用他们, 这很方便.但又会带来另外一个问题.
例如我希望多次使用同一个对象类型或联合类型, 此时我们就需要用到类型别名
也就是我们自定义一个类型名称, 并通过名称来引用对象类型或联合类型. 这样我们就可以通过类型名称来复用类型, 这个类型名称我们成为类型别名
类型别名的语法是:
type 类型别名 = 类型
例如: 定义一个对象类型的类型别名
// 类型别名
type Person = {
name:string;
age: number
}
// 类型注释
let student:Person = {name:"张三",age:18}
let worker:Person = {name:'工人',age:28}
实际上,可以使用类型别名来为任何类型命名, 而不仅仅是对象类型.
例如: 使用类型命名命名联合类型
// 类型别名
type NumOrString = number | string
// 类型注释
let numOrStr:NumOrString = 'hello world'
let numOrStr2:NumOrString = 20
请注意:别名只是别名,尽量不要使用类型别名来创建相同类型的不同名称.
例如:如下代码,根据TypeScript是完全可以的, 只不过两种类型都是用一种类型的别名
// 类型别名(userString,string 两个类型都是字符串类型的别名)
type userString = string
let str:userString = 'hello world'
当你使用别名时, 就好像你已经别写了别名类型.
5. 接口
接口声明是命名对象类型的另外一种方式
接口就是一种类型检查器, 检查对象的属性,只要这些属性存在,并且值的类型符合接口定义类型就可以了
接口:使用interface关键词定义
例如:
// 声明接口
interface Person{
name:string,
age: number
}
// 对象的类型注释
let student:Person = {name:'张三',age:18}
就像使用类型别名一样, 使用接口来进行变量的类型注释
TypeScript值关系我们传递的值的结构是否符合接口预期的属性,以及属性值的类型.
类型别名和接口的优点就在于可以复用,并且利于维护,
那么类型别名和接口的区别在哪里了
6. 接口与类型别名的区别
类型别名和接口非常相似, 在很多情况下可以在他们之间自由选择. 几乎所有interface的特性都可以在type中使用.主要区别在于类型别名不能重新打开添加新属性. 而接口总是可以扩展的
6.1 扩展
接口的扩展使用extends关键字
// 接口
interface Base{
name:string
}
// 扩展接口
interface Person extends Base{
age: number
}
/*
此时Person接口有两个属性
1. name属性 ,继承自Base接口
2. age 属性, 自己扩展Base接口的属性
*/
// 因此在使用Person时必须同时满足两个属性以及属性值的类型
let student:Person = {name:'张三',age:15}
类型别名的扩展(通过交叉扩展类型)
扩展类型别名使用&符号
// 类型别名
type Base = {
name: string
}
// 类型别名扩展
type Person = Base & {
age: number
}
// 使用扩展类型别名
let student:Person = {name:'张三',age:15}
6.2 添加新字段
接口:
像已经声明好的接口中添加新的属性
使用相同的接口名称就可以
// 接口
interface Person{
name:string
}
// 接口扩展字段
interface Person{
age: number
}
// TypeScript会自动将两个同名接口合并
/*
此时Person接口有两个属性
1. name属性
2. age 属性, 扩展字段(属性)
*/
// 因此在使用Person时必须同时满足两个属性以及属性值的类型
let student:Person = {name:'张三',age:15}
类型无法通过当前名称扩展字段, 因为类型创建后无法更改
// 类型别名
type Person = {
name: string
}
// 扩展
type Person = {
age: number
}
// 报错:标识符“Person”重复。
因此,没办法定义两个相同名称的类型别名
6.3 其他区别
- 类型别名可能会出现在错误消息中, 接口将始终出现在错误消息中
- 类型别名不能参与声明合并, 接口可以
- 接口只能用于对象结构, 不能重新命名基本类型, 但类型别名可以
大多数情况下, 可以根据个人喜欢进行选择.
网友评论