TypeScript - 问题及实战

问题及实战

1. 你觉得使用TS的好处是什么？
   1.1 Ts是JS的加强版，给JS添加了可选的静态类型和基于类的面向对象编程，拓展了JS语法，TS的功能比JS只多不少
   1.2 TS面向对象的编程语言，包含类和接口的概念
   1.3 TS在开发阶段就能给出编译错误，而JS则要在运行时才能暴露
   1.4 是一种强类型语言，你可以明确的知道各种数据类型，代码可读性极强，几乎每个人很快理解
   1.5 TS中有很多很方便的特性，比如可选链 // option chain

  const obj = response;
  if(obj && obj.aa && obj.aa.bb){
    // ...
  }

  if(obj?.aa?.bb){
    // ...
  }

2. type 和 interface 的异同？

用interface来描述数据结构，用type来描述类型

2.1 都支持描述一个对象或者函数

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

2.2 都允许扩展 extends

  type Name = {
    name: string;
  }

  interface User extends Name {

  }

2.3 只有type可以做的事情
type可以申请基本类型别名，联合类型，元祖等类型

  type Name = string;

  interface Dog {
    wong();
  }
  interface Cat {
    miao();
  }
  type Pet = Dog | Cat;

  type PetList = [Dog, Cat]

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

Pick Omit

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

  type Sex = Pick<Test, 'sex'> // 保证了Sex始终是number
  const a: Sex = {sex: 1};

  type WithoutSex = Omit<Test, 'sex'>;
  const b: WithoutSex = {name: 'cxx', height: 'xxxx'};

通过泛型！！！

4. 什么是泛型？泛型的具体使用？

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

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

  type TestA = Test<string>; 
  // { userId: string }
  type TestB = Test<number>; 
  // { userId: number }

5. 用装饰器实现一个计算函数运行时间的逻辑

  export function measure(target: any, name: any, descriptor: any){
    const oldValue = descriptor.value;

    descriptor.value = async function () {
      const start = Date.now();
      const res = await oldValue.apply(this, arguments);

      console.log(`${name}执行耗时 ${Date.now() - start}`);
      return res;
    }

    return descriptor;
  }

6. 缓存的装饰器

  const cacheMap = new Map();

  export function measure(target: any, name: any, descriptor: any){
    const oldValue = descriptor.value;

    descriptor.value = async function (...args: any) {
      // 函数名 + 参数来保证缓存key的唯一性
      const cacheKey = name + JSON.stringfiy(args);
      if(!cacheMap.get(cacheKey)){
        // Promise.resolve将val执行结果强行包装为promise
        // 报错 catch的时候, 清空缓存. 下次重新执行
        const cacheValue = Promise.resolve(val.apply(this, arg).catch(() => cacheMap.set(cacheKey, null)));
        cacheMap.set(cacheKey, cacheValue)
      }
      return cacheMap.get(cacheKey)
    }

    return descriptor;
  }

7. 实现一个路由跳转，通过TS约束参数的routerHelper

     // router / index.ts
     export enum RouterPath {
    Index = '/',
    About = '/about',
    User = '/user',
     }
   
     // routerHelper
     import { Dictionary } from 'vue-router/types/router';
     import Router, { RoutePath } from '../router';
   
     export type BaseRouteType = Dictionary<string>;
   
     export interface IndexParam extends BaseRouteType {
    name: string;
     }
     export interface AboutParam extends BaseRouteType {
    testName: string;
     }
     export interface UserParam extends BaseRouteType {
    userId: string;
     }
   
     export interface  ParamsMap {
    [RoutePath.Index]: IndexParam;
    [RoutePath.About]: AboutParam;
    [RoutePath.User]: UserParam;
     }
   
     export class RouterHelper {
    public static replace<T extends RouterPath>(routePath: T, params: ParamsMap[T]){
      Router.replace({
        path: routePath,
        query: params
      })
    }
    
    public static push<T extends RouterPath>(routePath: T, params: ParamsMap[T]){
      Router.push({
        path: routePath,
        query: params
      })
    }
     }