【TS简单上手，快速入门教程】————适合零基础

文章目录

• 前言
• 一、类型注解
• 二、类型概述
• • 2.1 原始数据类型
  • 2.2 数组类型
  • 2.3 联合类型
  • 2.4 类型别名
  • 2.5 函数类型
  • 2.6 void类型
  • 2.7 可选参数
  • 2.8 对象类型
  • 2.9 接口类型
  • 2.9.1 接口继承
  • 2.10 元组类型
  • 2.11 类型推论
  • 2.12 字面量类型
  • 2.13 枚举类型
  • 2.14 any类型
  • 2.15 类型断言
  • 2.16 TypeScript泛型
  • 2.17 泛型约束
  • 2.18 泛型约束——多个类型变量
  • 2.19 泛型接口
• 三、TypeScript 与 Vue3
• • 3.1 defineProps 与 TypeScript
  • 3.2 defineEmits 与 TypeScript
  • 3.3 ref 与 TypeScirpt
  • 3.4 computed 与 TypeScript
  • 3.5 事件处理 与 TypeScript
  • 3.6 Template Ref 与 TypeScript
  • 3.7 非空断言
  • 3.8 TypeScript类型声明文件
  • 3.8.1 内置类型声明文件
  • 3.8.2 第三方库类型声明文件
  • 3.8.3 自定义类型声明文件——共享类型
  • 3.8.4 类型声明文件的使用说明
• 总结

---

前言

学习一门语言之前，我们首先肯定要知道我们为什么而学？
JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）。
这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率。
TypeScript 属于静态类型（编译期做类型检查）的编程语言，JavaScript 属于动态类型（执行期做类型检查）的编程语言
对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）
对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）
并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间。

Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首选编程语言

---

一、类型注解

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
JS也有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查
TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

let age: number = 10
let username: string = '刘狄威'

上述代码中，约定变量 age 的类型为 number 类型，username的类型为string类型，约定了什么类型，就只能给变量赋值该类型的值，否则就会报错

约定了类型之后，代码的提示就会非常的清晰

二、类型概述

可以将 TS 中的常用基础类型细分为两类：

• JS 已有类型
  原始数据类型（ number/string/boolean/null/undefined ）
  复杂数据类型（数组，对象，函数等）
• TS 新增类型
  联合类型
  自定义类型（类型别名）
  接口
  元组
  字面量类型
  枚举
  void
  …

2.1 原始数据类型

原始类型：number/string/boolean/null/undefined

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false

2.2 数组类型

ts中数组类型有两种写法

// 写法一（推荐）：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array<string> = ['a', 'b', 'c']

2.3 联合类型

通过联合类型将多个类型组合成一个类型

如果数组中既有 number 类型，又有 string 类型，那么这个数组的类型应该如何写?

  let arr: (number | string)[] = [1, 2, 3, 'abc']
  // 注意事项: | 的优先级较低, 需要用 () 包裹提升优先级
  // 一旦使用联合类型, 说明 arr 中存储的既可能是 number 也可能是 string, 所以会丢失一部分提示信息 (只能提示共有的方法和属性)
  let timerId: number | null = null

| （竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（||）混淆了

2.4 类型别名

使用类型别名给类型起别名，简化类型的使用

当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

// 将一组类型存储到「变量」里, 用 type 来声明这个特殊的「变量」
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

2.5 函数类型

函数的类型实际上指的是： 函数参数 和 返回值 的类型

• 单独指定参数、返回值的类型

  // 函数声明
  // function 函数名(参数1: 参数1类型, 参数2: 参数2类型): 返回值类型 { 函数体 }
   function add(a: number, b: number): number {
     return a + b
   }
  // 函数表达式
   const fn = function(a: number, b: number): number {
     return a + b
   }
  // 箭头函数
  // 注意事项: 以前箭头函数如果只有一个参数, 则可省略小括号, ts不行
  // ts箭头函数必须要有小括号
   const sub = (a: number): number => {
     return a
   }
   const sub = (a: number, b: number): number => {
     return a - b
   }

• 同时指定参数、返回值的类型（函数的类型别名）

type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
    return num1 + num2
}

这种形式只适用于函数表达式

2.6 void类型

如果函数没有返回值，那么，函数返回值类型为： void

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}
// 但如果指定返回值类型为 undefined 时，函数体中必须显式的 return undefined 才可以
const add = (): undefined => {
// 此处，返回的 undefined 是 JS 中的一个值
return undefined
}

2.7 可选参数

使用?给函数指定可选参数类型

  // 注意事项: 必选参数不能在可选参数后(可选参数只能出现在参数列表的最后)
  const print = (name?: string, gender?: string): void => {
    if (name && gender) {
      console.log(name, gender)
    }
  }

2.8 对象类型

JS 中的对象是由属性和方法构成的，而 TS 对象的类型就是在描述对象的结构（有什么类型的属性和方法）

let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi(content: string) {}
}

也可以用类型别名进行简化

  type Person = {
    name: string,
    age: number,
    girlFriend?: string, // ? 表示可选属性
    // sayHi: (content: string) => void
    sayHi(content: string): void
  }

  // ts 就像在写注释, 以前写的注释是给程序员看的, ts 写的类型是给编辑器看的, 程序员也可以看
  let obj1: Person = {
    name: 'james',
    age: 39,
    sayHi(content) {
      console.log(content)
    }
  }

2.9 接口类型

当一个对象类型被多次使用时，一般会使用接口（ interface ）来描述对象的类型，达到复用的目的

interface IPerson {
  name: string
  age: number
  sayHi(): void
}
let person: IPerson = {
  name: 'jack',
  age: 19,
  sayHi() {}
}

interface（接口）和 type（类型别名）的对比：

• 相同点：都可以给对象指定类型
• 不同点:
  接口只能为对象指定类型
  类型别名不仅可以为对象指定类型，实际上可以为任意类型指定别名

推荐：能使用 type 就是用 type

2.9.1 接口继承

接口继承: 可以实现一个接口使用另一个接口的类型约束, 实现接口的复用

  interface IPerson {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }
  // 接口继承: IStudent 具备 IPerson 的所有约束规则
  interface IStudent extends IPerson {
    score: number
    sleep: () => void
  }

  const s1: IStudent = {
    username: 'james',
    age: 19,
    gender: '男',
    sayHi() {
      console.log('詹姆斯')
    },
    score: 59,
    sleep() {
      console.log('詹姆斯正在睡觉...')
    },
  }

使用type也能实现类似继承的效果

// 使用 type 实现和 interface 类似继承的效果
  type Person = {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }

  // & 与连接符: 既要满足前面的也要满足后面的
  // | 或连接符: 满足其中一个即可
  type Student = {
    score: number
    sleep: () => void
  } & Person
  
  const s2: Student = {
    username: 'james',
    age: 28,
    gender: '未知',
    sayHi() {
      console.log('hello!')
    },
    score: 80,
    sleep() {
      console.log('我在睡觉')
    },
  }

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

2.10 元组类型

元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型

let position: [number, number] = [39.5427, 116.2317]

• 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
• 该示例中，元素有两个元素，每个元素的类型都是 number

使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字

2.11 类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型

// 变量 age 的类型被自动推断为：number
let age = 18
// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number): number {
return num1 + num2
}

发生类型推论的 2 种常见场景:

1. 声明变量并初始化时
2. 决定函数返回值时

2.12 字面量类型

let str1 = 'Hello TS'
const str2 = 'Hello TS'

通过 TS 类型推论机制:

1. 变量 str1 的类型为：string
2. 变量 str2 的类型为：‘Hello TS’

此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，会有类型提示：
changeDirection('up')

• 解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
• 优势：相比于 string 类型，使用字面量类型更加精确、严谨

字面量类型就是把字面量当做类型来用

2.13 枚举类型

枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个

// 创建枚举
enum Direction { Up, Down, Left, Right }
// 使用枚举类型
function changeDirection(direction: Direction) {
    console.log(direction)
}
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

• 数字枚举：默认为从 0 开始自增的数值

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

• 字符串枚举：字符串枚举的每个成员必须有初始值（没有自增长行为）

enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

• 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
  因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
  也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码

enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}
// 会被编译为以下 JS 代码：
var Direction;
(function (Direction) {
	Direction['Up'] = 'UP'
	Direction['Down'] = 'DOWN'
	Direction['Left'] = 'LEFT'
	Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})

2.14 any类型

这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示

• 其他隐式具有 any 类型的情况

1. 声明变量不提供类型也不提供默认值
2. 函数参数不加类型

注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型

  function fn(a, b) {}
  let b

2.15 类型断言

使用类型断言来指定更具体的类型

const aLink = document.getElementById('link')

• 该方法返回值的类型是 HTMLElement，此类型只包含所有标签公共的属性或方法，不包含 a
  标签特有的 href 等属性，导致无法操作 href 等 a 标签特有的属性或方法（这种情况下就需要使用类型断言指定更加具体的类型）

const aLink = document.getElementById('link') as HTMLAnchorElement

• 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）

// 此语法不常用，知道即可：
const aLink = <HTMLAnchorElement>document.getElementById('link')

2.16 TypeScript泛型

• 泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用
• 在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一

//定义泛型函数
function id<Type>(value: Type): Type { return value }
function id<T>(value: T): T { return value }

• 该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)

// 调用泛型函数
const num = id<number>(10)
const str = id<string>('a')

实现了复用的同时保证了类型安全

泛型函数的调用可简化=>省略 <类型> 来简化泛型函数的调用，利用TS内部的类型参数推断

// 省略 <number> 调用函数
let num = id(10)
let str = id('a')

当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数

2.17 泛型约束

为什么需要泛型约束呢，举例一个场景：

function id<Type>(value: Type): Type {
	console.log(value.length)
	return value
}
id(2)

• Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length

此时，就需要为泛型添加约束来收缩类型 (缩窄类型取值范围)
添加泛型约束收缩类型，主要有以下两种方式：1 .指定更加具体的类型 2. 添加约束

1. 指定更加具体的类型

function id<Type>(value: Type[]): Type[] {
	console.log(value.length)
	return value
}

将类型修改为 Type[] (Type 类型的数组)，只要是数组就一定存在 length 属性

2. 添加约束

// 创建一个接口
interface ILength { length: number }
// Type extends ILength 添加泛型约束
// 解释：表示传入的类型必须满足 ILength 接口的要求才行，也就是得有一个 number 类型的 length 属性
function id<Type extends ILength>(value: Type): Type {
	console.log(value.length)
	return value
}

• 创建描述约束的接口 ILength，该接口要求提供 length 属性
• 通过 extends 关键字使用该接口，为泛型(类型变量)添加约束
• 该约束表示：传入的类型必须具有 length 属性
  此方法，传入的实参(比如，数组)只要有 length 属性即可（类型兼容性)

2.18 泛型约束——多个类型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)
比如，创建一个函数来获取对象中属性的值：

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
	return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')

1. 两个类型变量之间的使用，用逗号分隔。
2. keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
3. 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是： ‘name’ | ‘age’
4. 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性

function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key)
{
	return obj[key]
}

2.19 泛型接口

泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性

interface IdFunc<Type> {
	id: (value: Type) => Type
	ids: () => Type[]
}
let obj: IdFunc<number> = {
	id(value) { return value },
	ids() { return [1, 3, 5] }
}

在接口名称的后面添加 <类型变量> ，那么这个接口就变成了泛型接口。

三、TypeScript 与 Vue3

vue3配合ts中，还需要额外安装一个vscode插件：Typescript Vue Plugin TypeScript 与组合式 API

3.1 defineProps 与 TypeScript

• defineProps配合vue3默认语法进行类型校验：

defineProps({
	money: {
		type: Number,
		required: true	
},
	car: {
		type: String,
		required: true
}
})

• defineProps配合ts的泛型，定义props类型校验

// 使用ts的泛型指定props类型
defineProps<{
	money: number
	car?: string
}>()

// 赋予默认值
interface Props {
  value: boolean;
}
const props = withDefaults(defineProps<Props>(), { value: false });

3.2 defineEmits 与 TypeScript

• defineEmits配合运行时声明

const emit = defineEmits(['change', 'update'])

• defineEmits配合ts类型声明

const emit = defineEmits<{
	(e: 'changeMoney', money: number): void
	(e: 'changeCar', car: string): void
}>()

3.3 ref 与 TypeScirpt

// 简单值 类型可忽略
const money = ref<number>(10)
const money = ref(10)

// 复杂类型 推荐指定泛型
type Todo = {
	id: number
	name: string
	done: boolean
}
const list = ref<Todo[]>([])

3.4 computed 与 TypeScript

const leftCount = computed<number>(() => {
	return list.value.filter((item) => item.done).length
})

3.5 事件处理 与 TypeScript

const move = (e: MouseEvent) => {
	mouse.value.x = e.pageX
	mouse.value.y = e.pageY
}
<h1 @mousemove="move($event)">根组件</h1>

3.6 Template Ref 与 TypeScript

const imgRef = ref<HTMLImageElement | null>(null)
onMounted(() => {
	console.log(imgRef.value?.src)
})

如何查看一个DOM对象的类型：通过控制台进行查看

document.createElement('img').__proto__

3.7 非空断言

如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !
注意：非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug

// 告诉typescript, 明确的指定obj不可能为空
let nestedProp = obj!.second;

3.8 TypeScript类型声明文件

• 类型声明文件：用来为已存在的 JS 库提供类型信息
  TS 中有两种文件类型：1 .ts 文件 2 .d.ts 文件
• .ts 文件:

1. 既包含类型信息又可执行代码
2. 可以被编译为 .js 文件，然后执行代码
3. 用途：编写程序代码的地方

• .d.ts 文件:

1. 只包含类型信息的类型声明文件
2. 不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型
3. 用途：为 JS 提供类型信息
   总结：.ts 是 implementation (代码实现文件)；.d.ts 是 declaration(类型声明文件)
   如果要为 JS 库提供类型信息，要使用 .d.ts 文件

3.8.1 内置类型声明文件

• TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件
  比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:

const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach

比如，查看(ctrl+鼠标左键) forEach 方法的类型声明，在 VSCode 中会自动跳转到 lib.es5.d.ts 类型声明文件中
当然，像 window、document 等 BOM、DOM API 也都有相应的类型声明( lib.dom.d.ts )

3.8.2 第三方库类型声明文件

第三方库的类型声明文件有两种存在形式:

1. 库自带类型声明文件
   这种情况下，正常导入该库（举例axios=>查看 node_modules/axios 目录），TS 就会自动加载库自己的类型声明文件，以提供该库的类型声明。

2. 由 DefinitelyTyped 提供 => 提供 TypeScript 类型定义文件（.d.ts 文件）用于流行的 JavaScript 库和框架。它的目的是为那些原本没有内置 TypeScript 支持的 JavaScript 库提供类型定义，以便开发者在使用这些库时能够享受到 TypeScript 的类型检查和智能提示功能。

可以通过npm/yarn来下载该仓库提供的 TS 类型声明包，这些包的名称格式为: @types/*，比如，@types/react、@types/lodash 等
当安装 @types/* 类型声明包后，TS 也会自动加载该类声明包，以提供该库的类型声明。 查询 @types/* 库

3.8.3 自定义类型声明文件——共享类型

项目内共享类型

如果多个 .ts 文件中都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型共享。
操作步骤:

1. 创建 index.d.ts 类型声明文件。
2. 创建需要共享的类型，并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化
   功能)。
3. 在需要使用共享类型的 .ts 文件中，通过 import 导入即可(.d.ts 后缀导入时，直接省略)。

自定义类型声明文件为js提供声明。

为已有js 文件提供类型声明

1. 在将 JS 项目迁移到 TS 项目时，为了让已有的 .js 文件有类型声明。（整个项目从js升级到ts不太可能，工程太庞大了，但是可以为已有js文件添加类型声明，这样在ts中使用时，也有类型提示）
2. 成为库作者，创建库给其他人使用。

3.8.4 类型声明文件的使用说明

• TS 项目中也可以使用 .js 文件。
• 在导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。（如果 .js 文件和 .d.ts 文件在同一文件夹下，TypeScript 会自动关联它们。 如果将 .d.ts 文件放在不同的文件夹中，也可以通过配置 tsconfig.json 文件中的 typeRoots 或 paths 选项来实现。）
• declare 关键字:用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量。

1. 对于 type、interface 等这些明确就是 TS 类型的(只能在 TS 中使用的)，可以省略 declare 关键字。
2. 对于 let、function 等具有双重含义(在 JS、TS 中都能用)，应该使用 declare 关键字，明确指定此处用于类型声明。

let count = 10
let songName = '痴心绝对'
let position = {
	x: 0,
	y: 0
}
function add(x, y) {
	return x + y
}
function changeDirection(direction) {
	console.log(direction)
}
const fomartPoint = point => {
	console.log('当前坐标：', point)
}
export { count, songName, position, add, changeDirection, fomartPoint }

为以上js文件提供类型声明文件

declare let count:number
declare let songName: string
interface Position {
	x: number,
	y: number
}
declare let position: Position
declare function add (x :number, y: number) : number
type Direction = 'left' | 'right' | 'top' | 'bottom'
declare function changeDirection (direction: Direction): void
type FomartPoint = (point: Position) => void
declare const fomartPoint: FomartPoint
// TypeScript 通过 export 关键字了解哪些类型声明应该暴露给外部使用，从而在其他模块中提供类型检查和代码提示。
export {
count, songName, position, add, changeDirection, FomartPoint, fomartPoint
} 

---

总结

• 一、类型注解
  TypeScript 是 JavaScript 的超集，增加了类型系统。通过类型注解，可以避免意外的类型错误，提高代码的可读性和维护性。

• 二、类型概述
  文章详细介绍了 TypeScript 中的各种类型，包括基础类型（如 number、string）、数组类型、联合类型、类型别名、函数类型、void 类型、可选参数、对象类型、接口类型、元组类型、类型推论、字面量类型、枚举类型、any 类型、类型断言和泛型。

• 三、TypeScript 与 Vue3
  文章最后介绍了如何在 Vue 3 中使用 TypeScript，包括 defineProps、defineEmits、ref、computed、事件处理、Template Ref、非空断言和类型声明文件等内容。