面试复习题-TypeScript

139 阅读3分钟

✊不积跬步,无以至千里;不积小流,无以成江海

TS 和 JS 的区别是什么?

  1. 语法层面:TypeScript = JavaScript + Type(TS 是 JS 的超集)

  2. 执行环境层面:执行环境不同。浏览器、Node.js 可以直接执行 JS,但不能直接执行 TS(但Deno 可以

执行 TS)

  1. 编译层面:TS 有编译阶段,JS 没有编译阶段,即不用编译也可执行(只有转译阶段和 lint 阶段)【什么是贬义词?把a语言打包成b语言】

  2. 编写层面:TS 更难写一点,但是类型更安全

  3. 文档层面:TS 的代码写出来就是文档,可以直接生成IDE的的提示。JS的提示主要靠 TS。

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

any V.S. unknown

二者都是顶级类型(top type),任何类型的值都可以赋值给顶级类型变量。

但是 unknown 比 any 的类型检查更严格,any 什么检查都不做,unknown 要求先确认类型:

const value: unknown = "Hello World";
const someString: string = value;

// 报错:Type 'unknown' is not assignable to type 'string'.(2322)

因为value已经提前被赋值给unknow类型,再把unknown类型赋值给string类型是错误的。

如果改成 any,基本在哪都不报错。所以能用 unknown 就优先用 unknown,类型更安全一点。

never

never 是底类型,表示不应该出现的类型。never在所有类型的最下面,可以赋值给任何对象;但所有的都不能赋值给never。

type 和 interface 的区别是什么?

如果和对象相关就用interface;和对象不相关就用type。

  1. 组合方式:interface 使用 extends 来实现继承,type 使用 & 来实现联合类型。

interface A extends B 通过这种方式,让a来拥有b的属性

type A = {} & BB 通过这种方式,让a来拥有b的属性

  1. 扩展方式:interface 可以重复声明用来扩展,type 一个类型只能声明一次

即使用interface在一个文件中声明变量属性,在其他文件中依旧可以继续声明;而type一旦对一个变量进行声明后,再添加只能在同一位置,有点像const

  1. 范围不同:type 适用于基本类型,interface 一般不行。

type UserName = string 是不会报错的,但是不能用interface这样去声明

  1. 命名方式:interface 会创建新的类型名,type 只是创建类型别名,并没有新创建类型。

举例来说,type X = number,让Y为X的type,会发现Y实际上为number类型,仿佛X从来没有存在过。

TS 工具类型 Partial、Required 等的作用和实现

Partial 部分类型

当只调用部分属性时,用partial表示部分引用从而不报错,如图。

截屏2024-03-10 11.31.51.png

Required 必填类型

和partial正相反,是必填类型,带?的类型如果没填,一定会报错。

截屏2024-03-10 11.34.09.png

Readonly 只读类型

用readonly包起来的,如果改变会报错。

截屏2024-03-10 11.35.43.png

Exclude 排除类型

定义某些属性,当我想要排除某些属性时,用exclude。

截屏2024-03-10 11.42.44.png

Extract 提取类型 只要某些属性时,就用extract。(什么类型都接受)

截屏2024-03-10 11.44.08.png

Pick/Omit 排除 key 类型

pick获取部分属性,其他的都不要。

截屏2024-03-10 11.38.24.png

Omit是我不要哪些属性,其余的都要。(只接受对象类型)

截屏2024-03-10 11.39.07.png

ReturnType 返回值类型

需要得到某些返回值的类型时,则使用return。

截屏2024-03-10 11.46.10.png

枚举类型

可以理解枚举就是一个字典。枚举类型使用enum来定义:

enum Day {
  SUNDAY,
  MONDAY,
  TUESDAY,
  WEDNESDAY,
  THURSDAY,
  FRIDAY,
  SATURDAY
 }

上面定义的枚举类型的Day,它有7个值,TypeScript会为它们每个值分配编号,默认从0开始,在使用时,就可以使用名字而不需要记数字和名称的对应关系了:

enum Day {
  SUNDAY = 0,
  MONDAY = 1,
  TUESDAY = 2,
  WEDNESDAY = 3,
  THURSDAY = 4,
  FRIDAY = 5,
  SATURDAY = 6
}