TypeScript语法

• 在前面我们提到过，TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：

• 我们需要在电脑上安装TypeScript，这样就可以通过TypeScript的Compiler将其编译成JavaScript；

• 所以，我们需要先可以先进行全局的安装：

安装命令

npm install typescript -g

查看版本

tsc --version

TypeScript的运行环境

• 如果我们每次为了查看TypeScript代码的运行效果，都通过经过两个步骤的话就太繁琐了：

• 第一步：通过tsc编译TypeScript到JavaScript代码；

• 第二步：在浏览器或者Node环境下运行JavaScript代码；

• 是否可以简化这样的步骤呢？

• 比如编写了TypeScript之后可以直接运行在浏览器上？

• 比如编写了TypeScript之后，直接通过node的命令来执行？

• 上面我提到的两种方式，可以通过两个解决方案来完成：

• 方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上；

• 方式二：通过ts-node库，为TypeScript的运行提供执行环境；

• 方式一：webpack配置

• 方式一在之前的TypeScript文章中我已经有写过，如果需要可以自行查看对应的文章；

https://mp.weixin.qq.com/s/wnL1l-ERjTDykWM76l4Ajw；

• 方式二：安装ts-node

• 另外ts-node需要依赖 tslib 和 @types/node 两个包：

• 现在，我们可以直接通过 ts-node 来运行TypeScript的代码：

• 使用ts-node

npm install ts-node -g

npm install tslib @types/node -g

ts-node math.ts

变量的声明

• 我们已经强调过很多次，在TypeScript中定义变量需要指定 标识符 的类型。

• 所以完整的声明格式如下：

• 声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解；

var/let/const 标识符: 数据类型 = 赋值;

• 比如我们声明一个message，完整的写法如下：

let message: string = ‘Hello World’

• 注意：这里的string是小写的，和String是有区别的

string是TypeScript中定义的字符串类型，String是ECMAScript中定义的一个类

• 如果我们给message赋值其他类型的值，那么就会报错

声明变量的关键字

• 在TypeScript定义变量（标识符）和ES6之后一致，可以使用var、let、const来定义。

• 当然，在tslint中并不推荐使用var来声明变量：

• 可见，在TypeScript中并不建议再使用var关键字了，主要原因和ES6升级后let和var的区别是一样的，var是没有块级作用域的，会引起很多的问题，这里不再展开探讨。

var name: string = ‘tom’

let age: number = 18

const height: number = 1.88

// string: TypeScript 中的字符串类型

// String: JavaScript 的字符串包装类型

const message: String = ‘Hello World’

export {}

变量的类型推导（推断）

// 默认情况想进行赋值时，会将赋值的值的类型，作为前面标识符的类型

// 这个过程称之为类型推到/推断

// foo 没有添加类型注解

let foo = ‘foo’

foo = 123 // 类型推断

在开发中，有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型，我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型

如果我们给message赋值123：

这是因为在一个变量第一次赋值时，会根据后面的赋值内容的类型，来推断出变量的类型：

上面的message就是因为后面赋值的是一个string类型，所以message虽然没有明确的说明，但是依然是一个string类型；

数据类型

JavaScript类型

number类型

数字类型是我们开发中经常使用的类型，TypeScript和JavaScript一样，不区分整数类型（int）和浮点型（double），统一为number类型。

如果你学习过ES6应该知道，ES6新增了二进制和八进制的表示方法，而TypeScript也是支持二进制、八进制、十六进制的表示：

let num1: number = 100 // 十进制

let num2: number = 0b100 // 二级制

let num3: number = 0o100 // 八进制

let num4: number = 0x100 // 十六进制

console.log(num1, num2, num3, num4) // 100 4 64 256

boolean类型

boolean类型只有两个取值：true和false

let flag: boolean = true

flag = 10 > 30

string 类型

string类型是字符串类型，可以使用单引号或者双引号表示

同时也支持ES6的模板字符串来拼接变量和字符串

let message1: string = ‘hello world’

let message2:string = “Hello World”

const name = ‘why’

const age = 18

const height = 1.88

let message3 = name:${name} age:${age} height:${height}

console.log(message3)

Array类型

数组类型的定义也非常简单，有两种方式

如果添加其他类型到数组中，那么会报错

// 确定一个事实：names 是一个数组类型，但是数组中存放的是是什么类型的元素呢

// 不好的习惯：一个数组在TypeScript开发中，最好存放的数据类型是固定的(string)

// 类型注解：type annotation

const names1: Array = [] // 不推荐(react jsx 中有冲突)

const names2: string[] = [] // 推荐

// 在数组中存放不同的类型是不好的习惯

// names.push(‘abc’)

// names.push(123) // 报错

Object类型

const info: object = {

name: ‘why’,

age: 18

}

info[‘name’] = ‘coderwhy’

console.log(info[‘age’])

object对象类型可以用于描述一个对象

但是从myinfo中我们不能获取数据，也不能设置数据

Symbol类型

在ES5中，如果我们是不可以在对象中添加相同的属性名称的，比如下面的做法

const info = {

title: ‘程序员’,

title: ‘老师’ // 报错

}

通常我们的做法是定义两个不同的属性名字：比如title1和title2

但是我们也可以通过symbol来定义相同的名称，因为Symbol函数返回的是不同的值

const title1 = Symbol(‘title1’)

const title2 = Symbol(‘title2’)

const info = {

}

null和undefined类型

const n1: null = null

const n2: undefined = undefined

在 JavaScript 中，undefined 和 null 是两个基本数据类型。

在TypeScript中，它们各自的类型也是undefined和null，也就意味着它们既是实际的值，也是自己的类型

TypeScript类型

any 类型

在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型（类似于Dart语言中的dynamic类型）。

any类型有点像一种讨巧的TypeScript手段：

我们可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法

我们给一个any类型的变量赋值任何的值，比如数字、字符串的值；

如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候我们可以使用any

包括在Vue源码中，也会使用到any来进行某些类型的适配

// 当进行一些类型断言 as any

// 在不想给某些 javascript 添加具体的数据类型时（原生的Javascript代码是一样）

let message: any = ‘Hello World’

message = 123

message = true

message = {}

function foo(payload: any) {}

console.log(message)

unknown类型

unknown是TypeScript中比较特殊的一种类型，它用于描述类型不确定的变量。

function foo() {

return ‘abc’

}

function bar() {

return 123

}

// unknow 类型只能复制给 any 和 unknow 类型

// any 类型可以赋值给任意类型

const flag = true

let result: unknown

if (flag) {

result = foo()

} else {

result = bar()

}

console.log(result)

void类型

function sum(num1: number, num2: number): void {

console.log(num1 + num2)

}

sum(20, 30)

• void通常用来指定一个函数是没有返回值的，那么它的返回值就是void类型：

• 我们可以将null和undefined赋值给void类型，也就是函数可以返回null或者undefined

• 这个函数我们没有写任何类型，那么它默认返回值的类型就是void的，我们也可以显示的来指定返回值是void：

never类型

never 表示永远不会发生值的类型，比如一个函数：

• 如果一个函数中是一个死循环或者抛出一个异常，那么这个函数会返回东西吗？

• 不会，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型；

function foo(): never {

// 死循环

while (true) {}

}

function bar(): never {

throw new Error()

}

// 知乎：never 到底应用在什么场景？

function handleMessage(message: string | number | boolean) {

switch (typeof message) {

case ‘string’:

console.log(‘string处理方式处理message’)

break

case ‘number’:

console.log(‘number处理方式处理message’)

break

case ‘boolean’:

console.log(‘boolean处理方式处理boolean’)

break

default:

const check: never = message // 报错

}

}

handleMessage(‘abc’)

handleMessage(123)

// 张三

handleMessage(true)

tuple类型

tuple是元组类型，很多语言中也有这种数据类型，比如Python、Swift等。

• 那么tuple和数组有什么区别呢？

• 首先，数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）

• 其次，元组中每个元素都有自己特性的类型，根据索引值获取到的值可以确定对应的类型；

// tuple 元组：多种元素的组合

// ‘why’ 18 1.88

// 1.素组的弊端

// const info: any[] = [‘why’, 18, 1.88]

// const name = info[0]

// console.log(name.length)

// 冗余

// const infoObj = {

// name: ‘why’,

// age: 18,

// height: 1.88

// }

// 2. 元组的特点

const info: [string, number, number] = [‘why’, 18, 1.88]

const name = info[0]

console.log(name.length)

const age = info[1]

console.log(age.length) // 报错

• 那么tuple在什么地方使用的是最多的呢？

• tuple通常可以作为返回的值，在使用的时候会非常的方便

// hook: useState

// const [counter, setCounter] = useState(10)

function useState(state: T) {

// T 泛型

let currentState = state

const changeState = (newState: T) => {

currentState = newState

}

// const arr: any[] = [currentState, changeState]

// return arr

const tupple: [T, (newState: T) => void] = [currentState, changeState]

return tupple

}

const [

counter, // number

setCounter // (newState: number) => void

] = useState(10)

setCounter(1000)

const [

title, // string

setTitle // (newState: string) => void

] = useState(‘abc’)

const [

flag, // boolean

setFlag // (newState: boolean) => void

] = useState(true)

其他

函数的参数类型

• 函数是JavaScript非常重要的组成部分，TypeScript允许我们指定函数的参数和返回值的类型。

• 参数的类型注解

• 声明函数时，可以在每个参数后添加类型注解，以声明函数接受的参数类型

// 给参数加上类型注解：num1: number, num2: number

// 给返回值加上注解：():number

// 在开发中，通常情况下可以不写返回值的类型（自动推导）

function sum(num1: number, num2: number) {

return num1 + num2

}

sum(10, 20)

函数的返回值类型

• 我们也可以添加返回值的类型注解，这个注解出现在函数列表的后面

• 和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推断函数的返回类型：

• 某些第三方库处于方便理解，会明确指定返回类型，但是这个看个人喜好；

匿名函数的参数

• 匿名函数与函数声明会有一些不同：

• 当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时；

• 该函数的参数会自动指定类型；

• 我们并没有指定item的类型，但是item是一个string类型：

• 这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型；

• 这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型；

// 通常情况下，再定义一个函数时，都会给参数加上类型注解的

function foo(message: string) {}

const names = [‘abc’, ‘cba’, ‘nba’]

// 根据上下文环境推导出来的，这个时候可以不添加类型注解

// 上下文中的函数，可以不添加类型注解

names.forEach(function (item) {

console.log(item.split(‘’))

})

对象类型

• 如果我们希望限定一个函数接受的参数是一个对象，这个时候要如何限定呢？

• 我们可以使用对象类型；

• 在这里我们使用了一个对象来作为类型：

• 在对象我们可以添加属性，并且告知TypeScript该属性需要是什么类型；

• 属性之间可以使用 , 或者 ; 来分割，最后一个分隔符是可选的；

• 每个属性的类型部分也是可选的，如果不指定，那么就是any类型；

// Point: x/y -> 对象类型

// function printPoint(point:{x:number, y:number}) {

function printPoint(point: { x: number; y: number }) {

console.log(point.x)

console.log(point.y)

}

// printPoint(‘123’) //报错

// printPoint({ x: ‘123’, y: ‘123’ }) // 报错

printPoint({ x: 123, y: 321 })

可选类型

• 对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个?

// Point: x/y/z -> 对象类型

// {x:number, y:number, z?:number}

function printPoint(point: { x: number; y: number; z?: number }) {

console.log(point.x)

console.log(point.y)

console.log(point.z)

}

printPoint({ x: 123, y: 321 }) // 123 321 undefined

printPoint({ x: 123, y: 321, z: 111 }) // // 123 321 111

联合类型

• TypeScript的类型系统允许我们使用多种运算符，从现有类型中构建新类型。

• 我们来使用第一种组合类型的方法：联合类型（Union Type）

• 联合类型是由两个或者多个其他类型组成的类型；

• 表示可以是这些类型中的任何一个值；

• 联合类型中的每一个类型被称之为联合成员（union’s members）

// number | string 联合类型

function printID(id: number | string) {

// 使用联合类型时，需要特别小型

// narrow： 缩小

if (typeof id === ‘string’) {

// TypeScript 帮助确定 id 一定是 string 类型

console.log(id.toUpperCase())

} else {

console.log(id)

}

}

printID(123)

printID(‘abc’)

• 使用联合类型

• 传入给一个联合类型的值是非常简单的：只要保证是联合类型中的某一个类型的值即可

• 但是我们拿到这个值之后，我们应该如何使用它呢？因为它可能是任何一种类型。

• 比如我们拿到的值可能是string或者number，我们就不能对其调用string上的一些方法；

• 那么我们怎么处理这样的问题呢？

• 我们需要使用缩小（narrow）联合（后续我们还会专门讲解缩小相关的功能）；

• TypeScript可以根据我们缩小的代码结构，推断出更加具体的类型

// 让一个参数本身是可选的

// 一个参数是一个可选类型的时候，它类似于是这个参数是 类型|undefined 的联合类型

// function foo(message?: string) {

// console.log(message)

// }

function foo(message: string | undefined) {

console.log(message)

}

// foo()

foo(undefined)

foo(‘123’)

类型别名

• 在前面，我们通过在类型注解中编写 对象类型 和 联合类型，但是当我们想要多次在其他地方使用时，就要编写多次。

• 比如我们可以给对象类型起一个别名

// type 用于定义类型别名 (type alias)

type IDType = string | number | boolean

type PointType = {

x: number

y: number

z?: number

}

function printId(id: IDType) {}

function printPoint(point: PointType) {}

类型断言as

• 有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions）。

• 比如我们通过 document.getElementById，TypeScript只知道该函数会返回 HTMLElement ，但并不知道它具体的类型：

• TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本，此规则可防止不可能的强制转换

//

// const el: HTMLElement = document.getElementById(‘why’)

// 1.类型断言

const el = document.getElementById(‘why’) as HTMLImageElement

el.src = ‘url地址’

// el.classList

// 2.另外案例：Person是Student的父类

class Person {}

class Student extends Person {

studying() {}

}

function sayHello(p: Person) {

;(p as Student).studying()

}

const stu = new Student()

sayHello(stu)

// 3. 了解：as any/unkown 不推荐

const message = ‘Hello World’

const num1: number = message as any as number

const num2: number = message as unknown as number

非空类型断言!

• 当我们编写下面的代码时，在执行ts的编译阶段会报错：

• 这是因为传入的message有可能是为undefined的，这个时候是不能执行方法的；

• 但是，我们确定传入的参数是有值的，这个时候我们可以使用非空类型断言：

• 非空断言使用的是 ! ，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测；

// message? -> undefined | string

function pringMessage(message?: string) {

// if (message) {

// console.log(message.length)

// }

// vue3 源码 proxy!

console.log(message!.length)

}

pringMessage(‘Hello World’)

pringMessage(‘哈哈哈哈哈’)

pringMessage()

可选链的使用

• 可选链事实上并不是TypeScript独有的特性，它是ES11（ES2020）中增加的特性：

• 可选链使用可选链操作符 ?.；

• 它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行；

• 虽然可选链操作是ECMAScript提出的特性，但是和TypeScript一起使用更版本；

type Person = {

name: string

friend?: {

name: string

age?: number

girlFriend?: {

name: string

age?: number

}

}

}

const info: Person = {

name: ‘why’

// friend: {

// name: ‘kobe’

// }

}

// 另外一个文件中

console.log(info.name)

// console.log(info.friend!.name)

// if (info.friend) {

// console.log(info.friend.name)

// }

console.log(info.friend?.name) // 可选链

console.log(info.friend?.age)

console.log(info.friend?.girlFriend?.name)

// why

// undefined

// undefined

// undefined

??和!!的作用

!!操作符：

• 将一个其他类型转换成boolean类型；

• 类似于Boolean(变量)的方式；

const message = ‘Hello World’

// const flag = Boolean(message)

// console.log(flag)

const flag = !!message

console.log(flag)

??操作符：

• 它是ES11增加的新特性；

• 空值合并操作符（??）是一个逻辑操作符，当操作符的左侧是 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数；

// let message: string|null = null

let message: string | null = ‘Hello World’

// const content = message ? message : ‘你好啊，李银河’

const content = message ?? ‘你好啊，李银河’

console.log(content)

字面量类型

• 除了前面我们所讲过的类型之外，也可以使用字面量类型（literal types）：

• 那么这样做有什么意义呢？

• 默认情况下这么做是没有太大的意义的，但是我们可以将多个类型联合在一起；

// “Hello World” 也是可以作为类型的，叫做字面量类型

const message: ‘Hello World’ = ‘Hello World’

let num: 123 = 123

// num = 321 // 不可以，字面量类型的类型和值必须一致

// 字面量类型的意义，就是必须结合联合类型

type Alignment = ‘left’ | ‘right’ | ‘center’

let align: Alignment = ‘left’

align = ‘left’

align = ‘right’

align = ‘right’

// align = ‘hhhh’ // 报错

字面量推理

• 我们来看下面的代码：

• 这是因为我们的对象再进行字面量推理的时候，info其实是一个 {url: string, method: string}，所以我们没办法将一个 string 赋值给一个 字面量 类型。

// const info = {

// name: ‘why’,

// age: 18

// }

// info.name = ‘kobe’

type Method = ‘GET’ | ‘POST’

type Request = {

url: string

method: Method

}

function request(url: string, method: Method) {}

// const options: Request = {

// url: ‘http://www.coderwhy.org/abc’,

// method: ‘POST’ // 类型推导，推导出来 options.method 是 string 类型

// }

// options.method = ‘123’ // 安全隐患

// request(options.url, options.method) // 第二个参数报错

// const options = {

// url: ‘http://www.coderwhy.org/abc’,

// method: ‘POST’ // 类型推导，推导出来 options.method 是 string 类型

// }

// request(options.url, options.method as Method) // 使用类型断言

const options = {

url: ‘http://www.coderwhy.org/abc’,

method: ‘POST’ // 类型推导，推导出来 options.method 是 string 类型

} as const

request(options.url, options.method)

类型缩小

什么是类型缩小呢？

• 类型缩小的英文是 Type Narrowing；

• 我们可以通过类似于 typeof padding === “number” 的判断语句，来改变TypeScript的执行路径；

• 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小;

• 而我们编写的 typeof padding === "number 可以称之为 类型保护（type guards）；

常见的类型保护有如下几种：

• typeof

• 平等缩小（比如===、!==） pinstanceof

• in

• 等等…

typeof

• 在 TypeScript 中，检查返回的值typeof是一种类型保护：因为 TypeScript 对如何typeof操作不同的值进行编码。

平等缩小

• 我们可以使用Switch或者相等的一些运算符来表达相等性（比如===, !==, ==, and != ）

instanceof

• JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”

in

• Javascript 有一个运算符，用于确定对象是否具有带名称的属性：in运算符

• 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true；

// 1. typeof 的类型缩小

type IDType = number | string

function printID(id: IDType) {

if (typeof id === ‘string’) {

console.log(id.toUpperCase())

} else {

console.log(id)

}

}

// 2. 平等的类型缩小 （=== == !== !=/switch）

type Direction = ‘left’ | ‘right’ | ‘top’ | ‘bottom’

function printDirection(direction: Direction) {

// 1. if 判断

// if (direction === ‘left’) {

// console.log(direction)

// } else if() {}

// 2. switch 判断

// switch(direction) {

// case ‘left’:

// console.log(direction);

// break

// case …

// }

}

// 3. instanceof

function printTime(time: string | Date) {

if (time instanceof Date) {

console.log(time.toUTCString())

} else {

console.log(time)

}

}

class Student {

studying() {}

}

class Teacher {

teaching() {}

}

function work(p: Student | Teacher) {

if (p instanceof Student) {

p.studying()

} else {

p.teaching()

}

}

// 4. in

type Fish = {

swimming: () => void

}

type Dog = {

running: () => void

}

function walk(animal: Fish | Dog) {

if (‘swimming’ in animal) {

animal.swimming()

} else {

animal.running()

}

}

const fish = {

swimming() {

console.log(‘swimming’)

}

}

TypeScript函数类型

• 在JavaScript开发中，函数是重要的组成部分，并且函数可以作为一等公民（可以作为参数，也可以作为返回值进行传递）。

• 那么在使用函数的过程中，函数是否也可以有自己的类型呢？

• 我们可以编写函数类型的表达式（Function Type Expressions），来表示函数类型

function calc(

n1: number,

n2: number,

fn: (num1: number, num2: number) => number

) {

return fn(n1, n2)

}

const result1 = calc(20, 30, function (a1, a2) {

return a1 + a2

})

console.log(result1) // 50

const result2 = calc(20, 30, function (a1, a2) {

return a1 * a2

})

console.log(result2) // 600

TypeScript函数类型解析

• 在上面的语法中 (num1: number, num2: number) => void，代表的就是一个函数类型：

• 接收两个参数的函数：num1和num2，并且都是number类型；

• 并且这个函数是没有返回值的，所以是void；

• 在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的

// 1. 函数作为参数时，在参数中如何编写类型

function foo() {}

type FooFnType = () => void

function bar(fn: FooFnType) {

fn()

}

bar(foo)

// 2. 定义常量时，编写函数的类型

type AddFnType = (num1: number, num2: number) => number

const add: AddFnType = (a1: number, a2: number) => {

return a1 + a2

}

参数的可选类型

• 我们可以指定某个参数是可选的

• 这个时候这个参数x依然是有类型的，它是什么类型呢？ number | undefined

• 另外可选类型需要在必传参数的后面

// 可选类型必须写在必须按类型的后面的

// y -> undefined | number

function foo(x: number, y?: number) {

console.log(x, y)

}

foo(20, 30)

foo(20)

默认参数

• 从ES6开始，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：

• 这个时候y的类型其实是 undefined 和 number 类型的联合

// 必传参数 -> 有默认值的参数 -> 可选参数

function foo(x: number, y: number = 100) {

console.log(x, y)

}

foo(20) // 20 100

剩余参数

• 从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

function sum(initalNum: number, …nums: number[]) {

let total = initalNum

for (const num of nums) {

total += num

}

return total

}

console.log(sum(20, 30))

console.log(sum(20, 30, 40))

console.log(sum(20, 30, 40, 50))

可推导的this类型

• this是JavaScript中一个比较难以理解和把握的知识点：

• 我在公众号也有一篇文章专门讲解this：https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

• 因为this在不同的情况下会绑定不同的值，所以对于它的类型就更难把握了；

• 那么，TypeScript是如何处理this呢？我们先来看一个例子：

• 上面的代码是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：

• TypeScript认为函数 sayHello 有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。

// this 是可以被推导出来的 info对象（typeScript 推导出来）

const info = {

name: ‘why’,

eating() {

console.log(this.name + ’ eating’)

}

}

info.eating()

不确定的this类型

• 但是对于某些情况来说，我们并不知道this到底是什么？

• 这段代码运行会报错的：

• 这里我们再次强调一下，TypeScript进行类型检测的目的是让我们的代码更加的安全；

• 所以这里对于 sayHello 的调用来说，我们虽然将其放到了info中，通过info去调用，this依然是指向info对象的；

• 但是对于TypeScript编译器来说，这个代码是非常不安全的，因为我们也有可能直接调用函数，或者通过别的对象来

调用函数；

• 这个时候，通常TypeScript会要求我们明确的指定this的类型

type ThisType = { name: string }

function eating(this: ThisType, message: string) {

console.log(this.name + ’ eating’, message)

}

const info = {

name: ‘why’,

eating

}

// 隐式绑定

info.eating(‘哈哈哈’)

// 显式绑定

eating.call({ name: ‘kobe’ }, ‘呵呵呵’)

eating.apply({ name: ‘james’ }, '嘿嘿嘿 ')

函数的重载

• 在TypeScript中，如果我们编写了一个add函数，希望可以对字符串和数字类型进行相加，应该如何编写呢？

• 我们可能会这样来编写，但是其实是错误的：

type AddType = number | string

function add(a1: AddType, a2: AddType) {

return a1 + a2

}

/**

• 通过联合类型有2个缺点：

• 1. 进行很多的逻辑判断（类型缩小）
• 2. 返回值的类型依然不能确定

*/

function add(a1: number | string, a2: number | string) {

if (typeof a1 === ‘number’ && typeof a2 === ‘number’) {

return a1 + a2

} else if (typeof a1 === ‘string’ && typeof a2 === ‘string’) {

return a1 + a2

}

}

• 那么这个代码应该如何去编写呢？

• 在TypeScript中，我们可以去编写不同的重载签名（overload signatures）来表示函数可以以不同的方式进行

调用；

• 一般是编写两个或者以上的重载签名，再去编写一个通用的函数以及实现；

• sum函数的重载

• 比如我们对sum函数进行重构：

• 在我们调用sum的时候，它会根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数的重载签名；

// 函数的重载：函数的名称相同，但是参数不同的几个函数，就是函数的重载

function sum(num1: number, num2: number): number

function sum(num1: string, num2: string): string

function sum(num1: any, num2: any): any {

return num1 + num2

}

const result2 = sum(‘abc’, ‘cba’)

console.log(result, result2) // 50

• 但是注意，有实现提的函数，是不能直接被调用的：

sum({name:‘why’}, {age:18}) // 报错

TypeScripte 类的使用

认识类的使用

• 在早期的JavaScript开发中（ES5）我们需要通过函数和原型链来实现类和继承，从ES6开始，引入了class关键字，可以更加方便的定义和使用类。

• TypeScript作为JavaScript的超集，也是支持使用class关键字的，并且还可以对类的属性和方法等进行静态类型检测。

• 实际上在JavaScript的开发过程中，我们更加习惯于函数式编程：

• 比如React开发中，目前更多使用的函数组件以及结合Hook的开发模式；

• 比如在Vue3开发中，目前也更加推崇使用 Composition API； n 但是在封装某些业务的时候，类具有更强大封装性，所以我们也需要掌握它们。

• 类的定义我们通常会使用class关键字：

• 在面向对象的世界里，任何事物都可以使用类的结构来描述；

• 类中包含特有的属性和方法；

类的定义

• 我们来定义一个Person类：

• 使用class关键字来定义一个类；

• 我们可以声明一些类的属性：在类的内部声明类的属性以及对应的类型

• 如果类型没有声明，那么它们默认是any的；

• 我们也可以给属性设置初始化值；

• 在默认的strictPropertyInitialization模式下面我们的属性是必须初始

化的，如果没有初始化，那么编译时就会报错；

• 如果我们在strictPropertyInitialization模式下确实不希望给属性初

始化，可以使用 name!: string语法；

• 类可以有自己的构造函数constructor，当我们通过new关键字创建一个

实例时，构造函数会被调用；

• 构造函数不需要返回任何值，默认返回当前创建出来的实例；

• 类中可以有自己的函数，定义的函数称之为方法；

class Person {

name: string

age: number

constructor(name: string, age: number) {

this.name = name

this.age = age

}

eating() {

console.log(this.name + ’ eating’)

}

}

const p = new Person(‘why’, 18)

console.log(p.name)

console.log(p.age)

p.eating()

/*

why

18

why eating

*/

类的继承

• 面向对象的其中一大特性就是继承，继承不仅仅可以减少我们的代码量，也是多态的使用前提。

• 我们使用extends关键字来实现继承，子类中使用super来访问父类。

• 我们来看一下Student类继承自Person：

• Student类可以有自己的属性和方法，并且会继承Person的属性和方法；

• 在构造函数中，我们可以通过super来调用父类的构造方法，对父类中的属性进行初始化

class Person {

name: string

age: number

constructor(name: string, age: number) {

this.name = name

this.age = age

}

eating() {

console.log(‘eating’)

}

}

class Student extends Person {

sno: number

constructor(name: string, age: number, sno: number) {

// 调用父类的构造器

super(name, age)

this.sno = sno

}

// overwrite 重写

eating() {

super.eating()

console.log(‘student eating’)

}

studying() {

console.log(‘studying’)

}

}

class Teacher extends Person {

title: string = ‘’

teaching() {

console.log(‘teaching’)

}

}

const stu = new Student(‘why’, 12, 111)

stu.name = ‘coderwhy’

stu.age = 10

console.log(stu.name)

console.log(stu.age)

stu.eating()

/*

coderwhy

10

eating

student eating

*/

class Animal {

action() {

console.log(‘animal running’)

}

}

class Dog extends Animal {

action() {

console.log(‘dog running!!!’)

}

}

class Fish extends Animal {

action() {

console.log(‘fish swimming!!!’)

}

}

class Bird extends Animal {

action() {

console.log(‘bird flying!!!’)

}

}

function makeActions(animals: Animal[]) {

animals.forEach((animal) => animal.action())

}

makeActions([new Dog(), new Fish(), new Bird()])

/*

dog running!!!

fish swimming!!!

bird flying!!!

*/

类的成员修饰符

• 在TypeScript中，类的属性和方法支持三种修饰符： public、private、protected

• public 修饰的是在任何地方可见、公有的属性或方法，默认编写的属性就是public的；

• private 修饰的是仅在同一类中可见、私有的属性或方法；

• protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法；

• public是默认的修饰符，也是可以直接访问的，我们这里来演示一下protected和private。

// 只能在类内部访问

class Person {

private name: string = ‘’

// 封装了2个方法，通过方法来访问name

getName() {

return this.name

}

setName(newName) {

this.name = newName

}

}

const p = new Person()

p.setName(‘why’)

console.log(p.getName())

// protected: 在类的内部和子类中可以访问

class Person {

protected name: string = ‘123’

}

class Student extends Person {

getName() {

return this.name

}

}

const stu = new Student()

console.log(stu.getName())

只读属性readonly

• 如果有一个属性我们不希望外界可以任意的修改，只希望确定值后直接使用，那么可以使用readonly：

class Person {

// readonly name: string = ‘123’

// 1. 只读属性可以在构造器中赋值, 赋值之后就不可以修改

// 2. 属性本身不能进行修改，但是如果它是对象类型，对象中的属性是可以修改

readonly name: string

readonly friend?: Person

age?: number

constructor(name: string, friend?: Person) {

this.name = name

this.friend = friend

}

}

const p = new Person(‘why’, new Person(‘kobe’))

console.log(p.name)

console.log(p.friend)

// p.name = ‘123’ // 报错

// p.friend = new Person(‘james’) // 报错

if (p.friend) {

p.friend.age = 30 // 可以修改

}

getters/setters

• 在前面一些私有属性我们是不能直接访问的，或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这个时候我们可以使用存取器。

class Person {

private _name: string // 定义私有属性时，习惯以下划线开头

constructor(name: string) {

this._name = name

}

// 访问权 getter setter

set name(newName) {

this._name = newName

}

get name() {

return this._name

}

}

const p = new Person(‘why’)

console.log(p.name)

p.name = ‘123’

console.log(p.name)

/*

why

123

*/

静态成员

• 前面我们在类中定义的成员和方法都属于对象级别的, 在开发中, 我们有时候也需要定义类级别的成员和方法。

• 在TypeScript中通过关键字static来定义：

class Person {

private _name: string // 定义私有属性时，习惯以下划线开头

constructor(name: string) {

this._name = name

}

// 访问权 getter setter

set name(newName) {

this._name = newName

}

get name() {

return this._name

}

}

const p = new Person(‘why’)

console.log(p.name)

p.name = ‘123’

console.log(p.name)

/*

why

123

*/

抽象类abstract

• 我们知道，继承是多态使用的前提。

• 所以在定义很多通用的调用接口时, 我们通常会让调用者传入父类，通过多态来实现更加灵活的调用方式。

• 但是，父类本身可能并不需要对某些方法进行具体的实现，所以父类中定义的方法,，我们可以定义为抽象方法。

• 什么是 抽象方法? 在TypeScript中没有具体实现的方法(没有方法体)，就是抽象方法。

• 抽象方法，必须存在于抽象类中；

• 抽象类是使用abstract声明的类；

• 抽象类有如下的特点：

• 抽象类是不能被实例的话（也就是不能通过new创建）

• 抽象方法必须被子类实现，否则该类必须是一个抽象类；

function makeArea(shape: Shape) {

return shape.getArea()

}

abstract class Shape {

abstract getArea()

}

class Rectangle extends Shape {

private width: number

private height: number

constructor(width: number, height: number) {

super()

this.width = width

this.height = height

}

getArea() {

return this.width * this.height

}

}

class Circle extends Shape {

private r: number

constructor(r: number) {

super()

this.r = r

}

getArea() {

return this.r * this.r * 3.14

}

}

const rectangle = new Rectangle(20, 30)

console.log(makeArea(rectangle))

const circle = new Circle(10)

console.log(makeArea(circle))

// makeArea(三角形)

// makeArea(矩形)

// makeArea(圆形)

// 缺点

// makeArea(123)

// makeArea(undefined)

// makeArea(‘123’)

类的类型

• 类本身也是可以作为一种数据类型的：

class Person {

name: string = ‘123’

eating() {}

}

const p = new Person()

const p1: Person = {

name: ‘why’,

eating() {}

}

function printPerson(p: Person) {

console.log(p.name)

}

printPerson(new Person())

printPerson({ name: ‘kobe’, eating() {} })

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试