1、TS和JS的区别是什么？有什么优势？
语法层面：TypeScript = JavaScript + Type（TS 是 JS 的超集）
执行环境层面：浏览器、Node.js 可以直接执行 JS，但不能执行 TS（Deno 可以执行 TS）
编译层面：TS 有编译阶段（编译成JS），JS 没有编译阶段（只有转译阶段（ES6转到ES5）和 lint 阶段（ESlint提示你代码写的不好））
编写层面：TS 更难写一点，但是类型更安全
文档层面：TS 的代码写出来就是文档，IDE 可以完美提示。JS 的提示主要靠 TS
2、any、unknown、never 的区别是什么？
any V.S. unknown
二者都是顶级类型（top type），任何类型的值都可以赋值给顶级类型变量：
let foo: any = 123; // 不报错
let bar: unknown = 123; // 不报错
但是 unknown 比 any 的类型检查更严格，any 什么检查都不做，unknown 要求先收窄类型：
你把unknown赋值给一个字符产就不行
const value: unknown = "Hello World";
const someString: string = value;
// 报错：Type 'unknown' is not assignable to type 'string'.(2322)
//如何让它不报错，把value断言将其类型收窄再赋值
const value: unknown = "Hello World";
const someString: string = value as string; // 不报错
如果改成 any，基本在哪都不报错。所以能用 unknown 就优先用 unknown，类型更安全一点。
//不报错
const value: any = "Hello World";
const someString: string = value;
顶级类型：
可以向上赋值，如果你是一个字符串可以赋值给一个类型是any的变量
never
never 是底类型（never可以赋值给任何类型但是所有值都不能赋值给never,那never存在的意义是什么呢），表示不应该出现的类型，这里有一个尤雨溪给出的例子：
interface A {
type: 'a'
}
interface B {
type: 'b'
}
//All要么是A类型要么是B类型
type All = A | B
function handleValue(val: All) {
switch (val.type) {
case 'a':
// 这里 val 被收窄为 A
break
case 'b':
// val 在这里是 B
break
default:
// val 在这里是 never，意义就是告诉你别在这写代码
const exhaustiveCheck: never = val
break
}
}
所以never是「不应该出现的类型」
3、type和interface区别是什么？
-
组合方式：interface 使用 extends 来实现继承，type 使用 & 来实现联合类型。
image.png -
扩展方式：interface 可以重复声明用来扩展并自动合并，type 一个类型只能声明一次
image.png
image.png -
范围不同：type 适用于基本类型，interface 一般不行。
image.png -
命名方式：interface 会创建新的类型名，type 只是创建类型别名，并没有新创建类型。
image.png
Y === number x只是别名
as const 收窄用的
我没有写类型他会自己猜 a是一个数字字符串
使用as const
类型推断的时候往窄了猜，我的类型必须是 第一项是1 第二项是2 第三项是3
4、TS 工具类型的作用和实现？
- 将英文翻译为中文。
Partial 部分类型
Required 必填类型
Readonly 只读类型
Exclude 排除类型
Extract 提取类型
Pick/Omit 排除 key 类型
ReturnType 返回值类型
举例说明每个工具类型的用法。
- Parial部分类型
interface User {
id:string;
name:string;
}
表单创建User的时候我们只有name没有id上传到服务器才有id
const user:User = {
name:'franl'
}//报错 说你需要有id
使用Parial,说明我这个user是User的一部分，其他部分可以不存在。
const user:Partial<User> = {
name:'franl'
}
- Required 必填类型（和Partial反着来)
interface User {
id?:string; //?表示可能不存在
name:string;
}
const user:Required<User> = {
name:'franl'
}//报错必须写上id
- Readonly 只读类型
interface User {
id:string;
name:string;
}
const user:Readonly<User> = {
id:'111',
name:'frank'
}
user.id = '222'//报错 只能读不能写
- Pick/Omit 排除 key 类型
interface User {
id:string;
name:string;
age:number
}
type God = Pick<User,'id'|'name'>
Pick获取你的某些Key其他都不要
Omit是反向操作 写谁不要谁
type God = Omit<User,'age'>
-
Exclude 排除类型 Extract 提取类型
Exclude.png
Exclude和Omit区别
Exclude后面接基本类型
Omit后面接一个对象类型 interface
-
ReturnType 返回值类型
需要获取一个函数的返回值类型。两种写法都行。
image.png
- Record
type a = Record<string,number>
等同于
type b = {
[x:string]:number
}
所有key都是string 所有value都是number
