前端进阶之TS总结

2023-05-16

知识点

高频面试题
TS装饰器
axios二次封装

1.高频面试题

1.1 类型推论 & 可赋值性

什么是类型推论？
- TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论
- 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查
- ```
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
```

以下代码ts推论出的类型是什么？

let a = 1024; // number
let b = '1024'; // string
const c = 'apple'; // apple
let d  = [true, false, true]; // boolean[]
let e =  { name: 'apple'} // {name:string}
let f = null; // any
let g = [false, 1, '121'] // (string | number | boolean)[]

可赋值性：数组，布尔，数字，对象，函数，类、字符串，字面量类型，满足以下任一条件时，A类型可以
赋值给B类型。
- A是B的子类型
- A是any类型

1.2 类型断言

联合类型可以被断言为其中一个类型
父类可以被断言为子类
任何类型都可以被断言为 any
any 可以被断言为任何类型

function formatInput(input: string): string {
  return input.slice(0, 10)
}
function getUserInput(): string | number {
  return 'test'
}
const input = getUserInput()

formatInput(input) // 类型“string | number”的参数不能赋给类型“string”的参数。不能将类型“number”分配给类型“string”
formatInput(input as string)
formatInput(input as any)
formatInput(input as object) // 类型“object”的参数不能赋给类型“string”的参数。

看题：

// 1
type Options = {
  baseURL: string
  cacheSize?: number
  env?: 'prod' | 'dev'
}
// 2
class API {
  constructor(options: Options) {}
}
// 3
new API({
  baseURL: 'http://myapi.site.com',
  env: 'prod',
})
// 4
new API({
  baseURL: 'http://myapi.site.com',
  badEnv: 'prod', // err: 类型“{ baseURL: string; badEnv: string; }”的参数不能赋给类型“Options”的参数。
})
// 5
new API({
  baseURL: 'http://myapi.site.com',
  badEnv: 'prod',
} as Options)
// 6
const badOptions = {
  baseURL: 'http://myapi.site.com',
  badEnv: 'prod',
}
new API(badOptions)
// 4的方式在ts 里会进行“多余属性”的检查，即检查要赋值的对象属性在不在被赋值的对象里
// 6的方式，把对象赋值给了一个变量之后，ts 就不会做“多余属性”的检查了，这就是ts 里的一个特性。
// 所以4会报错，6不会报错

1.3 type 和 interface的异同

interface侧重于描述数据结构，type（类型别名）侧重于描述类型

1.3.1 相同点

都可以描述一个对象或者函数
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; 
}

1.3.2 不同点

类型别名可以用于其它类型（联合类型、元组类型、基本类型（原始值）），interface不支持

type PartialPointX = { x: number }; 
type PartialPointY = { y: number }; 
 
// union(联合) 
type PartialPoint = PartialPointX | PartialPointY; 

 
// tuple(元祖) 
type Data = [PartialPointX, PartialPointY]; 
 
//primitive(原始值) 
type Name = Number; 
 
// typeof的返回值 
let div = document.createElement('div'); 
type B = typeof div;

interface 可以多次定义并被视为合并所有声明成员 type 不支持

interface Point { 
  x: number; 
} 
interface Point { 
  y: number; 
} 
 
const point: Point = { x: 1, y: 2 }; 

interface User { 
    name: string; 
    age: number; 
} 
 
interface User { 
    sex: string; 
} 
//User接口为： 
{ 
    name: string; 
    age: number; 
    sex: string; 
}

type 能使用 in 关键字生成映射类型，但 interface 不行

type Keys = 'firstname' | 'surname'; 
 
type DudeType = { 
    [key in Keys]: string; 
}; 
 
const test: DudeType = { 
    firstname: 'Pawel', 
    surname: 'Grzybek', 
};

1.4 接口类型

属性类接口：对对象属性的约束

interface FullName {
  firstName:string; // 注意，用分号结束
  secondName:string; 
}

function printName (name:FullName):void {
  // 必须传入对象，且带有属性：firstName，secondName，且属性值都是字符串
  console.log(`${name.firstName} -- ${name.secondName}`);
}
printName({firstName:"小明",secondName:"小花"})

函数类接口：对方法传入的参数以及返回值进行约束，批量约束。

interface Encrytp {
  (key:string, val:string):string;
}

let md5:Encrytp = function (key:string, val:string):string {
  // 具体加密省略
  return key + val;
}
console.log(md5('name', 'Jane')); // nameJane

可索引接口：对数组、对象的约束

let arr1:Array<number> = [1, 2];
let arr2:string[] = ['12', '23'];

// ts 中可索引接口，对数组的约束
interface userArr {
  [index:number]:string;
}
let arr3:userArr = ['a', 'b'];
console.log(arr3[0]);
let arr4:userArr = [12, 34]; // 错误

//ts 中可索引接口，对对象的约束
interface userObj {
  [index:string]:string;
}
let obj1:userObj = {name: 'Jane'};
let obj2:userObj = {age: 12}; // 错误

类类型接口：对类的约束，和抽象类有点相似。类类型接口实现用关键字implements

interface Animal {
  name:string;
  eat (food:string):void;
}
class Dog implements Animal {
  name:string;
  constructor (name:string) {
    this.name = name;
  }
  eat (food:string):void {
    console.log(`${this.name}喜欢吃${food}`);
  }
}
let d = new Dog('小黑');
d.eat('骨头'); // 小黑喜欢吃骨头

扩展接口：接口可以继承接口

1.5 泛型

1.5.1 定义：泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

这段代码编译不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：

Array<any> 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 value 的类型，如下改造成泛型：

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

// 在调用的时候，可以指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算出来：
createArray(3, 'x'); // ['x', 'x', 'x']

1.5.2 多个类型参数：

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

1.5.3 泛型约束：

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

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

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}
loggingIdentity([7])
loggingIdentity(1) // 类型“number”的参数不能赋给类型“Lengthwise”的参数

2. TS装饰器

装饰器参数

类装饰器

方法装饰器

访问器装饰器

方法参数装饰器

属性装饰器

类的构造函数

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象

2.成员名字

3.成员的属性描述符

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象

2.成员的名字

3.成员的属性描述符

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象

2.参数的名字

3.参数在函数参数列表中的索引

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象

2.成员的名字

执行顺序：

有多个参数装饰器时：从最后一个参数依次向前执行
方法和方法参数中参数装饰器先执行。
类装饰器总是最后执行。
方法和属性装饰器，谁在前面谁先执行。因为参数属于方法一部分，所以参数会一直紧紧挨着方法执行。

3. Axios二次封装

type Method = 'GET' | 'POST' | 'PUT' | 'DELETE'
type ResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'

interface AxiosRequest {
  baseURL?: string
  url: string
  data?: any
  params?: any
  method?: Method
  headers?: any
  timeout?: number
  responseType?: ResponseType
}

interface CustomResponse {
  readonly status: boolean
  readonly message: string
  data: any
  origin?: any
}

import axios, { AxiosRequestConfig } from 'axios'

// 定义接口
interface PendingType {
  url?: string
  method?: Method
  params: any
  data: any
  cancel: Function
}

// 取消重复请求
const pending: Array<PendingType> = []
const CancelToken = axios.CancelToken

// axios 实例
const instance = axios.create({
  timeout: 10000,
  responseType: 'json',
})

// 移除重复请求
const removePending = (config: AxiosRequestConfig) => {
  for (const key in pending) {
    const item: number = +key
    const list: PendingType = pending[key]
    // 当前请求在数组中存在时执行函数体
    if (
      list.url === config.url &&
      list.method === config.method &&
      JSON.stringify(list.params) === JSON.stringify(config.params) &&
      JSON.stringify(list.data) === JSON.stringify(config.data)
    ) {
      // 执行取消操作
      list.cancel('操作太频繁，请稍后再试')
      // 从数组中移除记录
      pending.splice(item, 1)
    }
  }
}

// 添加请求拦截器
instance.interceptors.request.use(
  (request: any) => {
    // TODO: handle loading

    removePending(request)
    request.cancelToken = new CancelToken((c) => {
      pending.push({
        url: request.url,
        method: request.method,
        params: request.params,
        data: request.data,
        cancel: c,
      })
    })
    return request
  },
  (error: any) => {
    return Promise.reject(error)
  },
)
// 添加响应拦截器
instance.interceptors.response.use(
  (response: any) => {
    removePending(response.config)

    const errorCode = response?.data?.errorCode
    switch (errorCode) {
      case '401':
        // 根据errorCode，对业务做异常处理(和后端约定)
        break
      default:
        break
    }

    return response
  },
  (error: any) => {
    const response = error.response

    // 根据返回的http状态码做不同的处理
    switch (response?.status) {
      case 401:
        // token失效
        break
      case 403:
        // 没有权限
        break
      case 500:
        // 服务端错误
        break
      case 503:
        // 服务端错误
        break
      default:
        break
    }

    return Promise.reject(response || { message: error.message })
  },
)

class BaseHttp {
  // 外部传入的baseUrl
  protected baseURL: string = process.env.VUE_APP_BaseURL as string
  // 自定义header头
  protected headers: object = {
    ContentType: 'application/json;charset=UTF-8',
  }

  private apiAxios({
    baseURL = this.baseURL,
    headers = this.headers,
    method,
    url,
    data,
    params,
    responseType,
  }: AxiosRequest): Promise<CustomResponse> {
    return new Promise((resolve, reject) => {
      instance({
        baseURL,
        headers,
        method,
        url,
        params,
        data,
        responseType,
      })
        .then((res: any) => {
          // 200:服务端业务处理正常结束
          if (res.status === 200) {
            // TODO ...
            // resolve({});
          } else {
            resolve({
              status: false,
              message: res.data?.errorMessage || url + '请求失败',
              data: null,
            })
          }
        })
        .catch((err: any) => {
          const message = err?.data?.errorMessage || err?.message || url + '请求失败'
          // eslint-disable-next-line
                reject({ status: false, message, data: null});
        })
    })
  }

  /**
   * GET类型的网络请求
   */
  protected getReq({ baseURL, headers, url, data, params, responseType }: AxiosRequest) {
    return this.apiAxios({
      baseURL,
      headers,
      method: 'GET',
      url,
      data,
      params,
      responseType,
    })
  }

  /**
   * POST类型的网络请求
   */
  protected postReq({ baseURL, headers, url, data, params, responseType }: AxiosRequest) {
    return this.apiAxios({ baseURL, headers, method: 'POST', url, data, params, responseType })
  }

  /**
   * PUT类型的网络请求
   */
  protected putReq({ baseURL, headers, url, data, params, responseType }: AxiosRequest) {
    return this.apiAxios({ baseURL, headers, method: 'PUT', url, data, params, responseType })
  }

  /**
   * DELETE类型的网络请求
   */
  protected deleteReq({ baseURL, headers, url, data, params, responseType }: AxiosRequest) {
    return this.apiAxios({ baseURL, headers, method: 'DELETE', url, data, params, responseType })
  }
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)