TypeScript 技巧

冷漠的爱 發表於 2019-10-9 09:56:00

前言
很早以前就尝试过使用 TypeScript 来进行日常编码，但自己对静态类型语言的了解并不深入，再加上 TypeScript 的类型系统有着一定的复杂度，因此感觉自己并没有发挥好这门语言的优势，使代码变得更具可读性与可维护性。于是这几天便想着好好研究下这门语言，希望能够总结出一些特别的语言特性与实用技巧。
<h2>操作符</h2>
typeof - 获取变量的类型
<pre><code>const colors = {   red: 'red',   blue: 'blue' } // type res = { red: string; blue: string } type res = typeof colors </code></pre>
keyof - 获取类型的键
<pre><code>const data = {   a: 3,   hello: 'world' } // 类型保护 function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {   return o } get(data, 'a') // 3 get(data, 'b') // Error </code></pre>
组合 typeof 与 keyof - 捕获键的名称
<pre><code>const colors = {   red: 'red',   blue: 'blue' } type Colors = keyof typeof colors let color: Colors // 'red' | 'blue' color = 'red' // ok color = 'blue' // ok color = 'anythingElse' // Error </code></pre>
in - 遍历键名
<pre><code>interface Square {   kind: 'square'   size: number } // type res = (radius: number) => { kind: 'square'; size: number } type res = (radius: number) => { : Square } </code></pre>
<h2>特殊类型</h2>
嵌套接口类型
<pre><code>interface Producer {   name: string   cost: number   production: number } interface Province {   name: string   demand: number   price: number   producers: Producer[] } let data: Province = {   name: 'Asia',   demand: 30,   price: 20,   producers: [     { name: 'Byzantium', cost: 10, production: 9 },     { name: 'Attalia', cost: 12, production: 10 },     { name: 'Sinope', cost: 10, production: 6 }   ] } </code></pre>
<pre><code>interface Play {   name: string   type: string } interface Plays {   : Play } let plays: Plays = {   'hamlet': { name: 'Hamlet', type: 'tragedy' },   'as-like': { name: 'As You Like It', type: 'comedy' },   'othello': { name: 'Othello', type: 'tragedy' } } </code></pre>
条件类型
<pre><code>type isBool<T> = T extends boolean ? true : false // type t1 = false type t1 = isBool<number> // type t2 = true type t2 = isBool<false> </code></pre>
字典类型
<pre><code>interface Dictionary<T> {   : T } const data: Dictionary<number> = {   a: 3,   b: 4, } </code></pre>
infer - 延迟推断类型
<pre><code>type ParamType<T> = T extends (param: infer P) => any ? P : T interface User {   name: string   age: number } type Func = (user: User) => void type Param = ParamType<Func> // Param = User type AA = ParamType<string> // string </code></pre>
<pre><code>type ElementOf<T> = T extends Array<infer E> ? E : never type TTuple =  type ToUnion = ElementOf<TTuple> // string | number </code></pre>
<h2>常用技巧</h2>
使用 const enum 维护常量列表
<pre><code>const enum STATUS {   TODO = 'TODO',   DONE = 'DONE',   DOING = 'DOING' } function todos(status: STATUS): Todo[] {   // ... } todos(STATUS.TODO) </code></pre>
Partial & Pick
<pre><code>type Partial<T> = {   ?: T } type Pick<T, K extends keyof T> = {   : T } interface User {   id: number   age: number   name: string } // type PartialUser = { id?: number; age?: number; name?: string } type PartialUser = Partial<User> // type PickUser = { id: number; age: number } type PickUser = Pick<User, 'id'|'age'> </code></pre>
Exclude & Omit
<pre><code>type Exclude<T, U> = T extends U ? never : T // type A = 'a' type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'> </code></pre>
<pre><code>type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>> interface User {   id: number   age: number   name: string } // type PickUser = { age: number; name: string } type OmitUser = Omit<User, 'id'> </code></pre>
巧用 never 类型
<pre><code>type FunctionPropertyNames<T> = { : T extends Function ? K : never } type NonFunctionPropertyNames<T> = { : T extends Function ? never : K } interface Part {   id: number   name: string   subparts: Part[]   updatePart(newName: string): void } type T40 = FunctionPropertyNames<Part>  // 'updatePart' type T41 = NonFunctionPropertyNames<Part>  // 'id' | 'name' | 'subparts' </code></pre>
混合类 ( mixins )
<pre><code>// 所有 mixins 都需要 type Constructor<T = {}> = new (...args: any[]) => T // 添加属性的混合例子 function TimesTamped<TBase extends Constructor>(Base: TBase) {   return class extends Base {     timestamp = Date.now()   } } // 添加属性和方法的混合例子 function Activatable<TBase extends Constructor>(Base: TBase) {   return class extends Base {     isActivated = false     activate() {       this.isActivated = true     }     deactivate() {       this.isActivated = false     }   } } // 简单的类 class User {   name = '' } // 添加 TimesTamped 的 User const TimestampedUser = TimesTamped(User) // 添加 TimesTamped 和 Activatable 的类 const TimestampedActivatableUser = TimesTamped(Activatable(User)) // 使用组合类 const timestampedUserExample = new TimestampedUser() console.log(timestampedUserExample.timestamp) const timestampedActivatableUserExample = new TimestampedActivatableUser() console.log(timestampedActivatableUserExample.timestamp) console.log(timestampedActivatableUserExample.isActivated) </code></pre>
<h2>类型转换</h2>
下面来求解一道 LeetCode 上关于 TypeScript 的面试题，题目的大致内容为有一个叫做 EffectModule 的类，它的实现如下：
<pre><code>interface Action<T> {   payload?: T   type: string } class EffectModule {   count = 1   message = 'hello!'   delay(input: Promise<number>) {     return input.then(i => ({       payload: `hello ${i}!`,       type: 'delay'     }))   }   setMessage(action: Action<Date>) {     return {       payload: action.payload.getMilliseconds(),       type: 'set-message'     }   } } </code></pre>
现在有一个 connect 函数接收 EffectModule 类的实例对象作为参数，且该函数会返回新的对象，相关的实现如下：
<pre><code>const connect: Connect = _m => ({   delay: (input: number) => ({     type: 'delay',     payload: `hello ${input}`   }),   setMessage: (input: Date) => ({     type: 'set-message',     payload: input.getMilliseconds()   }) }) type Connected = {   delay(input: number): Action<string>   setMessage(action: Date): Action<number> } const connected: Connected = connect(new EffectModule()) </code></pre>
可以看到在调用 connect 函数之后，返回的新对象只包含 EffectModule 的同名方法，并且方法的类型签名改变了：
<pre><code>asyncMethod<T, U>(input: Promise<T>): Promise<Action>  变成了 asyncMethod<T, U>(input: T): Action  </code></pre>
<pre><code>syncMethod<T, U>(action: Action<T>): Action  变成了 syncMethod<T, U>(action: T): Action </code></pre>
现在就需要我们来编写 <code>type Connect = (module: EffectModule) => any</code> 使得最终的编译能够顺利通过。不难看出，这个题目主要考察两点：
<ul class="list-paddingleft-2">
<li>
从类中挑选出函数
</li>
<li>
巧用 infer 进行类型转换
</li>
</ul>
下面是我解这道题的答案：
<pre><code>type FuncName<T> = { : T extends Function ? P : never } type Middle = { : EffectModule } type Transfer<T> = {   : T extends (input: Promise<infer J>) => Promise<infer K>   ? (input: J) => K   : T extends (action: Action<infer J>) => infer K   ? (input: J) => K   : never } type Connect = (module: EffectModule) => { : Transfer<Middle> } </code></pre>
<h2>控制反转与依赖注入</h2>
控制反转 ( Inversion of Control ) 与依赖注入 ( Dependency Injection ) 是面向对象编程中十分重要的思想和法则。维基百科上给出的解释是 IoC 能够降低计算机代码之间的耦合度，DI 代表的则是在一个对象被创建时，注入该对象所依赖的所有对象的过程。前端框架 Angular 与基于 Node.js 的后端框架 Nest 都引用了这一思想。对于这两个概念的具体阐述在这里就不再展开，但读者可以看看这两篇文章。下面我们基于 Angular 5 以前的 Dependency Injection 来实现简版的控制反转与依赖注入。
首先让我们来编写一段相关的测试代码：
<pre><code>import { expect } from 'chai' import { Injectable, createInjector } from './injection' class Engine {} class DashboardSoftware {} @Injectable() class Dashboard {   constructor(public software: DashboardSoftware) {} } @Injectable() class Car {   constructor(public engine: Engine) {} } @Injectable() class CarWithDashboard {   constructor(public engine: Engine, public dashboard: Dashboard) {} } class NoAnnotations {   constructor(_secretDependency: any) {} } describe('injector', () => {   it('should instantiate a class without dependencies', () => {     const injector = createInjector()     const engine = injector.get(Engine)     expect(engine instanceof Engine).to.be.true   })   it('should resolve dependencies based on type information', () => {     const injector = createInjector()     const car = injector.get(Car)     expect(car instanceof Car).to.be.true     expect(car.engine instanceof Engine).to.be.true   })   it('should resolve nested dependencies based on type information', () => {     const injector = createInjector()     const _CarWithDashboard = injector.get(CarWithDashboard)     expect(_CarWithDashboard.dashboard.software instanceof DashboardSoftware).to.be.true   })   it('should cache instances', () => {     const injector = createInjector()     const e1 = injector.get(Engine)     const e2 = injector.get(Engine)     expect(e1).to.equal(e2)   })   it('should show the full path when no provider', () => {     const injector = createInjector()     expect(() => injector.get(CarWithDashboard)).to.throw('No provider for DashboardSoftware!')   })   it('should throw when no type', () => {     expect(() => createInjector()).to.throw(       'Make sure that NoAnnotations is decorated with Injectable.'     )   })   it('should throw when no provider defined', () => {     const injector = createInjector([])     expect(() => injector.get('NonExisting')).to.throw('No provider for NonExisting!')   }) }) </code></pre>
可以看到我们要实现的核心功能有三个：
<ul class="list-paddingleft-2">
<li>
根据提供的类创建 IoC 容器并且能够管理类之间的依赖关系
</li>
<li>
在通过 IoC 容器获取类的实例对象时注入相关的依赖对象
</li>
<li>
实现多级依赖与处理边缘情况
</li>
</ul>
首先来实现最简单的 <code>@Injectable</code> 装饰器：
<pre><code>export const Injectable = (): ClassDecorator => target => {   Reflect.defineMetadata('Injectable', true, target) } </code></pre>
然后我们来实现根据提供的 provider 类创建能够管理类之间依赖关系的 IoC 容器：
<pre><code>abstract class ReflectiveInjector implements Injector {   abstract get(token: any): any   static resolve(providers: Provider[]): ResolvedReflectiveProvider[] {     return providers.map(resolveReflectiveProvider)   }   static fromResolvedProviders(providers: ResolvedReflectiveProvider[]): ReflectiveInjector {     return new ReflectiveInjector_(providers)   }   static resolveAndCreate(providers: Provider[]): ReflectiveInjector {     const resolvedReflectiveProviders = ReflectiveInjector.resolve(providers)     return ReflectiveInjector.fromResolvedProviders(resolvedReflectiveProviders)   } } class ReflectiveInjector_ implements ReflectiveInjector {   _providers: ResolvedReflectiveProvider[]   keyIds: number[]   objs: any[]   constructor(_providers: ResolvedReflectiveProvider[]) {     this._providers = _providers     const len = _providers.length     this.keyIds = new Array(len)     this.objs = new Array(len)     for (let i = 0; i < len; i++) {       this.keyIds = _providers.key.id       this.objs = undefined     }   }   // ... } function resolveReflectiveProvider(provider: Provider): ResolvedReflectiveProvider {   return new ResolvedReflectiveProvider_(     ReflectiveKey.get(provider),     resolveReflectiveFactory(provider)   ) } function resolveReflectiveFactory(provider: Provider): ResolvedReflectiveFactory {   let factoryFn: Function   let resolvedDeps: ReflectiveDependency[]   factoryFn = factory(provider)   resolvedDeps = dependenciesFor(provider)   return new ResolvedReflectiveFactory(factoryFn, resolvedDeps) } function factory<T>(t: Type<T>): (args: any[]) => T {   return (...args: any[]) => new t(...args) } function dependenciesFor(type: Type<any>): ReflectiveDependency[] {   const params = parameters(type)   return params.map(extractToken) } function parameters(type: Type<any>) {   if (noCtor(type)) return []   const isInjectable = Reflect.getMetadata('Injectable', type)   const res = Reflect.getMetadata('design:paramtypes', type)   if (!isInjectable) throw noAnnotationError(type)   return res ? res : [] } export const createInjector = (providers: Provider[]): ReflectiveInjector_ => {   return ReflectiveInjector.resolveAndCreate(providers) as ReflectiveInjector_ } </code></pre>
从上面的代码不难看出当 IoC 容器创建时会将提供的每个类以及该类所依赖的其他类作为 <code>ResolvedReflectiveProvider_</code> 的实例对象存储在容器中，对外返回的则是容器对象 <code>ReflectiveInjector_</code> 。
接下来让我们来实现通过 IoC 容器获取类的实例对象的逻辑：
<pre><code>class ReflectiveInjector_ implements ReflectiveInjector {   // ...   get(token: any): any {     return this._getByKey(ReflectiveKey.get(token))   }   private _getByKey(key: ReflectiveKey, isDeps?: boolean) {     for (let i = 0; i < this.keyIds.length; i++) {       if (this.keyIds === key.id) {         if (this.objs === undefined) {           this.objs = this._new(this._providers)         }         return this.objs       }     }     let res = isDeps ? (key.token as Type).name : key.token     throw noProviderError(res)   }   _new(provider: ResolvedReflectiveProvider) {     const resolvedReflectiveFactory = provider.resolvedFactory     const factory = resolvedReflectiveFactory.factory     let deps = resolvedReflectiveFactory.dependencies.map(dep => this._getByKey(dep.key, true))     return factory(...deps)   } } </code></pre>
可以看到当我们调用 <code>injector.get()</code> 方法时 IoC 容器会根据给定类查找对应的 <code>ReflectiveInjector_</code> 对象，找到之后便会在实例化给定类之前注入该类依赖的所有类的实例对象，最后再返回给定类的实例化对象。
现在我们再回头看上文的代码，多级依赖的功能其实早已实现。虽然在初始化 loC 容器时我们只能找到某个类的相关依赖，无法再通过依赖类找到更深层级的依赖，但是我们对提供的每个类遍历执行了相同的操作，因此很自然的就实现了多个类之间的依赖。
对于边缘情况我们也做了相应的处理，比如提供的 provider 类为空数组，类并没有被 <code>@Injectable</code> 装饰器修饰，提供的类并不完整等。对应上文的代码为：
<pre><code>let res = isDeps ? (key.token as Type).name : key.token throw noProviderError(res) </code></pre>
<pre><code>if (!isInjectable) throw noAnnotationError(type) </code></pre>
至此，控制反转与依赖注入的核心功能就实现的差不多了，剩下的就是一些接口定义代码，还有就是 <code>ReflectiveKey</code> 类的实现，它的大致作用其实就是基于 ES6 中的 Map 存储 provider 类。 
来源：https://www.cnblogs.com/cczlovexw/p/11639856.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript 技巧