路白-Typescript

基础

基础类型: number string boolean array object

: string,可以使用这种冒号加类型的形式声明变量、对象的类型

？表示可选类型

enum: 枚举

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

type: 用于定义一个类型

interface: 接口，定义一个对象参数类型，使用该类型的对象必须完全符合该对象类型的格式

interface a {
  name: string
}

function b(para: a) {
  console.log(para);
}
// 该实例的b函数传入的参数是正确的
// 当传入的参数缺少了name属性、name的属性值不为String、多了参数都会报错
b({ name: '1111' })

联合类型 |：

type a = string | number

function b(para: a) {
  console.log(para);
}
// 此时b中参数b(1)或b('1')都可以
b(1) 

// 当a = {name: string} | {age: number}时
// b({ name: '1' })、b({ age: 1 })、b({ age: 1, name: '1' })都可以

交叉类型 &：

type a = string & number

function b(para: a) {
  console.log(para);
}

// 此时a为never类型，赋啥值都会报错
// 注: never表示表示永远不存在值的类型
b(1) 

// 当a = {name: string} & {age: number}时
// 只有b({ age: 1, name: '1' })形式可以，交叉相当于两个对象类型的合并，需要全部属性都有且符合要求才不会报错

typeof: 可以用来获取一个变量声明或对象的类型

function toArray(x: number): Array<number> {
  return [x];
}

type Func = typeof toArray; // -> (x: number) => number[]

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});

类型断言: 就是类型转换，有两种方式

// 1.尖括号形式
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 2.as形式，注意在ts中使用jsx只有as是被允许的
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

面试题

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

TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。所以ts的功能比js只多不少.Typescript 是纯面向对象的编程语言，包含类和接口的概念.TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解。ts中有很多很方便的特性, 比如可选链.

type 和 interface的异同
用interface描述数据结构，用type描述类型

都可以描述一个对象或者函数都允许拓展（extends）：interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同

// interface extends interface
interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

// type extends type
type Name = { 
  name: string; 
}
type User = Name & { age: number  };

// interface extends type
type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

// type extends interface
interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}

只有type可以做的: type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

如何基于一个已有类型, 扩展出一个大部分内容相似, 但是有部分区别的类型?

首先可以通过Pick和Omit

interface Test {
    name: string;
    sex: number;
    height: string;
}

type Sex = Pick<Test, 'sex'>;

const a: Sex = { sex: 1 };

type WithoutSex = Omit<Test, 'sex'>;

const b: WithoutSex = { name: '1111', height: 'sss' };

比如Partial, Required.再者可以通过泛型.

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

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

interface Test<T = any> {
    userId: T;
}

type TestA = Test<string>;
type TestB = Test<number>;

const a: TestA = {
    userId: '111',
};

const b: TestB = {
    userId: 2222,
};