问题及实战
- 你感觉应用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 }) } }