面试题 - TypeScript基础

72 阅读2分钟

TypeScript和JavaScript的区别是什么?

  • 语法:TypeScript是JavaScript的超集。
  • 执行环境:JavaScript是脚本语言,可以直接在浏览器/nodejs环境执行。TypeScript是编译语言,不能直接执行。
  • 编译:TypeScript有编译阶段,JavaScript没有编译阶段,只有转译阶段(将高版本转译成更低版本)和lint阶段)。
  • 编写:TypeScript更难编写,但类型更安全。
  • 文档:TypeScript的代码写出来就是文档,ide可以完美提示。JavaScript的代码提示来自于TypeScript的贡献。

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

这个题目不太好回答,抽象题目可以通过举例来具体回答。

any vs unknown:

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

let a: any = 123;     // 不报错
let b: unknown = 456; // 不报错

但unknown比any的类型检查更严格,any不做检查,unknown要求先收窄类型。

let value: unknow = 'abc';
let stringA: string = value; 
// 报错
let stringB: string = value as string; // 类型收窄,不报错

如果类型是any,则都不会报错。

never:

never是底类型,表示不应该出现这种类型。

type和interface的区别是什么?

官方文档给出的区别:

  • 组合方式:interface可以通过extends实现继承,type可以通过&实现交叉类型。
  • 扩展方式:interface可以通过多次声明进行扩展(不会覆盖),type只能声明一次。
  • 范围:type适用于基本类型,interface一般不可用于基本类型。
  • 命名方式:interface会创建新的类型,type会创建类型别名而不会创建新的类型。

实际操作中,简单来说,一般基本类型我会使用type,复杂类型我会使用interface。

工具类型的作用和实现

TypeScript的工具类型及使用场景:

Partial(部分类型):

比如在用户注册的情景下,一个User类型需要id和name,但用户在注册时还没有id,这时我们在使用user时,就可以用到Partial,避免没有id导致的报错。

interface User {
    id: int,
    name: string
}

const user: Partial<User> = {
    name: 'Chypre'
}

Required(必填类型):

Partial的反向操作。

Readonly(只读类型):

略。

Pick(选择类型):

在已有的类型对象(interface)中,通过key,选择几个类型。

const user: Pick<User, 'name'> = {
    name: 'Chypre'
}

Omit(忽略类型):

Pick的反向操作。

const user: Omit<User, 'id'> = {
    name: 'Chypre'
}

Exclude(排除类型):

在已有的非对象类型中直接排除几个类型。

const dir = 'east' | 'west' | 'south' | 'north';
const myDir = Exclude<dir, 'north'>;

Extract(提炼类型):

Exclude的反向操作。

如果Extract的值并不包含于总的类型之中,会报错吗?讲道理,应该要报错,但实践发现,ts并不会进行检查。但有的情景下,为了代码逻辑的关联性,我还是会选择使用Extract。

ReturnType(返回值类型):

function f(a: number, b: number){
    return a+b;
}

type A = ReturnType<typeof f>; // number