前端面试TS

1 TS和JS的区别是什么

语法层面
- TypeScript = JavaScript + Type （TS是JS的超集）
执行环境层面
- 浏览器、Node.js可以直接执行JS，但不能执行TS
编译层面
- TS有编译阶段，JS没有编译阶段，只有转义（打包ES6+ => ES5）和lint阶段（与TS很像，都会提示代码的错误，不过仅仅是针对行文语法和风格）
编写层面
- TS更难写，但类型更安全，能减少低级错误和bug率
文档层面
- TS的代码写出来就是文档，IDE可以完美提示，JS的提示其实主要是TS贡献的

2 any、unknown、never的区别是什么

any vs unknown

二者都是顶级类型，任何类型的值都可以赋值给顶级类型的变量

1
2


let foo: any = 123 // 不报错
let bar: unknown = 123 // 不报错

但unknown比any的类型检查更严格，any什么检查都不做，unknown要求先收窄类型

1
2
3
4


const value: unknown = 'Hello'
const someStr: string = value
// 不可以把unknown赋值给string
// 报错: Type 'unknown' is not assignable to type "string".

1
2


const value: unknown = 'Hello'
const someStr: string = value as string // 利用断言收窄类型

never

never是底类型，表示不应该出现的类型，不能接受任何类型的值
如果出现了never，说明代码写错了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


interface A {
	type: 'a'
}
interface B {
	type: 'b'
}
type All = A | B

function handleValue(val: All){
	switch(val.type) {
		case 'a':
			val
            // 这里val被收窄为A
			break
		case 'b':
			val
            // 这里val被收窄为B
			break
		default:
			val
            // 除AB外，没有其他类型了，说明此default是没有任何意义的
            // 因此val在这里是never
			const check: never = val
			break
	}
}

3 type和interface的区别是什么

一般情况下，与对象有关的类型定义使用interface，其余情况用type

组合方式：interface使用extends来实现继承，type使用&来实现联合类型

1
2
3
4
5
6
7


interface A { a: string }
interface B extends A { b: string }
const b: B = { a: 'a', b: 'b' }

type C = { c: string }
type D = { d: string } & C
const d: D = { c: 'c', d: 'd' }

扩展方式：interface可以重复声明用来扩展，type一个类型只能声明一次

1
2
3
4
5
6
7


interface A { a: string }
// 2.js
interface A { b: string }
const a = { a: 'a', b: 'b' }

type C = { c: string }
type C = { d: string } // 报错，类似const定义变量

范围不同：type适用于基本类型，interface一般不行

1
2


type UserName = string // 可以
interface UserName = string // 错误

命名方式：interface会创建新的类型名，type只是创建类型别名，并没有创建新类型

1
2
3
4
5
6
7


type X = number | string
const x: X = 1
type Y = typeof x // 此时类型Y并不是X，而是number

interface A { a: string }
const a: A = { a: 'a' }
type B = typeof a // 此时类型B就是A

4 TS工具类的作用和实现

Partial 部分类型 type Partial<T> = { [P in keyof T]?: T[P] | undefined }

1
2
3
4
5
6
7
8
9


interface User {
	id: string
	name: string
}
// 此时还没上传到服务器，因此没有id字段，导致编译不通过
const user: User = { name: 'gsq' }
// 利用Partial函数，表示此对象的类型是User，但又不全是User，编译通过
const user: Partial<User> = { name: 'gsq'}
// 相当于给每个key添加?，每个值添加 | undefined

Required 必填类型 type Required<T> = { [P in keyof T]-?: T[P] }

1
2
3
4
5
6


interface User {
	id?: string // 此时id为可选属性
	name: string
}
// Required会把全部属性变为必选属性
const user: Required<User> = { id:'123', name: 'gsq' }

ReadOnly 类型只读 type ReadOnly<T> = { readonly [P in keyof T]: T[P] }

1
2
3
4
5
6
7


insterface User {
 	id?: string
 	name: string
}
// 给每个类型声明前添加readonly关键字
const user: ReadOnly<User> = { id: '111', name: 'gsq' }
user.id = '123'// 错误

Pick/Omit 挑选/排除key类型（针对对象类型）

1
2
3
4
5
6
7
8
9


interface User {
	id: string
	name: string
	age: number
}
// 若想声明一个没有年龄的User类型
type God = Pick<User, 'id' | 'name'>
// 相当于
type God = Omit<User, 'age'>

Exclude/Extract 排除/提取类型（针对基本类型）

1
2
3


type Dir = '东' | '南' | '西' | '北'
type Dir1 = Exclude<Dir, '东'| '西'> // '南' | '北'
type Dir2 = Extract<Dir, '南' | '北'> // '南' | '北'

ReturnType 获取函数返回值类型

1
2
3
4


function f(a:number, b:number){
	return a + b
}
type R = ReturnType<typeof f> // number

Record 定义一个对象的key或value的类型，规范对象的声明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 第一个参数为key的类型，第二个为value的类型
// 第一个参数只能是string/number/symbol
type A = Record<string, number>
// 相当于
type A = {
	[x: string]: number
}

// 页面导航栏配置
interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

Map跟Record一样，区别在于Key的类型为任意类型

1

type A = Map<()=>number, string>

Contents

1 TS和JS的区别是什么

2 any、unknown、never的区别是什么

3 type和interface的区别是什么

4 TS工具类的作用和实现