关于javascript:TypeScript-问题及实战

10次阅读

共计 2593 个字符，预计需要花费 7 分钟才能阅读完成。

你感觉应用 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){// ...}

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]

如何基于一个已有类型，扩大出一个大部分内容类似，然而局部区别的类型？

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

通过泛型！！！

什么是泛型？泛型的具体应用？

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

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

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

用装璜器实现一个计算函数运行工夫的逻辑

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

缓存的装璜器

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

实现一个路由跳转，通过 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
   })
 }
  }

正文完