乐趣区

关于javascript: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){// ...}
  1. 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]
  1. 如何基于一个已有类型,扩大出一个大部分内容类似,然而局部区别的类型?

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

通过泛型!!!

  1. 什么是泛型?泛型的具体应用?

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

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

  type TestA = Test<string>; 
  // {userId: string}
  type TestB = Test<number>; 
  // {userId: number}
  1. 用装璜器实现一个计算函数运行工夫的逻辑
  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;
  }
  1. 缓存的装璜器
  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;
  }
  1. 实现一个路由跳转,通过 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
       })
     }
      }
退出移动版