第二节:TypeScript其他数据类型

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 其他区别

1. 类型别名可能会出现在错误消息中, 接口将始终出现在错误消息中
2. 类型别名不能参与声明合并, 接口可以
3. 接口只能用于对象结构, 不能重新命名基本类型, 但类型别名可以

大多数情况下, 可以根据个人喜欢进行选择.