速通TypeScript

一、类型声明

使用:来对变量或函数形参，进行类型声明：

let a: string //变量a只能存储字符串
let b: number //变量b只能存储数值
let c: boolean //变量c只能存储布尔值

a = 'hello'
a = 100 //警告：不能将类型“number”分配给类型“string”

b = 666
b = '你好'//警告：不能将类型“string”分配给类型“number”

c = true
c = 666 //警告：不能将类型“number”分配给类型“boolean”

方法：参数，返回值

// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x:number,y:number):number{
  return x + y
}

demo(100,200) 
demo(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数
demo(100,200,300) //警告：应有 2 个参数，但获得 3 个
demo(100) //警告：应有 2 个参数，但获得 1 个

在:后也可以写字面量类型，不过实际开发中用的不多。

let a: '你好'	//a的值只能为字符串“你好”
let b: 100 //b的值只能为数字100

a = '欢迎'//警告：不能将类型“"欢迎"”分配给类型“"你好"”
b = 200  //警告：不能将类型“200”分配给类型“100” 

二、类型推断

TS会根据我们的代码，进行类型推导，例如下面代码中的变量d，只能存储数字

let d = -99 //TypeScript会推断出变量d的类型是数字
d = false //警告：不能将类型“boolean”分配给类型“number”

但要注意，类型推断不是万能的，面对复杂类型时推断容易出问题，所以尽量还是明确的编写类型声明！

三、类型总览

	JavaScript 中的数据类型
基本类型	string number boolean null undefined bigint symbol object
	备注：其中object包含：Array、Function、Date、Error等…

	TypeScript 中的数据类型
1.	上述所有 JavaScript 类型
2. 六个新类型：	①any ②unknown ③never ④void ⑤ tuple ⑥ enum
3. 两个用于自定义类型的方式：	①type ②interface

注意点！

在JavaScript中的这些内置构造函数：Number、String、Boolean，用于创建对应的包装对象， 在日常开发时很少使用，在TypeScript中也是同理，所以在TypeScript中进行类型声明时，通常都是用小写的number、string、boolean

例如下面代码：

let str1: string
str1 = 'hello'
str1 = new String('hello') //报错

let str2: String
str2 = 'hello'
str2 = new String('hello')

console.log(typeof str1)
console.log(typeof str2)

四、Type（**重点）

type可以为任意类型创建别名，让代码更简洁、可读性更强，同时能更方便地进行类型复用和扩展。

基本用法

类型别名使用type关键字定义，type后跟类型名称，例如下面代码中num是类型别名。

type num = number;
let price: num
price = 100

联合类型

联合类型是一种高级类型，它表示一个值可以是几种不同类型之一。

是一种或关系

type Status = number | string
type Gender = '男' | '女'

function printStatus(status: Status) {
  console.log(status);
}

function logGender(str:Gender){
  console.log(str)
}

printStatus(404);
printStatus('200');
printStatus('501');

logGender('男')
logGender('女')

交叉类型

交叉类型（Intersection Types）允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常用于对象类型。

是一种与关系

//面积
type Area = {
  height: number; //高
  width: number; //宽
};

//地址
type Address = {
  num: number; //楼号
  cell: number; //单元号
  room: string; //房间号
};



// 定义类型House，且House是Area和Address组成的交叉类型
type House = Area & Address;

const house: House = {
  height: 180,
  width: 75,
  num: 6,
  cell: 3,
  room: '702'
};

一个特殊情况

先来观察如下两段代码：

代码段1（正常）

在函数定义时，限制函数返回值为void，那么函数的返回值就必须是空。

function demo():void{
  // 返回undefined合法
  return undefined

  // 以下返回均不合法
  return 100
  return false
  return null
  return []
}

demo()

代码段2（特殊）

使用类型声明限制函数返回值为void时，TypeScript并不会严格要求函数返回空。

type LogFunc = () => void

const f1: LogFunc = () => {
  return 100; // 允许返回非空值
};

const f2: LogFunc = () => 200; // 允许返回非空值

const f3: LogFunc = function () {
  return 300; // 允许返回非空值
};

为什么会这样？

是为了确保如下代码成立，我们知道 Array.prototype.push 的返回值是一个数字，而Array.prototype.forEach方法期望其回调的返回类型是void。

const src = [1, 2, 3];
const dst = [0];
src.forEach((el) => dst.push(el));

官方文档的说明：Assignability of Functions

五、interface（接口）（**重点）

interface是一种定义结构的方式，主要作用是为：类、对象、函数等规定一种契约，这样可以确保代码的一致性和类型安全，但要注意interface只能定义格式，不能包含任何实现 ！

定义类结构

// PersonInterface接口，用与限制Person类的格式
interface PersonInterface {
  name: string
  age: number
  speak(n: number): void
}



// 定义一个类 Person，实现 PersonInterface 接口
class Person implements PersonInterface {
  constructor(
    public name: string,
    public age: number
  ) { }

  // 实现接口中的 speak 方法
  speak(n: number): void {
    for (let i = 0; i < n; i++) {
      // 打印出包含名字和年龄的问候语句
      console.log(`你好，我叫${this.name}，我的年龄是${this.age}`);
    }
  }
}



// 创建一个 Person 类的实例 p1，传入名字 'tom' 和年龄 18
const p1 = new Person('tom', 18);
p1.speak(3)

定义对象结构

interface UserInterface {
  name: string
  readonly gender: string // 只读属性
  age?: number // 可选属性
  run: (n: number) => void
}



const user: UserInterface = {
  name: "张三",
  gender: '男',
  age: 18,
  run(n) {
    console.log(`奔跑了${n}米`)
  }
};

定义函数结构

interface CountInterface {
  (a: number, b: number): number;
}

const count: CountInterface = (x, y) => {
  return x + y
}

接口之间的继承

一个interface继承另一个interface，从而实现代码的复用

interface PersonInterface {
  name: string // 姓名
  age: number // 年龄
}



interface StudentInterface extends PersonInterface {
  grade: string // 年级
}



const stu: StudentInterface = {
  name: "张三",
  age: 25,
  grade: '高三',
}

接口自动合并（可重复定义）

// PersonInterface接口
interface PersonInterface {
  // 属性声明
  name: string
  age: number
}



// 给PersonInterface接口添加新属性
interface PersonInterface {
  // 方法声明
  speak(): void
}



// Person类实现PersonInterface
class Person implements PersonInterface {
  name: string
  age: number

  // 构造器
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  // 方法

  speak() {
    console.log('你好！我是老师:', this.name)
  }
}

总结：何时使用接口？

1. 定义对象的格式： 描述数据模型、API 响应格式、配置对象…等等，是开发中用的最多的场景。

2. 类的契约：规定一个类需要实现哪些属性和方法。

3. 扩展已有接口：一般用于扩展第三方库的类型， 这种特性在大型项目中可能会用到。

六. interface 与 type 的区别

相同点	interface和type 都可以用于定义对象结构，在定义对象结构时两者可以互换。
不同点	1️⃣interface：更专注于定义对象和类的结构，支持继承、合并。
-	2️⃣type：可以定义类型别名、联合类型、交叉类型，但不支持继承和自动合并。

// 使用 interface 定义 Person 对象

interface PersonInterface {

name: string;

age: number;

speak(): void;

}

// 使用 type 定义 Person 对象

type PersonType = {

name: string;

age: number;

speak(): void;

};

// 使用PersonInterface

/* let person: PersonInterface = {

name:‘张三’,

age:18,

speak(){

console.log(`我叫：${this.name}，年龄：${this.age}`)

}

} */

// 使用PersonType

let person: PersonType = {

name:‘张三’,

age:18,

speak(){

console.log(`我叫：${this.name}，年龄：${this.age}`)

}

}

interface PersonInterface {

name: string // 姓名

age: number // 年龄

}

interface PersonInterface {

speak: () => void

}

interface StudentInterface extends PersonInterface {

grade: string // 年级

}

const student: StudentInterface = {

name: ‘李四’,

age: 18,

grade: ‘高二’,

speak() {

console.log(this.name,this.age,this.grade)

}

}

// 使用 type 定义 Person 类型，并通过交叉类型实现属性的合并

type PersonType = {

name: string; // 姓名

age: number; // 年龄

} & {

speak: () => void;

};

// 使用 type 定义 Student 类型，并通过交叉类型继承 PersonType

type StudentType = PersonType & {

grade: string; // 年级

};

const student: StudentType = {

name: ‘李四’,

age: 18,

grade: ‘高二’,

speak() {

console.log(this.name, this.age, this.grade);

}

};

七、 interface 与 抽象类的区别

· 相同点：都能定义一个类的格式（定义类应遵循的契约）

· 不相同：

1️⃣接口：只能描述结构，不能有任何实现代码，一个类可以实现多个接口。

2️⃣抽象类：既可以包含抽象方法，也可以包含具体方法， 一个类只能继承一个抽象类。

// FlyInterface 接口

interface FlyInterface {

fly(): void;

}

// 定义 SwimInterface 接口

interface SwimInterface {

swim(): void;

}

// Duck 类实现了 FlyInterface 和 SwimInterface 两个接口

class Duck implements FlyInterface, SwimInterface {

fly(): void {

console.log('鸭子可以飞');

}

swim(): void {

console.log('鸭子可以游泳');

}

}

// 创建一个 Duck 实例

const duck = new Duck();

duck.fly(); // 输出: 鸭子可以飞

duck.swim(); // 输出: 鸭子可以游泳

八、泛型

泛型允许我们在定义函数、类或接口时，使用类型参数来表示未指定的类型，这些参数在具体使用时，才被指定具体的类型，泛型能让同一段代码适用于多种类型，同时仍然保持类型的安全性。

举例：如下代码中就是泛型，（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型：

function logData<T>(data: T): T {
  console.log(data)
  return data
}



logData<number>(100)
logData<string>('hello')

function logData<T, U>(data1: T, data2: U): T | U {
  console.log(data1,data2)
  return Date.now() % 2 ? data1 : data2
}



logData<number, string>(100, 'hello')
logData<string, boolean>('ok', false)

interface PersonInterface<T> {
  name: string,
  age: number,
  extraInfo: T
}



let p1: PersonInterface<string>
let p2: PersonInterface<number>



p1 = { name: '张三', age: 18, extraInfo: '一个好人' }
p2 = { name: '李四', age: 18, extraInfo: 250 }

interface LengthInterface {
  length: number
}



// 约束规则是：传入的类型T必须具有 length 属性

function logPerson<T extends LengthInterface>(data: T): void {
  console.log(data.length)
}

logPerson<string>('hello')

// 报错：因为number不具备length属性
// logPerson<number>(100)

class Person<T> {
  constructor(
    public name: string,
    public age: number,
    public extraInfo: T
  ) { }

  speak() {
    console.log(`我叫${this.name}今年${this.age}岁了`)
    console.log(this.extraInfo)
  }
}



// 测试代码1
const p1 = new Person<number>("tom", 30, 250);


// 测试代码2
type JobInfo = {
  title: string;
  company: string;
}

const p2 = new Person<JobInfo>("tom", 30, { title: '研发总监', company: '发发发科技公司' }); 

九、常用类型与语法

1. any

any的含义是：任意类型，一旦将变量类型限制为any，那就意味着放弃了对该变量的类型检查。

// 明确的表示a的类型是 any —— 【显式的any】
let a: any 

// 以下对a的赋值，均无警告
a = 100
a = '你好'
a = false

// 没有明确的表示b的类型是any，但TS主动推断出来b是any —— 隐式的any
let b 

//以下对b的赋值，均无警告
b = 100
b = '你好'
b = false

注意点：any类型的变量，可以赋值给任意类型的变量

/* 注意点：any类型的变量，可以赋值给任意类型的变量 */

let c:any
c = 9

let x: string
x = c // 无警告

2. unknown

unknown的含义是：未知类型。
适用于：起初不确定数据的具体类型，要后期才能确定

unknown可以理解为一个类型安全的any。

// 设置a的类型为unknown

let a: unknown 



//以下对a的赋值，均符合规范

a = 100

a = false

a = '你好'



// 设置x的数据类型为string

let x: string

x = a //警告：不能将类型“unknown”分配给类型“string”

2. unknown会强制开发者在使用之前进行类型检查，从而提供更强的类型安全性。

// 设置a的类型为unknown
let a: unknown
a = 'hello'

//第一种方式：加类型判断
if(typeof a === 'string'){
  x = a 
  console.log(x)
}

//第二种方式：加断言
x = a as string

//第三种方式：加断言
x = <string>a
  

3. 读取any类型数据的任何属性都不会报错，而unknown正好与之相反。

let str1: string
str1 = 'hello'
str1.toUpperCase() //无警告



let str2: any
str2 = 'hello'
str2.toUpperCase() //无警告



let str3: unknown
str3 = 'hello';
str3.toUpperCase() //警告：“str3”的类型为“未知”



// 使用断言强制指定str3的类型为string
(str3 as string).toUpperCase() //无警告

3. never

never的含义是：任何值都不是，即：不能有值，例如undefined、null、‘’、0都不行！

1. 几乎不用never去直接限制变量，因为没有意义，例如：

/* 指定a的类型为never，那就意味着a以后不能存任何的数据了 */
let a: never

// 以下对a的所有赋值都会有警告
a = 1 
a = true
a = undefined
a = null

2. never一般是TypeScript主动推断出来的，例如：

// 指定a的类型为string
let a: string

// 给a设置一个值
a = 'hello'

if (typeof a === 'string') {
  console.log(a.toUpperCase())
} else {
  console.log(a) // TypeScript会推断出此处的a是never，因为没有任何一个值符合此处的逻辑
}

3. never也可用于限制函数的返回值

// 限制throwError函数不需要有任何返回值，任何值都不行，像undeifned、null都不行
function throwError(str: string): never {
  throw new Error('程序异常退出:' + str)
}

4. void

void的含义是空，即：函数不返回任何值，调用者也不应依赖其返回值进行任何操作！

1. void通常用于函数返回值声明

function logMessage(msg:string):void{
  console.log(msg)
}
logMessage('你好')

注意：编码者没有编写return指定函数返回值，所以logMessage函数是没有显式返回值的，但会有一个隐式返回值 ，是undefined，虽然函数返回类型为void，但也是可以接受undefined的，简单记：undefined是void可以接受的一种“空”。

2. 以下写法均符合规范

// 无警告
function logMessage(msg:string):void{
  console.log(msg)
}

// 无警告
function logMessage(msg:string):void{
  console.log(msg)
  return;
}

// 无警告
function logMessage(msg:string):void{
  console.log(msg)
  return undefined
}
  

3. 那限制函数返回值时，是不是undefined和void就没区别呢？—— 有区别。因为还有这句话 ：【返回值类型为void的函数，调用者不应依赖其返回值进行任何操作！】对比下面两段代码：

function logMessage(msg:string):void{
  console.log(msg)
}

let result = logMessage('你好')

if(result){ // 此行报错：无法测试 "void" 类型的表达式的真实性
  console.log('logMessage有返回值')
}

function logMessage(msg:string):undefined{
  console.log(msg)
}

let result = logMessage('你好')

if(result){ // 此行无警告
  console.log('logMessage有返回值')
}

理解 void 与 undefined

· void是一个广泛的概念，用来表达“空”，而 undefined 则是这种“空”的具体实现。
· 因此可以说 undefined是void能接受的一种“空”的状态。
· 也可以理解为：void包含undefined，但void所表达的语义超越了undefined，void是一种意图上的约定，而不仅仅是特定值的限制。

总结：
如果一个函数返回类型为void，那么：

1. 从语法上讲：函数是可以返回undefined的，至于显式返回，还是隐式返回，这无所谓！
2. 从语义上讲：函数调用者不应关心函数返回的值，也不应依赖返回值进行任何操作！即使我们知道它返回了undefined。

5. object

关于object与Object，直接说结论：实际开发中用的相对较少，因为范围太大了。

object（小写）

object（小写）的含义是：所有非原始类型，可存储：对象、函数、数组等，由于限制的范围比较宽泛，在实际开发中使用的相对较少。

let a:object //a的值可以是任何【非原始类型】，包括：对象、函数、数组等

// 以下代码，是将【非原始类型】赋给a，所以均符合要求
a = {}
a = {name:'张三'}
a = [1,3,5,7,9]
a = function(){}
a = new String('123')
class Person {}
a = new Person()



// 以下代码，是将【原始类型】赋给a，有警告
a = 1        // 警告：不能将类型“number”分配给类型“object”
a = true     // 警告：不能将类型“boolean”分配给类型“object”
a = '你好'   // 警告：不能将类型“string”分配给类型“object” 
a = null     // 警告：不能将类型“null”分配给类型“object”
a = undefined // 警告：不能将类型“undefined”分配给类型“object”

Object（大写）

· 官方描述：所有可以调用Object方法的类型。
· 简单记忆：除了undefined和null的任何值。
· 由于限制的范围实在太大了！所以实际开发中使用频率极低。

let b:Object //b的值必须是Object的实例对象（除去undefined和null的任何值）

// 以下代码，均无警告，因为给a赋的值，都是Object的实例对象
b = {}
b = {name:'张三'}
b = [1,3,5,7,9]
b = function(){}
b = new String('123')
class Person {}
b = new Person()

b = 1 // 1不是Object的实例对象，但其包装对象是Object的实例
b = true // truue不是Object的实例对象，但其包装对象是Object的实例
b = '你好'	// “你好”不是Object的实例对象，但其包装对象是Object的实例



// 以下代码均有警告
b = null     // 警告：不能将类型“null”分配给类型“Object”
b = undefined // 警告：不能将类型“undefined”分配给类型“Object”

声明对象类型

1. 实际开发中，限制一般对象，通常使用以下形式

// 限制person1对象必须有name属性，age为可选属性
let person1: { name: string, age?: number }

// 含义同上，也能用分号做分隔
let person2: { name: string; age?: number }

// 含义同上，也能用换行做分隔
let person3: {
  name: string
  age?: number
}

// 如下赋值均可以
person1 = {name:'李四',age:18}
person2 = {name:'张三'}
person3 = {name:'王五'}


// 如下赋值不合法，因为person3的类型限制中，没有对gender属性的说明
person3 = {name:'王五',gender:'男'}

2. 索引签名： 允许定义对象可以具有任意数量的属性，这些属性的键和类型是可变的，常用于：描述类型不确定的属性，（具有动态属性的对象）。

// 限制person对象必须有name属性，可选age属性但值必须是数字，同时可以有任意数量、任意类型的其他属性

let person: {
  name: string
  age?: number
  [key: string]: any // 索引签名，完全可以不用key这个单词，换成其他的也可以
}



// 赋值合法
person = {
  name:'张三',
  age:18,
  gender:'男' 
}

声明函数类型

let count: (a: number, b: number) => number

count = function (x, y) {

return x + y

}

备注：

· TypeScript 中的=>在函数类型声明时表示函数类型，描述其参数类型和返回类型。

· JavaScript 中的=>是一种定义函数的语法，是具体的函数实现。

· 函数类型声明还可以使用：接口、自定义类型等方式，下文中会详细讲解。

声明数组类型

let arr1: string[]

let arr2: Array

arr1 = [‘a’,‘b’,‘c’]

arr2 = [‘hello’,‘world’]

备注：上述代码中的Array属于泛型，下文会详细讲解。

6. tuple

元组(Tuple)是一种特殊的数组类型，可以存储固定数量的元素，并且每个元素的类型是已知的且可以不同。元组用于精确描述一组值的类型，?表示可选元素。

// 第一个元素必须是 string 类型，第二个元素必须是 number 类型。
let arr1: [string,number]

// 第一个元素必须是 number 类型，第二个元素是可选的，如果存在，必须是 boolean 类型。
let arr2: [number,boolean?]

// 第一个元素必须是 number 类型，后面的元素可以是任意数量的 string 类型
let arr3: [number,...string[]]



// 可以赋值
arr1 = ['hello',123]
arr2 = [100,false]
arr2 = [200]
arr3 = [100,'hello','world']
arr3 = [100]


// 不可以赋值，arr1声明时是两个元素，赋值的是三个
arr1 = ['hello',123,false]

7. enum

枚举（enum）可以定义一组命名常量，它能增强代码的可读性，也让代码更好维护。

如下代码的功能是：根据调用walk时传入的不同参数，执行不同的逻辑，存在的问题是调用walk时传参时没有任何提示，编码者很容易写错字符串内容；并且用于判断逻辑的up、down、left、right是连续且相关的一组值，那此时就特别适合使用 枚举（enum）。

function walk(str:string) {
  if (str === 'up') {
    console.log("向【上】走");
  } else if (str === 'down') {
    console.log("向【下】走");
  } else if (str === 'left') {
    console.log("向【左】走");
  } else if (str === 'right') {
    console.log("向【右】走");
  } else {
    console.log("未知方向");
  }
}



walk('up')
walk('down')
walk('left')
walk('right')

1. 数字枚举

数字枚举一种最常见的枚举类型，其成员的值会自动递增，且数字枚举还具备反向映射的特点，在下面代码的打印中，不难发现：可以通过值来获取对应的枚举成员名称 。

// 定义一个描述【上下左右】方向的枚举Direction

enum Direction {
  Up,
  Down,
  Left,
  Right
}
console.log(Direction) 

// 打印Direction会看到如下内容
/* 
  {
    0:'Up', 
    1:'Down', 
    2:'Left', 
    3:'Right', 
    Up:0, 
    Down:1, 
    Left:2,
    Right:3
  } 
*/

// 反向映射
console.log(Direction.Up)
console.log(Direction[0])

// 此行代码报错，枚举中的属性是只读的
Direction.Up = 'shang'

也可以指定枚举成员的初始值，其后的成员值会自动递增。

enum Direction {
  Up = 6,
  Down,
  Left,
  Right
}


console.log(Direction.Up); // 输出: 6
console.log(Direction.Down); // 输出: 7

使用数字枚举完成刚才walk函数中的逻辑，此时我们发现： 代码更加直观易读，而且类型安全，同时也更易于维护。

enum Direction {
  Up,
  Down,
  Left,
  Right,
}



function walk(n: Direction) {
  if (n === Direction.Up) {
    console.log("向【上】走");
  } else if (n === Direction.Down) {
    console.log("向【下】走");
  } else if (n === Direction.Left) {
    console.log("向【左】走");
  } else if (n === Direction.Right) {
    console.log("向【右】走");
  } else {
    console.log("未知方向");
  }
}


walk(Direction.Up)
walk(Direction.Down)

2. 字符串枚举

枚举成员的值是字符串

enum Direction {
  Up = "up",
  Down = "down",
  Left = "left",
  Right = "right"
}

let dir: Direction = Direction.Up;

console.log(dir); // 输出: "up"

3. 常量枚举

官方描述：常量枚举是一种特殊枚举类型，它使用const关键字定义，在编译时会被内联，避免生成一些额外的代码。

何为编译时内联？

所谓“内联”其实就是 TypeScript 在编译时，会将枚举成员引用替换为它们的实际值，而不是生成额外的枚举对象。这可以减少生成的 JavaScript 代码量，并提高运行时性能。

使用普通枚举的 TypeScript 代码如下：

enum Directions {
  Up,
  Down,
  Left,
  Right
}

let x = Directions.Up;

编译后生成的 JavaScript 代码量较大 ：

"use strict";

var Directions;

(function (Directions) {
    Directions[Directions["Up"] = 0] = "Up";
    Directions[Directions["Down"] = 1] = "Down";
    Directions[Directions["Left"] = 2] = "Left";
    Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));

let x = Directions.Up;

使用常量枚举的 TypeScript 代码如下：

const enum Directions {
  Up,
  Down,
  Left,
  Right
}

let x = Directions.Up;

编译后生成的 JavaScript 代码量较小：

"use strict";

let x = 0 /* Directions.Up */;