Typescript(进阶必备知识) | 8月更文挑战

2,143 阅读3分钟

Typescript

这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战

基础知识

基础类型: number string boolean array object

1. enum: 枚举

2. type, interface

3. 联合类型 | (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)

4. 交叉类型 & (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)

5. typeof

Typeof 操作符可以用来获取一个变量声明或对象的类型。

function toArray(x: number): Array<number> { 
    return [x];
}
type Func = typeof toArray; // (x: number) => number[]

6. keyof

Keyof 操作符可以用来一个对象中的所有 key 值:

interface Person { 
    name: string; 
    age: number;
}
type1 K1 = Keyof Person; "name" | "age"

7. in

In 用来遍历枚举类型:

type Keys = "a" | "b" | "c"
type Obj = {
    [p in Keys]: any
} // { a: any, b: any, c: any }

8. extends

有时候我们定义的泛型不想过于灵活或者说想继承某些类等,可以通过 extends 关键字添加泛型约束。

interface ILengthwise {
    length: number;
}
function loggingIdentity<T extends ILengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

loggingIdentity(3);
loggingIdentity({length: 10, value: 3});

9. Paritial

Partial 的作用就是将某个类型里的属性全部变为可选项 ?。

10. Reuqired

Required 的作用就是将某个类型里的属性全部变为必选项。

11. Readonly

Readonly 的作用是将某个类型所有属性变为只读属性,也就意味着这些属性不能被重新赋值。

12. Record 

Record<K extends keyof any, T> 的作用是将 K 中所有的属性的值转化为 T 类型。


interface PageInfo {
    title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
    about: { title: "about" },
    contact: { title: "contact" },
    home: { title: "home" }
};

  1. 1. Exclude
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"

  1. Extract

Extract<T, U> 的作用是从 T 中提取出 U。

type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () => void

常见面试题

1. 简答

  • 你觉得使用ts的好处是什么?

  • 你觉得 typescript 和 javascript 有什么区别

  • typescript 你都用过哪些类型

  • typescript 中 type 和 interface 的区别

  • 什么是泛型, 泛型的具体使用?


  • Typescript的好处

    1.1 TypeScript是JavaScript的加强版,它给JavaScript添加了可选的静态类型和基于类的面向对象编程,它拓展了JavaScript的语法。所以ts的功能比js只多不少.

    1.2 Typescript 是纯面向对象的编程语言,包含类和接口的概念.

    1.3 TS 在开发时就能给出编译错误, 而 JS 错误则需要在运行时才能暴露。

    1.4 作为强类型语言,你可以明确知道数据的类型。代码可读性极强,几乎每个人都能理解。

    1.5 ts中有很多很方便的特性, 比如可选链.

  • Typescript 与 JavaScript 的区别

    • Typescript 是 JavaScript 的超集,它是基于 JavaScript 之上的编程语言,
    • Typescript 解决了 JavaScript 语言本身类型系统不足的问题
    • Typescript 还支持 ECMAScript 新特性
    • Typescript 会自动转化 ECMAScript 新特性,它最低支持 ES3 版本的代码,兼容性很好
    • JavaScript 是一门弱类型、动态类型的语言,它更灵活、多变
  • Typescript 的缺点:

    • 相较于 JavaScript,Typescript 语言本身多出了很多概念,增加了学习成本
    • 项目开发初期,Typescript 还需要做一些类型声明等,增加了一些开发成本
  • 用过的 Typescript 类型

    • 原始类型

    • 数组类型

    • 对象类型

    • 任意类型

    • 枚举类型

    • 函数类型

  • Typescript 中 type 和 interface 的区别

  • 相同点:

    • 他们都可以描述对象或者函数

    • 允许扩展(extends)


type Animal = {
    name: string
    say: Function
}

interface Animal2 {
    name: string
    say: Function
}

// type extends type
type Cat = Animal & { jump: Function }
// type extends interface
type Cat2 = Animal2 & { jump: Function }
    
interface Dog extends Animal2 {
    run: Function
}
// interface extends type
interface Dog2 extends Animal {
    run: Function
}
  • 不同点:

    • type 可以声明基本类型别名,联合类型,元组等类型
  • 什么是泛型, 泛型的具体使用?

    泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,使用时再去指定类型的一种特性。

    可以把泛型理解为代表类型的参数