浅尝Typescript（一）01. TypeScript 是什么？什么是typescript 内容 https://

01. TypeScript 是什么？

什么是typescript

内容

www.typescriptlang.org/zh/play?#co…

TypeScript

●TS 官方文档
●TypeScript 是微软开发的开源编程语言， Type + JavaScript（type是类型 => 在 JS 基础之上，为 JS 添加了类型支持）
●简称：TS，是 JavaScript 的超集，

// TS 代码
// 变量age1有有明确的类型。即： number（数值类型）
let age1: number = 18
age1 = '18' // 报错
// --------------------

// javascript代码
// 变量age2 无明确的类型
let age2 = 18
age2 = '18' // 不报错

ts学啥
●javascript中的变量，循环，函数在ts中正常使用，不需要额外学习语法
●学习ts主要是学习：
○类型
○与具体前端开发框架的结合使用

02. 为什么要有typescript

背景：JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）类型错误的例子： var num = 18; num.toLowerCase();
这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率

为什么会这样？

●从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言
○静态类型：编译期做类型检查
○动态类型：执行期做类型检查
●代码编译和代码执行的顺序：1 编译 2 执行
●对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）
●对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）

并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间
体验

●使用 JS：
a在 VSCode 里面写代码
b在浏览器中运行代码 --> 运行时，才会发现错误【晚】
●使用 TS：
a在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】
b在浏览器中运行代码
市场
Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首选编程语言

目前，前端最新的开发技术栈：

1React： TS + Hooks
2Vue： TS + Vue3
○注意： Vue2 对 TS 的支持不好~

03. 安装编译 TS 的工具包

●问题：为什么要安装编译 TS 的工具包?
●回答：Node.js(或者是浏览器)，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行
●安装命令：npm i -g typescript 或者 yarn global add typescript
○typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
○注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript yarn 全局安装：sudo yarn global add typescript
●验证是否安装成功：tsc –v(查看 typescript 的版本)

04. 编译并运行 TS 代码

1创建 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
2将 TS 编译为 JS：在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
3执行 JS 代码：
a在终端中输入命令，node hello.js
b把hello.js引入某个html文件来运行

1 创建 ts 文件 ===> 2 编译 TS ===> 3 执行 JS

●说明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可
●注意：由 TS 编译生成的 JS 文件，代码中就没有类型信息了

注意：
真正在开发过程中，其实不需要自己手动的通过tsc把ts文件转成js文件，这些工作应该交给webpack或者vite来完成

05. 类型注解(重点)

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

示例代码:

let age1 = 18
let age2: number = 18

●说明：代码中的 : number 就是类型注解
●作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
●解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错
●约定了类型之后，代码的提示就会非常的清晰

❌错误演示：

// 错误代码：
let age2: number = '18'
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致

06. TypeScript类型概述

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

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

07. TypeScript原始数据类型

●原始类型：number/string/boolean/null/undefined
●特点：简单，这些类型，完全按照 JS 中类型的名称来书写

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

// 等等...

08.类型推论

问：每个简单的变量都要写类型么？

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

上面的类型说明，是不是都点多余了。

类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型 换句话说：由于类型推论的存在，有些场合下的类型注解可以省略不写

发生类型推论的 2 种常见场景:
1声明变量并初始化时
2决定函数返回值时

示例代码

// 变量 age 的类型被自动推断为：number
let age = 18

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

小结
推荐：能省略类型注解的地方就省略（偷懒，充分利用TS类型推论的能力，提升开发效率）

技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型

09.数组类型

●数组类型的两种写法：

// 写法一: 类型[]
let arr1: number[] = [1, 3, 5]

// 写法二：Array<类型>
let arr2: Array<string> = ['a', 'b', 'c']

推荐使用 number[] 写法

10.联合类型

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

let arr: (number | string)[] = [1, 'a', 3, 'b']

解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

应用场景

// 定义一个变量，类型是number 或者 null
let timer: number | null = null
timer = setInterval(() => {}, 1000)

// 定义一个数组，数组中可以有数字或者字符串
// 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

11.类型别名-type(重要)

格式
定义type 别名 = 类型

使用

type s = string // 定义  
const str1:s = 'abc'
const str2:string = 'abc'

作用
1给类型起别名
2定义了新类型
场景
给复杂类型起别名

// type NewType = string | number  
// let a: NewType = 1 
// let b: NewType = '1'  
// let arr: NewType[] = [1, '1']

type MyArr = (number | string) [] 
const arr:MyArr = [1, '1']

别名可以是任意的合法字符串，一般首字母大写

12.函数-单个定义

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

格式

// 普通函数 
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }  
// 箭头函数 
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

示例

// 函数声明 function add(num1: number, num2: number): number { return num1 + num2 }  

// 箭头函数 const add = (num1: number=10, num2: number=20): number => { return num1 + num2 }

add（1,'1') // 报错

小结
1返回值的类型注解写在()的后边

13.函数-统一定义函数格式

问题
定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘

const add = (a:number,b:number):number =>{ return a + b }

const sub = (a:number,b:number):number =>{ return a - b }

分析
把拥有相同形参和实参的函数当做一个整体，来定义

const add1 : (n1:number,n2:number)=>number  =  (a,b)=>{return a+b }

提炼自定义类型

type Fn = (n1:number,n2:number)=>number  

const add1 : Fn = (a,b)=>{return a+b }

小结
1分别指定参数和返回值的类型
2统一指定函数类型(类型别名来优化，适用于函数表达式)

14.函数返回值是void

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

function greet(name: string): void {   console.log('Hello', name)   // }

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足
●不写return
●写return ，但是后面不接内容
●写return undefined

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

void和undefined的区别
1如果函数没有指定返回值，调用结束之后，值是undefined的
2当不能直接声明返回值是undefined

function add(a:number, b:number): undefined { // 这里的会报错
  console.log(a,b)
}

15.函数-可选参数

使用函数实现某个功能时，参数可以传也可以不传。
例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]
这种情况下，在给函数参数指定类型时，就用到可选参数了
格式
可选参数：在可选参数名的后面添加 ?（问号）

function mySlice(start?: number, end?: number): void {
  console.log('起始索引：', start, '结束索引：', end)
}

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
可选和默认值的区别
相同点：调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值；可选的并一定有值。
注意：它们不能一起使用。优先使用默认值

16.对象类型-单独使用

17.对象类型

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

// 空对象
let person: {} = {}

// 有属性的对象
let person: { name: string } = {
  name: '同学'
}

// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时，使用 `;`（分号）来分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {}
}

// 对象中如果有多个类型，可以换行写：
// 通过换行来分隔多个属性类型，可以去掉 `;`
let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi() {}
}


// 练习
指定学生的类型
姓名
性别
成绩
身高

学习
打游戏

●解释:
a使用 {} 来描述对象结构
b属性采用属性名: 类型的形式
c方法采用方法名(): 返回值类型的形式

使用类型别名

●注意：直接使用 {} 形式为对象添加类型，会降低代码的可读性（不好辨识类型和值）
●推荐：使用类型别名为对象添加类型

// 创建类型别名
type Person = {
  name: string
  sayHi(): void
}

// 使用类型别名作为对象的类型：
let person: Person = {
  name: 'jack',
  sayHi() {}
}

箭头函数形式的方法类型

●方法的类型也可以使用箭头函数形式

{
    greet(name: string):string,
    greet: (name: string) => string
}



type Person = {
  greet: (name: string) => void
  greet(name: string):void
}

let person: Person = {
  greet(name) {
    console.log(name)
  }
}

对象可选属性
对象的属性或方法，也可以是可选的，此时就用到可选属性了
比如，我们在使用 axios({ ... }) 时，如果发送 GET 请求，method 属性就可以省略

可选属性的语法与函数可选参数的语法一致，都使用 ? 来表示

type Config = {
  url: string
  method?: string
}

function myAxios(config: Config) {
  console.log(config)
}

18.接口类型

基本使用

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

●解释：
a使用 interface 关键字来声明接口
b接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
c声明接口后，直接使用接口名称作为变量的类型
d因为每一行只有一个属性类型，因此，属性类型后没有 ;(分号)

interface IPerson {
  name: string
  age: number
  sayHi(): void
}


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

interface vs type

●interface（接口）和 type（类型别名）的对比：
●相同点：都可以给对象指定类型
●不同点:
○接口，只能为对象指定类型
○类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
●推荐：能使用 type 就是用 type

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 为对象类型创建类型别名
type IPerson = {
  name: string
  age: number
  sayHi(): void
}

// 为联合类型创建类型别名
type NumStr = number | string

接口继承

●如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
●比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐

interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }

●更好的方式:

interface IPoint2D { x: number; y: number }
// 继承 Point2D
interface IPoint3D extends IPoint2D {
  z: number
}

●解释：
a使用 extends(继承)关键字实现了接口 IPoint3D 继承 IPoint2D
b继承后，IPoint3D 就有了 IPoint2D 的所有属性和方法(此时，IPoint3D 同时有 x、y、z 三个属性)

19.元组类型

●场景：在地图中，使用经纬度坐标来标记位置信息
●可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型

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

●使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字
●更好的方式：元组 Tuple
●元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型

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

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

20.字面量类型

基本使用
●思考以下代码，两个变量的类型分别是什么?

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

●通过 TS 类型推论机制，可以得到答案：
a变量 str1 的类型为：string
b变量 str2 的类型为：'Hello TS'
●解释:

1str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
2str2 是一个常量(const)，它的值不能变化只能是 'Hello TS'，所以，它的类型为:'Hello TS'

●注意：此处的 'Hello TS'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
●任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用
○字面量：{ name: 'jack' } [] 18 20 'abc' false function() {}

使用模式和场景

●使用模式：字面量类型配合联合类型一起使用
●使用场景：用来表示一组明确的可选值列表
●比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，会有类型提示：
changeDirection('up')

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

21.枚举类型

基本使用

●枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值
●枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个

// 创建枚举
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

●解释:
a使用 enum 关键字定义枚举
b约定枚举名称以大写字母开头
c枚举中的多个值之间通过 ,（逗号）分隔
d定义好枚举后，直接使用枚举名称作为类型注解

数字枚举

●问题：我们把枚举成员作为了函数的实参，它的值是什么呢?
●解释：通过将鼠标移入 Direction.Up，可以看到枚举成员 Up 的值为 0
●注意：枚举成员是有值的，默认为：从 0 开始自增的数值
●我们把，枚举成员的值为数字的枚举，称为：数字枚举
●当然，也可以给枚举中的成员初始化值

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

enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }

字符串枚举

●字符串枚举：枚举成员的值是字符串
●注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

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 = {})

●说明：枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表
●一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效

any 类型

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

let obj: any = { x: 0 }

obj.bar = 100
obj()
const n: number = obj

解释:
●以上操作都不会有任何类型错误提示，即使可能存在错误
●尽可能的避免使用 any 类型，除非临时使用 any 来“避免”书写很长、很复杂的类型
●其他隐式具有 any 类型的情况
a声明变量不提供类型也不提供默认值
b函数参数不加类型
●注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型

类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。比如：

const aLink = document.getElementById('link')

●注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性
●因此，这个类型太宽泛(不具体)，无法操作 href 等 a 标签特有的属性或方法
●解决方式：这种情况下就需要使用类型断言指定更加具体的类型
●使用类型断言：

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

●解释:
a使用 as 关键字实现类型断言
b关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
c通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

另一种语法，使用 <> 语法，这种语法形式不常用，知道即可:

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

若有收获，就点个赞吧

Suggestion (2).gif