├── .eslintignore
├── .vscode
    ├── settings.json
    └── launch.json
├── src
    ├── merge
    │   ├── interface-merge-a.ts
    │   ├── module-augmentation-a.ts
    │   ├── global-augmentation.ts
    │   ├── module-augmentation-b.ts
    │   ├── namespace-merge-a.ts
    │   ├── interface-merge-b.ts
    │   ├── namespace-merge-b.ts
    │   └── function-class-interface-merge.ts
    ├── feat-4.0
    │   ├── concat.ts
    │   └── tail.ts
    ├── InversifyJS
    │   ├── index.ts
    │   ├── inversify.config.ts
    │   ├── interfaces.ts
    │   └── entities.ts
    ├── class-chaining.ts
    ├── partial-generic.ts
    ├── merge-functions.ts
    ├── getter-type-easy.ts
    ├── select-property
    │   ├── select-readonly.ts
    │   ├── select-data-property.ts
    │   ├── required-keys.ts
    │   └── select-feature.ts
    ├── polymorphic-button.tsx
    ├── repeat-string.ts
    ├── vue3-ref.ts
    ├── getter-type-returntype.ts
    ├── union-to-intersection.ts
    ├── vue.ts
    ├── tail.ts
    ├── getter-type.ts
    ├── exhaustiveness-checking.ts
    ├── decorator
    │   ├── param-decorator.ts
    │   ├── method-decorator.ts
    │   └── log-property.ts
    ├── tree-property.ts
    ├── create-reversed-map.ts
    ├── flatten-object.ts
    ├── function-property-names.ts
    ├── ioc-loader
    │   └── good-case.ts
    ├── vuex.ts
    ├── type-brand.ts
    ├── polymorphic-this.ts
    ├── const-assertions.ts
    ├── type-vs-interface.ts
    ├── discriminated-unions-select.ts
    ├── dispatch-conditional-types-with-builtin-types.ts
    ├── better-scroll-plugins.ts
    ├── covariance-contravariance
    │   └── index.ts
    ├── feat-4.1
    │   └── vuex.ts
    ├── distribute-conditional-type.ts
    ├── dispatch-conditional-types.ts
    ├── reflect-metadata
    │   ├── server.ts
    │   └── reflect-metadata.ts
    ├── mixin-classes.ts
    ├── connect-leetcode-hire.ts
    └── state-machine.ts
├── global.d.ts
├── .gitignore
├── index.html
├── tsconfig.json
├── .eslintrc.js
├── package.json
└── README.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules/typescript/lib"
3 | }


--------------------------------------------------------------------------------
/src/merge/interface-merge-a.ts:
--------------------------------------------------------------------------------
1 | interface Box {
2 |   height: number;
3 |   width: number;
4 |   create(a: string): string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/merge/module-augmentation-a.ts:
--------------------------------------------------------------------------------
1 | // observable.ts
2 | export class Observable<T> {
3 |   // ... implementation left as an exercise for the reader ...
4 | }
5 | 


--------------------------------------------------------------------------------
/src/feat-4.0/concat.ts:
--------------------------------------------------------------------------------
1 | type Arr = readonly any[];
2 | 
3 | function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] {
4 |   return [...arr1, ...arr2];
5 | }
6 | 
7 | const arr = concat([1] as const, [2, 3] as const);
8 | 


--------------------------------------------------------------------------------
/src/InversifyJS/index.ts:
--------------------------------------------------------------------------------
1 | import { myContainer } from "./inversify.config";
2 | import { Warrior } from "./interfaces";
3 | 
4 | const ninja = myContainer.get<Warrior>(Warrior);
5 | 
6 | console.log(ninja.fight());
7 | console.log(ninja.sneak());
8 | 


--------------------------------------------------------------------------------
/src/merge/global-augmentation.ts:
--------------------------------------------------------------------------------
 1 | // observable.ts
 2 | export class Observable<T> {
 3 |   // ... still no implementation ...
 4 | }
 5 | 
 6 | declare global {
 7 |   interface Array<T> {
 8 |     toObservable(): Observable<T>;
 9 |   }
10 | }
11 | 
12 | const a = [];
13 | 
14 | a.toObservable();
15 | 


--------------------------------------------------------------------------------
/src/class-chaining.ts:
--------------------------------------------------------------------------------
 1 | class PluginSlide {
 2 |   next() {}
 3 |   prev() {}
 4 | }
 5 | 
 6 | class BScroll {
 7 |   scroll() {}
 8 | 
 9 |   use<T>(pluginInstance: T): this & T {
10 |     return Object.assign(this, pluginInstance);
11 |   }
12 | }
13 | 
14 | new BScroll().use(new PluginSlide()).next();
15 | 


--------------------------------------------------------------------------------
/src/merge/module-augmentation-b.ts:
--------------------------------------------------------------------------------
 1 | // map.ts
 2 | import { Observable } from "./module-augmentation-a";
 3 | 
 4 | declare module "./module-augmentation-a" {
 5 |   interface Observable<T> {
 6 |     map<U>(f: (x: T) => U): Observable<U>;
 7 |   }
 8 | }
 9 | 
10 | let ob: Observable<number>;
11 | 
12 | ob.map;
13 | 


--------------------------------------------------------------------------------
/global.d.ts:
--------------------------------------------------------------------------------
 1 | // 扩展全局模块 这里可以放一些全局声明
 2 | declare global {
 3 |   type UnionToIntersection<U> = (U extends any
 4 |   ? (k: U) => void
 5 |   : never) extends (k: infer I) => void
 6 |     ? I
 7 |     : never;
 8 | }
 9 | 
10 | // 注意: 修改"全局声明"必须在模块内部, 所以至少要有 export{}字样
11 | // 不然会报错❌: 全局范围的扩大仅可直接嵌套在外部模块中或环境模块声明中
12 | export {};
13 | 


--------------------------------------------------------------------------------
/src/partial-generic.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 如果泛型中有一部分是自动推导的，那么就不能再另外定义手动传入的泛型了。
 3 |  * 只能暂时用高阶函数的方式把两个泛型拆开，本例中 T 是自动推导得出，E 是手动传入。
 4 |  */
 5 | function createWithExtra<E>() {
 6 |   return function<T>(obj: T) {
 7 |     return obj as T & {
 8 |       extra: E;
 9 |     };
10 |   };
11 | }
12 | 
13 | const obj = createWithExtra<{ a: 1 }>()({ foo: "bar" });
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store  
 2 | ._*  
 3 | .cache  
 4 | .project  
 5 | .settings  
 6 | .tmproj  
 7 | *.esproj  
 8 | *.sublime-project  
 9 | *.sublime-workspace  
10 | nbproject  
11 | thumbs.db  
12 | *.iml  
13 | 
14 | # Folders to ignore  
15 | .hg  
16 | .svn  
17 | .CVS  
18 | .idea  
19 | node_modules/  
20 | jscoverage_lib/  
21 | bower_components/  
22 | dist/


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   
11 |   <script src="./reflect-metadata.js"></script>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/src/merge/namespace-merge-a.ts:
--------------------------------------------------------------------------------
 1 | namespace Animals {
 2 |   export const haveMuscles = true;
 3 | 
 4 |   export class Zebra {}
 5 | 
 6 |   export class Dog {}
 7 | 
 8 |   export interface Create {
 9 |     (a: string): number;
10 |   }
11 | 
12 |   // 仅能在当前namespace里使用haveMuscles变量
13 |   export function getHaveMuscles() {
14 |     return haveMuscles;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/feat-4.0/tail.ts:
--------------------------------------------------------------------------------
 1 | function tail<T extends any[]>(arr: readonly [any, ...T]) {
 2 |   const [_ignored, ...rest] = arr;
 3 |   return rest;
 4 | }
 5 | 
 6 | const myTuple = [1, 2, 3, 4] as const;
 7 | const myArray = ["hello", "world"];
 8 | 
 9 | // type [2, 3, 4]
10 | const r1 = tail(myTuple);
11 | 
12 | // type [2, 3, ...string[]]
13 | const r2 = tail([...myTuple, ...myArray] as const);
14 | 


--------------------------------------------------------------------------------
/src/merge/interface-merge-b.ts:
--------------------------------------------------------------------------------
 1 | // interface合并必须保证某个 key 的类型是独一无二的
 2 | // 可以有重复的 key 但类型必须与合并前相同
 3 | interface Box {
 4 |   scale: number;
 5 |   create(a: number): number;
 6 | }
 7 | 
 8 | // 和a文件里的合并了
 9 | const box: Box = {
10 |   height: 5,
11 |   width: 6,
12 |   scale: 10,
13 |   create(a) {
14 |     return a;
15 |   }
16 | };
17 | 
18 | // 函数重载合并成功
19 | box.create(2);
20 | box.create("2");
21 | 


--------------------------------------------------------------------------------
/src/merge-functions.ts:
--------------------------------------------------------------------------------
 1 | let a = () => ({ a: 1, b: 2 })
 2 | let b = () => ({ x: 1, y: 2 })
 3 | let c = () => ({ z: 1, k: 2 })
 4 | 
 5 | 
 6 | type TUnionToIntersection<U> = (
 7 |     U extends any ? (k: U) => void : never
 8 | ) extends (k: infer I) => void
 9 |     ? I
10 |     : never;
11 | 
12 | let merge = <T extends ((args: any) => any)[]>(...funcs: T): TUnionToIntersection<ReturnType<T[number]>> => {
13 |     return {} as any
14 | }
15 | 


--------------------------------------------------------------------------------
/src/InversifyJS/inversify.config.ts:
--------------------------------------------------------------------------------
 1 | import { Container } from "inversify";
 2 | import { Warrior, Weapon, ThrowableWeapon } from "./interfaces";
 3 | import { Ninja, Katana, Shuriken } from "./entities";
 4 | 
 5 | const myContainer = new Container();
 6 | myContainer.bind<Warrior>(Warrior).to(Ninja);
 7 | myContainer.bind<Weapon>(Weapon).to(Katana);
 8 | myContainer.bind<ThrowableWeapon>(ThrowableWeapon).to(Shuriken);
 9 | 
10 | export { myContainer };
11 | 


--------------------------------------------------------------------------------
/src/InversifyJS/interfaces.ts:
--------------------------------------------------------------------------------
 1 | // 定义服务对象标识
 2 | export const Warrior = Symbol.for("Warrior");
 3 | export const Weapon = Symbol.for("Weapon");
 4 | export const ThrowableWeapon = Symbol.for("ThrowableWeapon");
 5 | 
 6 | export interface Warrior {
 7 |   fight(): string;
 8 |   sneak(): string;
 9 |   eat(): void;
10 | }
11 | 
12 | export interface Weapon {
13 |   hit(): string;
14 | }
15 | 
16 | export interface ThrowableWeapon {
17 |   throw(): string;
18 | }
19 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |       {
 5 |           "name": "Current TS File",
 6 |           "type": "node",
 7 |           "request": "launch",
 8 |           "program": "/Users/shanshihao/.nvm/versions/node/v10.15.3/bin/ts-node",
 9 |           "args": [
10 |               "${relativeFile}"
11 |           ],
12 |           "cwd": "${workspaceRoot}",
13 |           "protocol": "inspector"
14 |       }
15 |   ]
16 | }


--------------------------------------------------------------------------------
/src/getter-type-easy.ts:
--------------------------------------------------------------------------------
 1 | interface Option<G> {
 2 |   getters: {
 3 |     [K in keyof G]: () => G[K];
 4 |   };
 5 | }
 6 | 
 7 | type Store<G extends {}> = {
 8 |   [K in keyof G]: G[K];
 9 | };
10 | 
11 | const create = <G>(option: Option<G>): Store<G> => {
12 |   return {} as any;
13 | };
14 | 
15 | const store = create({
16 |   getters: {
17 |     count() {
18 |       return 1 + 1;
19 |     }
20 |   }
21 | });
22 | 
23 | // number
24 | const count = store.count;
25 | 
26 | export { count };
27 | 


--------------------------------------------------------------------------------
/src/select-property/select-readonly.ts:
--------------------------------------------------------------------------------
 1 | type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends <
 2 |   T
 3 | >() => T extends Y ? 1 : 2
 4 |   ? A
 5 |   : B;
 6 | 
 7 | type ReadonlyKeys<T> = {
 8 |   [P in keyof T]-?: IfEquals<
 9 |     { [Q in P]: T[P] },
10 |     { -readonly [Q in P]: T[P] },
11 |     never,
12 |     P
13 |   >;
14 | }[keyof T];
15 | 
16 | type A = {
17 |   readonly a: string;
18 |   b: number;
19 | };
20 | 
21 | // "a"
22 | type B = ReadonlyKeys<A>;
23 | 


--------------------------------------------------------------------------------
/src/polymorphic-button.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | interface ButtonProps {
 4 |   tagName: "a" | "button";
 5 | }
 6 | 
 7 | function Button<P extends ButtonProps>({
 8 |   tagName: TagName,
 9 |   ...props
10 | }: P & UnionToIntersection<JSX.IntrinsicElements[P["tagName"]]>) {
11 |   return <TagName {...props} />;
12 | }
13 | 
14 | const But = (
15 |   <Button
16 |     tagName={"a"}
17 |     ref={(x: HTMLAnchorElement) => x.href.toLowerCase()} // 🎉
18 |   />
19 | );
20 | 
21 | export { But };
22 | 


--------------------------------------------------------------------------------
/src/repeat-string.ts:
--------------------------------------------------------------------------------
 1 | type StringToTuple<
 2 |   S extends string,
 3 |   T extends string[] = []
 4 | > = S extends `${infer R}${infer Q}`
 5 |   ? "" extends Q
 6 |     ? [...T, R]
 7 |     : StringToTuple<Q, [...T, R]>
 8 |   : any;
 9 | 
10 | type Head<T extends string> = T extends `${infer R}${infer Q}` ? R : never;
11 | 
12 | type Repeat<T extends string, C extends number> = C extends 0
13 |   ? ""
14 |   : StringToTuple<T>["length"] extends C
15 |   ? T
16 |   : Repeat<`${T}${Head<T>}`, C>;
17 | 
18 | type T = Repeat<"a", 3>;
19 | 


--------------------------------------------------------------------------------
/src/merge/namespace-merge-b.ts:
--------------------------------------------------------------------------------
 1 | namespace Animals {
 2 |   export interface Legged {
 3 |     numberOfLegs: number;
 4 |   }
 5 | 
 6 |   export interface Create {
 7 |     (a: number): string;
 8 |   }
 9 | 
10 |   // 在合并前的命名空间export出的变量 可以在合并后通过点操作符找到
11 |   const has = Animals.haveMuscles;
12 | }
13 | 
14 | // merged from a
15 | Animals.Zebra;
16 | 
17 | let legged: Animals.Legged;
18 | 
19 | let create: Animals.Create;
20 | 
21 | // namespace里的函数interface重载成功
22 | create(2);
23 | create("2");
24 | 
25 | const haveMuscle = Animals.getHaveMuscles();
26 | 


--------------------------------------------------------------------------------
/src/vue3-ref.ts:
--------------------------------------------------------------------------------
 1 | type Ref<T> = {
 2 |   value: T;
 3 | };
 4 | 
 5 | const ref = <T>(value: T) => {
 6 |   return {
 7 |     value
 8 |   } as UnwrapRef<Ref<T>>;
 9 | };
10 | 
11 | const count = ref(ref(ref(2)));
12 | 
13 | count.value;
14 | 
15 | type UnwrapNestedRef<T> = {
16 |   ref: T extends Ref<infer V> ? UnwrapNestedRef<V> : T;
17 |   normal: T;
18 | }[T extends Ref<any> ? "ref" : "normal"];
19 | 
20 | type UnwrapRef<T> = T extends Ref<infer V>
21 |   ? V extends Ref<any>
22 |     ? UnwrapNestedRef<V>
23 |     : Ref<V>
24 |   : T;
25 | 
26 | export {};
27 | 


--------------------------------------------------------------------------------
/src/getter-type-returntype.ts:
--------------------------------------------------------------------------------
 1 | type GetterShape = { [K in PropertyKey]: (...args: any[]) => any };
 2 | 
 3 | type Option<G extends GetterShape> = {
 4 |   getters: G;
 5 | };
 6 | 
 7 | type Store<G extends GetterShape> = {
 8 |   [K in keyof G]: ReturnType<G[K]>;
 9 | };
10 | 
11 | const create = <G extends GetterShape>(option: Option<G>): Store<G> => {
12 |   return option as any;
13 | };
14 | 
15 | const store = create({
16 |   getters: {
17 |     count() {
18 |       return 1 + 1;
19 |     }
20 |   }
21 | });
22 | 
23 | // number
24 | const count = store.count;
25 | 
26 | export { count };
27 | 


--------------------------------------------------------------------------------
/src/union-to-intersection.ts:
--------------------------------------------------------------------------------
 1 | type MergeParameters<U> = (U extends any
 2 | ? (k: U) => void
 3 | : never) extends (k: infer I) => void
 4 |   ? I
 5 |   : never;
 6 | 
 7 | // 应用在mixin上
 8 | type Ctor<T> = { new (...args: any[]): T };
 9 | declare function mixin<T extends Ctor<any>[]>(
10 |   ...traits: T
11 | ): Ctor<UnionToIntersection<InstanceType<T[number]>>>;
12 | 
13 | class Flyable {
14 |   fly() {}
15 | }
16 | class Walkable {
17 |   walk() {}
18 | }
19 | 
20 | class Mixed extends mixin(Flyable, Walkable) {
21 |   test() {
22 |     this.fly(); // ok
23 |     this.walk(); // ok
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/vue.ts:
--------------------------------------------------------------------------------
 1 | type DataReturn<D> = {
 2 |   [Key in keyof D]: D[Key];
 3 | };
 4 | 
 5 | type Data<D> = () => DataReturn<D>;
 6 | 
 7 | type Computed<C, D> = {
 8 |   [Key in keyof C]: () => C[Key];
 9 | };
10 | 
11 | type Methods<M> = {
12 |   [Key in keyof M]: M[Key];
13 | };
14 | 
15 | interface Config<D, C> {
16 |   data: Data<D>;
17 |   computed: Computed<C, D>;
18 | }
19 | 
20 | declare function vue<D, C>(config: Config<D, C>): D & C;
21 | 
22 | const vm = vue({
23 |   data() {
24 |     return {
25 |       age: 1
26 |     };
27 |   },
28 |   computed: {
29 |     count() {
30 |       return vm.age + 1;
31 |     }
32 |   }
33 | });
34 | 


--------------------------------------------------------------------------------
/src/tail.ts:
--------------------------------------------------------------------------------
 1 | // ['1','2','3'] -> ['2','3']
 2 | type Tail<Tuple extends any[]> = ((...args: Tuple) => void) extends (
 3 |   a: any,
 4 |   ...args: infer T
 5 | ) => void
 6 |   ? T
 7 |   : never;
 8 | // ['1','2','3'] -> '1'
 9 | type Head<Tuple extends any[]> = Tuple extends [infer Result, ...any[]]
10 |   ? Result
11 |   : never;
12 | // (['2','3'],'1') -> ['1','2','3']
13 | type Unshift<Tuple extends any[], Element> = ((
14 |   a: Element,
15 |   ...args: Tuple
16 | ) => void) extends (...args: infer T) => void
17 |   ? T
18 |   : never;
19 | 
20 | type T1 = Tail<[1, 2, 3]>;
21 | 
22 | type T2 = Head<[1, 2, 3]>;
23 | 
24 | type T3 = Unshift<["2", "3"], "1">;
25 | 


--------------------------------------------------------------------------------
/src/getter-type.ts:
--------------------------------------------------------------------------------
 1 | interface Option<S, G> {
 2 |   state: S;
 3 |   getters: {
 4 |     [K in keyof G]: (state: S) => G[K];
 5 |   };
 6 | }
 7 | 
 8 | interface Dispatch<G, T extends keyof G> {
 9 |   (type: T): G[T];
10 | }
11 | 
12 | const create = <S, G, T extends keyof G>(
13 |   option: Option<S, G>
14 | ): Dispatch<G, T> => {
15 |   option;
16 |   return (() => {}) as any;
17 | };
18 | 
19 | const dispatch = create({
20 |   state: {
21 |     count: 1
22 |   },
23 |   getters: {
24 |     countPlus(state) {
25 |       return state.count + 1;
26 |     }
27 |   }
28 | });
29 | 
30 | // number
31 | const countPlus = dispatch("countPlus");
32 | 
33 | export { countPlus };
34 | 


--------------------------------------------------------------------------------
/src/exhaustiveness-checking.ts:
--------------------------------------------------------------------------------
 1 | interface Square {
 2 |   kind: "square";
 3 |   size: number;
 4 | }
 5 | interface Rectangle {
 6 |   kind: "rectangle";
 7 |   width: number;
 8 |   height: number;
 9 | }
10 | interface Circle {
11 |   kind: "circle";
12 |   radius: number;
13 | }
14 | 
15 | type Shape = Square | Rectangle | Circle;
16 | 
17 | function assertNever(x: never): never {
18 |   throw new Error("Unexpected object: " + x);
19 | }
20 | 
21 | function area(s: Shape) {
22 |   switch (s.kind) {
23 |     case "square":
24 |       return s.size * s.size;
25 |     case "rectangle":
26 |       return s.height * s.width;
27 |     default:
28 |       return assertNever(s); // error here if there are missing cases
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "sourceMap": false,
 4 |     "outDir": "./dist",
 5 |     "target": "esnext",
 6 |     "module": "None",
 7 |     "moduleResolution": "node",
 8 |     "importHelpers": true,
 9 |     "jsx": "react",
10 |     "esModuleInterop": true,
11 |     "baseUrl": ".",
12 |     "paths": {
13 |       "@/*": ["src/*"]
14 |     },
15 |     "types": [
16 |       "@types/react",
17 |       "reflect-metadata"
18 |     ],
19 |     "typeRoots": [
20 |       "./src/global.d.ts"
21 |     ],
22 |     "allowSyntheticDefaultImports": true,
23 |     "experimentalDecorators": true,
24 |     "emitDecoratorMetadata": true,
25 |     "noImplicitThis": true,
26 |     "strictFunctionTypes": true,
27 |   },
28 | }
29 | 


--------------------------------------------------------------------------------
/src/decorator/param-decorator.ts:
--------------------------------------------------------------------------------
 1 | import "reflect-metadata";
 2 | 
 3 | class Person2 {
 4 |   public name: string;
 5 |   public surname: string;
 6 |   constructor(name: string, surname: string) {
 7 |     this.name = name;
 8 |     this.surname = surname;
 9 |   }
10 |   public saySomething(
11 |     @logParameter something: string,
12 |     @logParameter other: number
13 |   ): string {
14 |     return this.name + " " + this.surname + " says: " + something;
15 |   }
16 | }
17 | 
18 | function logParameter(target: any, key: string, index: number) {
19 |   const paramTypes = Reflect.getMetadata("design:paramtypes", target, key);
20 |   const type = paramTypes[index];
21 | 
22 |   console.log(`param ${index} type is [${type.name}]`);
23 | }
24 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // .eslintrc.js
 2 | module.exports = {
 3 |   root: true,
 4 |   parser: '@typescript-eslint/parser',
 5 |   plugins: ['@typescript-eslint', 'prettier'],
 6 |   rules: {
 7 |     'prettier/prettier': 'error',
 8 |     "@typescript-eslint/explicit-function-return-type": 0,
 9 |     "@typescript-eslint/no-explicit-any": 0,
10 |     "@typescript-eslint/no-empty-function": 0,
11 |     "@typescript-eslint/no-unused-vars": 0,
12 |     "@typescript-eslint/no-namespace": 0,
13 |     "no-inner-declarations": 0,
14 |     "prefer-const": 0,
15 |   },
16 |   extends: [
17 |     'eslint:recommended',
18 |     'plugin:prettier/recommended',
19 |     'plugin:@typescript-eslint/eslint-recommended',
20 |     'plugin:@typescript-eslint/recommended',
21 |   ],
22 | }
23 | 


--------------------------------------------------------------------------------
/src/tree-property.ts:
--------------------------------------------------------------------------------
 1 | interface Item {
 2 |   id: number;
 3 |   parentId: number;
 4 |   name: string;
 5 | }
 6 | 
 7 | type TreeItem<T extends string> = Item &
 8 |   {
 9 |     [key in T]: TreeItem<T>[] | [];
10 |   };
11 | 
12 | interface Options<T extends string> {
13 |   // 限制为 string 类型
14 |   childrenKey?: T;
15 | }
16 | 
17 | declare function listToTree<T extends string = "children">(
18 |   list: Item[],
19 |   options?: Options<T>
20 | ): TreeItem<T>[];
21 | 
22 | // key children
23 | const tree = listToTree([{ id: 1, parentId: 0, name: "test1" }]);
24 | tree[0].children.map;
25 | 
26 | // key childrenList
27 | const tree2 = listToTree([{ id: 1, parentId: 0, name: "test1" }], {
28 |   childrenKey: "childrenList"
29 | });
30 | tree2[0].childrenList.map;
31 | 


--------------------------------------------------------------------------------
/src/create-reversed-map.ts:
--------------------------------------------------------------------------------
 1 | type AnyObject = Record<string, any>;
 2 | 
 3 | type PickKey<T extends AnyObject, K> = {
 4 |   [Key in keyof T]: T[Key] extends K ? Key : never;
 5 | }[keyof T];
 6 | 
 7 | type Reversed<T extends AnyObject> = {
 8 |   [V in T[keyof T]]: PickKey<T, V>;
 9 | };
10 | /**
11 |  * 将对象的 key -> value 倒置 适合反向查找的场景
12 |  *
13 |  * @example
14 |  * const obj = { foo: 'bar' } as const
15 |  * createReversedMap(obj) // { bar: 'foo' }
16 |  */
17 | export const createReversedMap = <T extends {}>(obj: T): Reversed<T> => {
18 |   const ret = {} as Reversed<T>;
19 |   if (!obj || typeof obj !== "object") {
20 |     return ret;
21 |   }
22 |   Object.keys(obj).forEach((key) => {
23 |     const val = obj[key];
24 |     ret[val] = key;
25 |   });
26 |   return ret;
27 | };
28 | 


--------------------------------------------------------------------------------
/src/flatten-object.ts:
--------------------------------------------------------------------------------
 1 | // https://zhuanlan.zhihu.com/p/91144493
 2 | // 挑选出非对象的字段
 3 | type NonObjectPropKeys<T> = {
 4 |   [K in keyof T]: T[K] extends any[] ? K : T[K] extends object ? never : K;
 5 | }[keyof T];
 6 | 
 7 | // 选出非对象的 {字段: 属性}
 8 | type NonObjectPicks<T> = Pick<T, NonObjectPropKeys<T>>;
 9 | 
10 | type Obj<T> = T extends object ? T : never;
11 | 
12 | type Values<T> = T[keyof T];
13 | 
14 | // 只挑选嵌套层级的
15 | type DeepValues<T> = Obj<Values<T>>;
16 | 
17 | type ComposedValues<T> = NonObjectPicks<T> & UnionToIntersection<DeepValues<T>>;
18 | 
19 | const obj = {
20 |   a: 1,
21 |   b: 2,
22 |   c: {
23 |     d: 3,
24 |     e: 4
25 |   },
26 |   d: {
27 |     h: [],
28 |     g: {
29 |       s: 3
30 |     }
31 |   }
32 | };
33 | 
34 | type T = ComposedValues<typeof obj>;
35 | 
36 | export {};
37 | 


--------------------------------------------------------------------------------
/src/select-property/select-data-property.ts:
--------------------------------------------------------------------------------
 1 | // TypeScript 编译期计算: 选择属性
 2 | // https://zhuanlan.zhihu.com/p/102288466?utm_source=wechat_session&utm_medium=social&utm_oi=649356511948705792
 3 | 
 4 | // 选择非函数的属性
 5 | type DataFieldKeys<T> = {
 6 |   [P in keyof T]: T[P] extends Function ? never : P;
 7 | }[keyof T];
 8 | 
 9 | type DataFields<T> = {
10 |   [P in DataFieldKeys<T>]?: T[P];
11 | };
12 | 
13 | type Constructor<T> = new (...args: any[]) => T;
14 | 
15 | function createEntity<T>(clazz: Constructor<T>, init: DataFields<T>): T {
16 |   const entity = new clazz();
17 |   Object.assign(entity, init);
18 |   return entity;
19 | }
20 | 
21 | class Order {
22 |   public createdAt: number;
23 |   public lineItems: any[];
24 |   public deliver() {}
25 | }
26 | createEntity(Order, { createdAt: new Date().getTime() });
27 | 
28 | export {};
29 | 


--------------------------------------------------------------------------------
/src/select-property/required-keys.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * For optional properties,
 3 |  * you can indeed detect them and therefore extract or exclude them.
 4 |  * The insight here is that {} extends {a?: string},
 5 |  * but {} does not extend {a: string} or even {a: string | undefined}.
 6 |  * Here's how you could build a way to remove optional properties from a type
 7 |  */
 8 | 
 9 | type RequiredKeys<T> = {
10 |   [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K;
11 | }[keyof T];
12 | 
13 | type OptionalKeys<T> = {
14 |   [K in keyof T]-?: {} extends { [P in K]: T[K] } ? K : never;
15 | }[keyof T];
16 | 
17 | type ExcludeOptionalProps<T> = Pick<T, RequiredKeys<T>>;
18 | 
19 | type I3 = {
20 |   a: string;
21 |   b?: number;
22 |   c: boolean | undefined;
23 | };
24 | 
25 | type OP = OptionalKeys<I3>;
26 | type RQ = RequiredKeys<I3>;
27 | 


--------------------------------------------------------------------------------
/src/select-property/select-feature.ts:
--------------------------------------------------------------------------------
 1 | type Feature<A, R> = ((arg: A) => R) & { __IS_FEATURE__?: true };
 2 | 
 3 | type FeatureKeys<T> = {
 4 |   [P in keyof T]: T[P] extends { __IS_FEATURE__?: true } ? P : never;
 5 | }[keyof T];
 6 | 
 7 | type Features<T, K extends keyof T> = {
 8 |   [P in FeatureKeys<T> & K]: T[P];
 9 | };
10 | 
11 | type RolePlayer<T, K extends FeatureKeys<T>> = Features<T, K>;
12 | 
13 | class Order {
14 |   public checkout: Feature<number, boolean>;
15 |   public pay: Feature<string, boolean>;
16 |   public hello(abc: string) {
17 |     return false;
18 |   }
19 | }
20 | 
21 | class CommonPurchase implements RolePlayer<Order, "checkout" | "pay"> {
22 |   public checkout(arg: number) {
23 |     return false;
24 |   }
25 |   public pay(arg: string) {
26 |     return false;
27 |   }
28 |   public hello(abc: number) {
29 |     return true;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/InversifyJS/entities.ts:
--------------------------------------------------------------------------------
 1 | import { injectable, inject } from "inversify";
 2 | import "reflect-metadata";
 3 | import { Weapon, ThrowableWeapon, Warrior } from "./interfaces";
 4 | 
 5 | @injectable()
 6 | export class Katana implements Weapon {
 7 |   public hit() {
 8 |     return "cut!";
 9 |   }
10 | }
11 | 
12 | @injectable()
13 | export class Shuriken implements ThrowableWeapon {
14 |   public throw() {
15 |     return "hit!";
16 |   }
17 | }
18 | 
19 | @injectable()
20 | export class Ninja implements Warrior {
21 |   public constructor(
22 |     @inject(Weapon) protected katana: Weapon,
23 |     @inject(ThrowableWeapon) protected shuriken: ThrowableWeapon
24 |   ) {}
25 | 
26 |   public fight() {
27 |     return this.katana.hit();
28 |   }
29 |   public sneak() {
30 |     return this.shuriken.throw();
31 |   }
32 |   public eat() {
33 |     console.log("eat");
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/function-property-names.ts:
--------------------------------------------------------------------------------
 1 | type FunctionPropertyNames<T> = {
 2 |   [K in keyof T]: T[K] extends Function ? K : never;
 3 | }[keyof T];
 4 | type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;
 5 | 
 6 | type NonFunctionPropertyNames<T> = {
 7 |   [K in keyof T]: T[K] extends Function ? never : K;
 8 | }[keyof T];
 9 | type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
10 | 
11 | interface Part {
12 |   id: number;
13 |   name: string;
14 |   subparts: Part[];
15 |   updatePart(newName: string): void;
16 | }
17 | 
18 | type T40 = FunctionPropertyNames<Part>; // "updatePart"
19 | type T41 = NonFunctionPropertyNames<Part>; // "id" | "name" | "subparts"
20 | type T42 = FunctionProperties<Part>; // { updatePart(newName: string): void }
21 | type T43 = NonFunctionProperties<Part>; // { id: number, name: string, subparts: Part[] }
22 | 
23 | export {};
24 | 


--------------------------------------------------------------------------------
/src/ioc-loader/good-case.ts:
--------------------------------------------------------------------------------
 1 | // 抽象接口Loader
 2 | interface Loader {
 3 |   file: string;
 4 | 
 5 |   load(): string;
 6 | }
 7 | 
 8 | // 还可以有其他不同的loader去实现ILoader
 9 | // 他们都可以灵活的注入到List组件中
10 | class JSONLoader implements Loader {
11 |   public file: string;
12 | 
13 |   constructor(file: string) {
14 |     this.file = file;
15 |   }
16 | 
17 |   load() {
18 |     return this.file;
19 |   }
20 | }
21 | 
22 | export default class List {
23 |   // 高层模块依赖底层模块的抽象
24 |   loader: Loader;
25 |   container: HTMLElement | null;
26 | 
27 |   constructor(container: HTMLElement | null, loader: Loader) {
28 |     this.container = container;
29 |     this.loader = loader;
30 |   }
31 | 
32 |   async render() {
33 |     this.container.textContent = this.loader.load();
34 |   }
35 | }
36 | 
37 | const list = new List(
38 |   document.getElementById("a"),
39 |   new JSONLoader("list.json")
40 | );
41 | list.render();
42 | 


--------------------------------------------------------------------------------
/src/vuex.ts:
--------------------------------------------------------------------------------
 1 | type CreateStore<S, M> = (options: VuexOptions<S, M>) => VuexStore<S, M>;
 2 | 
 3 | interface VuexOptions<S, M> {
 4 |   state: S;
 5 |   mutation: Mutation<S, M>;
 6 | }
 7 | 
 8 | type Mutation<S, M> = {
 9 |   [K in keyof M]: (state: S, payload: any) => void;
10 | };
11 | 
12 | type Commit<M> = (fsa: Fsa<M>) => void;
13 | 
14 | type Fsa<M> = { type: keyof M; payload: any };
15 | 
16 | type VuexStore<S, M> = {
17 |   state: S;
18 |   commit: Commit<M>;
19 | };
20 | 
21 | function createStore<S, M>(options: VuexOptions<S, M>): VuexStore<S, M> {
22 |   return {} as any;
23 | }
24 | 
25 | const store = createStore({
26 |   state: {
27 |     count: 0,
28 |     sum: 1
29 |   },
30 |   mutation: {
31 |     add(state, payload: number) {
32 |       state.count += payload;
33 |     }
34 |   }
35 | });
36 | 
37 | store.commit({
38 |   type: "add",
39 |   payload: 5
40 | });
41 | 
42 | export {};
43 | 


--------------------------------------------------------------------------------
/src/type-brand.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 虽然是两种相同的类型 但是却可以通过__brand这个技巧来实现类型保护
 3 |  */
 4 | type Brand<K, T> = K & { __brand: T };
 5 | 
 6 | type USD = Brand<number, "USD">;
 7 | type EUR = Brand<number, "EUR">;
 8 | 
 9 | const usd = 10 as USD;
10 | const eur = 10 as EUR;
11 | 
12 | function gross(net: USD, tax: USD): USD {
13 |   return (net + tax) as USD;
14 | }
15 | 
16 | gross(usd, usd); // ok
17 | gross(eur, usd); // Type '"EUR"' is not assignable to type '"USD"'.
18 | 
19 | /**
20 |  * 通过类私有属性实现__brand
21 |  */
22 | class Currency<T extends string> {
23 |   private as: T;
24 | }
25 | 
26 | type USD2 = number & Currency<"USD">;
27 | type EUR2 = number & Currency<"EUR">;
28 | 
29 | const usd2 = 10 as USD2;
30 | const eur2 = 10 as EUR2;
31 | 
32 | function gross2(net: USD2, tax: USD2) {
33 |   return (net + tax) as USD2;
34 | }
35 | gross2(usd2, usd2); // ok
36 | gross2(eur2, usd2); // Type '"EUR"' is not assignable to type '"USD"'.
37 | 
38 | export {};
39 | 


--------------------------------------------------------------------------------
/src/decorator/method-decorator.ts:
--------------------------------------------------------------------------------
 1 | class C {
 2 |   @logMethod
 3 |   foo(n: number) {
 4 |     return n * 2;
 5 |   }
 6 | }
 7 | 
 8 | /**
 9 |  *
10 |  * @param target 被注解的方法
11 |  * @param key 被注解方法的名字
12 |  * @param value
13 |  * 属性的描述，如果这个属性不存在于对象上则为 undefined
14 |  * 可以通过 Object.getOwnPropertyDescriptor() 函数获得
15 |  */
16 | function logMethod(target: any, key: string, value: any) {
17 |   // target === C.prototype
18 |   // key === "foo"
19 |   // value === Object.getOwnPropertyDescriptor(C.prototype, "foo")
20 |   return {
21 |     value(...args: any[]) {
22 |       // 将 foo 参数列表转换为字符串
23 |       const a = args.map(a => JSON.stringify(a)).join();
24 |       // 调用 foo() 并获取其返回值
25 |       const result = value.value.apply(this, args);
26 |       // 将结果转换为字符串
27 |       const r = JSON.stringify(result);
28 |       // 在控制台中显示函数调用详细信息
29 |       console.log(`Call: ${key}(${a}) => ${r}`);
30 |       // 返回调用 foo 的结果
31 |       return result;
32 |     }
33 |   };
34 | }
35 | 
36 | new C().foo(2); // Call: foo(2) => 4
37 | 


--------------------------------------------------------------------------------
/src/polymorphic-this.ts:
--------------------------------------------------------------------------------
 1 | class BasicCalculator {
 2 |   public constructor(protected value: number = 0) {}
 3 |   public currentValue(): number {
 4 |     return this.value;
 5 |   }
 6 |   public add(operand: number): this {
 7 |     this.value += operand;
 8 |     return this;
 9 |   }
10 |   public multiply(operand: number): this {
11 |     this.value *= operand;
12 |     return this;
13 |   }
14 |   // ... other operations go here ...
15 | }
16 | 
17 | let v = new BasicCalculator(2)
18 |   .multiply(5)
19 |   .add(1)
20 |   .currentValue();
21 | 
22 | class ScientificCalculator extends BasicCalculator {
23 |   public constructor(value = 0) {
24 |     super(value);
25 |   }
26 |   public sin() {
27 |     this.value = Math.sin(this.value);
28 |     return this;
29 |   }
30 |   // ... other operations go here ...
31 | }
32 | 
33 | // 由于 BasicCalculator 中的 multiply 方法返回的是 this 类型
34 | // 才使得返回的实例可以调用 ScientificCalculator 中的 sin 方法
35 | let v2 = new ScientificCalculator(2)
36 |   .multiply(5)
37 |   .sin()
38 |   .add(1)
39 |   .currentValue();


--------------------------------------------------------------------------------
/src/decorator/log-property.ts:
--------------------------------------------------------------------------------
 1 | class Person {
 2 |   @logProperty
 3 |   public name: string;
 4 |   public surname: string;
 5 |   constructor(name: string, surname: string) {
 6 |     this.name = name;
 7 |     this.surname = surname;
 8 |   }
 9 | }
10 | 
11 | function logProperty(target: any, key: string) {
12 |   // 属性值
13 |   let _val = this[key];
14 |   // 属性 getter
15 |   const getter = function() {
16 |     console.log(`Get: ${key} => ${_val}`);
17 |     return _val;
18 |   };
19 |   // 属性 setter
20 |   const setter = function(newVal) {
21 |     console.log(`Set: ${key} => ${newVal}`);
22 |     _val = newVal;
23 |   };
24 |   // 从类原型中删除原始属性
25 |   // 如果属性被成功删除
26 |   // Object.defineProperty() 方法用于使用原始属性的名称创建一个新的属性
27 |   if (delete this[key]) {
28 |     // 使用 getter 和 setter 创建新属性
29 |     Object.defineProperty(target, key, {
30 |       get: getter,
31 |       set: setter,
32 |       enumerable: true,
33 |       configurable: true
34 |     });
35 |   }
36 | }
37 | 
38 | const person = new Person("ssh", "sh"); // Set: name => ssh
39 | person.name; // Get: name => ssh
40 | 


--------------------------------------------------------------------------------
/src/const-assertions.ts:
--------------------------------------------------------------------------------
 1 | // STEP1
 2 | function fetchJSON(url: string, method: "GET" | "POST") {
 3 |   return fetch(url, { method }).then(response => response.json());
 4 | }
 5 | 
 6 | // OK
 7 | fetchJSON("https://example.com/", "POST").then(data => {
 8 |   // ...
 9 | });
10 | 
11 | // STEP2
12 | const HTTPRequestMethod = {
13 |   CONNECT: "CONNECT",
14 |   DELETE: "DELETE",
15 |   GET: "GET",
16 |   HEAD: "HEAD",
17 |   OPTIONS: "OPTIONS",
18 |   PATCH: "PATCH",
19 |   POST: "POST",
20 |   PUT: "PUT",
21 |   TRACE: "TRACE"
22 | };
23 | 
24 | // Oops! HTTPRequestMethod.GET被推断成了string类型
25 | // 所以不能赋值给'GET'类型
26 | fetchJSON("https://example.com/", HTTPRequestMethod.GET).then(data => {
27 |   // ...
28 | });
29 | 
30 | // SOLUTION
31 | const HTTPRequestMethod2 = {
32 |   CONNECT: "CONNECT",
33 |   DELETE: "DELETE",
34 |   GET: "GET",
35 |   HEAD: "HEAD",
36 |   OPTIONS: "OPTIONS",
37 |   PATCH: "PATCH",
38 |   POST: "POST",
39 |   PUT: "PUT",
40 |   TRACE: "TRACE"
41 |   // as const的用法 注意内部的属性全部变成了readonly的
42 | } as const;
43 | fetchJSON("https://example.com/", HTTPRequestMethod2.GET).then(data => {
44 |   // ...
45 | });
46 | 


--------------------------------------------------------------------------------
/src/type-vs-interface.ts:
--------------------------------------------------------------------------------
 1 | // ================= type alias ===============
 2 | type Point = {
 3 |   x: number;
 4 |   y: number;
 5 | };
 6 | 
 7 | // 别名可以声明方法类型
 8 | type SetPoint = (x: number, y: number) => void;
 9 | 
10 | // 类可以实现类型别名
11 | class PointY implements Point {
12 |   x: number;
13 |   y: number;
14 |   z: number;
15 | }
16 | 
17 | // 接口可以继承类型别名
18 | interface PointZ extends Point {
19 |   z: number;
20 | }
21 | 
22 | // ================= interface ===============
23 | interface PointI {
24 |   x: number;
25 |   y: number;
26 | }
27 | 
28 | // interface可以扩展字段（哪怕跨文件也可以扩展）
29 | interface PointI {
30 |   o: string | number;
31 | }
32 | 
33 | // 类可以实现接口
34 | class PointYI implements PointI {
35 |   x: number;
36 |   y: number;
37 |   o: number;
38 | }
39 | 
40 | // 接口可以继承接口
41 | interface PointZI extends PointI {
42 |   z: number;
43 | }
44 | 
45 | // 接口可以声明方法类型
46 | interface SetPointI<T> {
47 |   (x: T, y: T): void;
48 | }
49 | 
50 | // ================= diffrence ===============
51 | 
52 | // 别名可以声明联合类型 而interface不行
53 | type PointMixin = Point & {
54 |   o: number;
55 | };
56 | 
57 | // 别名继承别名 需要用联合类型
58 | type PointModel = Point & SetPoint;
59 | 
60 | export {};
61 | 


--------------------------------------------------------------------------------
/src/discriminated-unions-select.ts:
--------------------------------------------------------------------------------
 1 | // https://blog.andrewbran.ch/expressive-react-component-apis-with-discriminated-unions/
 2 | interface CommonSelectProps {
 3 |   placeholder?: string;
 4 | }
 5 | 
 6 | interface SingleSelectPropsFragment {
 7 |   multiple: false;
 8 |   value: string;
 9 |   onChange: (newValue: string[]) => void;
10 | }
11 | 
12 | interface MultipleSelectPropsFragment {
13 |   multiple: true;
14 |   value: string[];
15 |   onChange: (newValue: string[]) => void;
16 | }
17 | 
18 | interface UngroupedSelectPropsFragment {
19 |   grouped?: false;
20 |   options: string[];
21 | }
22 | 
23 | type OptionGroup = {
24 |   title: string;
25 |   options: string[];
26 | };
27 | 
28 | interface GroupedSelectPropsFragment {
29 |   grouped: true;
30 |   options: OptionGroup[];
31 |   renderGroup: (group: OptionGroup) => React.ReactNode;
32 | }
33 | 
34 | // 利用集合来避免穷举所有组合
35 | type SelectProps = CommonSelectProps &
36 |   (SingleSelectPropsFragment | MultipleSelectPropsFragment) &
37 |   (UngroupedSelectPropsFragment | GroupedSelectPropsFragment);
38 | 
39 | // 这样 就可以通过传入的 grouped 来区分是选择 UngroupedSelectPropsFragment 还是 GroupedSelectPropsFragment
40 | // multiple 也是同理
41 | function Select<T> (props: T): void
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "typescript-codes",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "tsc": "rm -rf dist && tsc -p ./",
 8 |     "test": "echo \"Error: no test specified\" && exit 1",
 9 |     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
10 |     "lint:fix": "npm run lint -- --fix"
11 |   },
12 |   "repository": {
13 |     "url": "https://github.com/sl1673495/typescript-codes"
14 |   },
15 |   "keywords": [],
16 |   "author": "",
17 |   "license": "ISC",
18 |   "dependencies": {
19 |     "@types/react": "^16.9.16",
20 |     "inversify": "^5.0.1",
21 |     "react": "^16.12.0",
22 |     "reflect-metadata": "^0.1.13",
23 |     "tslib": "^1.10.0",
24 |     "uioc": "^1.2.1"
25 |   },
26 |   "devDependencies": {
27 |     "@babel/core": "^7.7.5",
28 |     "@babel/preset-env": "^7.7.6",
29 |     "@babel/preset-react": "^7.7.4",
30 |     "@babel/preset-typescript": "^7.7.4",
31 |     "@types/reflect-metadata": "^0.1.0",
32 |     "@typescript-eslint/eslint-plugin": "^2.19.2",
33 |     "@typescript-eslint/parser": "^2.19.2",
34 |     "eslint": "^6.8.0",
35 |     "eslint-config-prettier": "^6.10.0",
36 |     "eslint-plugin-prettier": "^3.1.2",
37 |     "prettier": "^1.19.1",
38 |     "typescript": "^4.1.0-insider.20200902",
39 |     "utility-types": "^3.10.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/merge/function-class-interface-merge.ts:
--------------------------------------------------------------------------------
 1 | // function merge
 2 | function buildLabel(name: string): string {
 3 |   return buildLabel.prefix + name + buildLabel.suffix;
 4 | }
 5 | 
 6 | namespace buildLabel {
 7 |   export const suffix = "";
 8 |   export const prefix = "Hello, ";
 9 | }
10 | 
11 | console.log(buildLabel("Sam Smith"));
12 | 
13 | // class merge
14 | class Animal {
15 |   name: string;
16 | }
17 | 
18 | // 扩展静态属性
19 | namespace Animal {
20 |   export const name = "Animal";
21 | 
22 |   export function getName() {
23 |     return name;
24 |   }
25 | }
26 | 
27 | let animal: Animal;
28 | 
29 | animal.name;
30 | Animal.getName();
31 | 
32 | // 扩展实例属性
33 | interface Animal {
34 |   age: number;
35 | }
36 | 
37 | animal.age;
38 | 
39 | // enmu merge
40 | enum Color {
41 |   red = 1,
42 |   green = 2,
43 |   blue = 4
44 | }
45 | 
46 | namespace Color {
47 |   export function mixColor(colorName: string) {
48 |     if (colorName == "yellow") {
49 |       return Color.red + Color.green;
50 |     } else if (colorName == "white") {
51 |       return Color.red + Color.green + Color.blue;
52 |     } else if (colorName == "magenta") {
53 |       return Color.red + Color.blue;
54 |     } else if (colorName == "cyan") {
55 |       return Color.green + Color.blue;
56 |     }
57 |   }
58 | }
59 | 
60 | Color.mixColor("white");
61 | 
62 | export {}


--------------------------------------------------------------------------------
/src/dispatch-conditional-types-with-builtin-types.ts:
--------------------------------------------------------------------------------
 1 | type Action =
 2 |   | {
 3 |       type: "INIT";
 4 |     }
 5 |   | {
 6 |       type: "SYNC";
 7 |     }
 8 |   | {
 9 |       type: "LOG_IN";
10 |       emailAddress: string;
11 |     }
12 |   | {
13 |       type: "LOG_IN_SUCCESS";
14 |       accessToken: string;
15 |     };
16 | 
17 | // 用类型查询查出Action中所有type的联合类型
18 | type ActionType = Action["type"];
19 | 
20 | // 把类型中key为"type"去掉
21 | type ExcludeTypeField<A> = { [K in Exclude<keyof A, "type">]: A[K] };
22 | 
23 | type ExtractActionParameters<A, T> = A extends { type: T } ? A : never
24 | // 把参数对象中的type去掉
25 | // Extract<A, { type: T }会挑选出能extend { type: T }这个结构的Action中的类型
26 | type ExtractActionParametersWithoutType<A, T> = ExcludeTypeField<ExtractActionParameters<A, T>>;
27 | 
28 | type ExtractSimpleAction<A> = A extends any
29 |   ? {} extends ExcludeTypeField<A>
30 |     ? A
31 |     : never
32 |   : never;
33 | 
34 | type SimpleActionType = ExtractSimpleAction<Action>["type"];
35 | type ComplexActionType = Exclude<ActionType, SimpleActionType>;
36 | 
37 | // 简单参数类型
38 | function dispatch<T extends SimpleActionType>(type: T): void;
39 | // 复杂参数类型
40 | function dispatch<T extends ComplexActionType>(
41 |   type: T,
42 |   args: ExtractActionParametersWithoutType<Action, T>
43 | ): void;
44 | // 实现
45 | function dispatch(arg: any, payload?: any) {}
46 | 
47 | dispatch("SYNC");
48 | 
49 | dispatch('LOG_IN', {
50 |   emailAddress: 'ssh@qq.com'
51 | })
52 | 
53 | 
54 | export {}


--------------------------------------------------------------------------------
/src/better-scroll-plugins.ts:
--------------------------------------------------------------------------------
 1 | import { UnionToIntersection } from "utility-types";
 2 | 
 3 | interface Slide {
 4 |   name: "slide";
 5 |   next(): void;
 6 | }
 7 | 
 8 | interface Pullup {
 9 |   name: "pullup";
10 |   prev(): void;
11 | }
12 | 
13 | type StringOnly<T> = T extends string ? T : any;
14 | 
15 | type Keys<T extends { name: string }> = T extends { name: infer A }
16 |   ? { [P in StringOnly<A>]: T }
17 |   : never;
18 | 
19 | type Options<Plugins extends { name: string }> = UnionToIntersection<
20 |   Keys<Plugins>
21 | >;
22 | 
23 | class BS<P extends { name: string }> {
24 |   plugins: Options<P> = {} as any;
25 | }
26 | 
27 | new BS<Slide | Pullup>().plugins.slide.next();
28 | 
29 | // 最终采用的方案：
30 | type BSOptions = {
31 |   el: string;
32 | };
33 | 
34 | type BSInstance = {
35 |   scroll(): void;
36 | };
37 | 
38 | type PluginSlide = {
39 |   next(): void;
40 |   prev(): void;
41 | };
42 | 
43 | type PluginPullUp = {
44 |   refresh(): void;
45 | };
46 | 
47 | type PluginMap = {
48 |   slide: PluginSlide;
49 |   pullUp: PluginPullUp;
50 | };
51 | 
52 | type WithPlugins<O> = {
53 |   [K in keyof O]: K extends keyof PluginMap ? PluginMap[K] : never;
54 | }[keyof O];
55 | 
56 | function createBS<O = {}>(
57 |   options: BSOptions & O
58 | ): UnionToIntersection<WithPlugins<O>> & BSInstance {
59 |   return options as any;
60 | }
61 | 
62 | let bs = createBS({
63 |   el: "e",
64 |   slide: true,
65 |   pullUp: true,
66 | });
67 | 
68 | bs.refresh;
69 | bs.next;
70 | bs.scroll;
71 | 


--------------------------------------------------------------------------------
/src/covariance-contravariance/index.ts:
--------------------------------------------------------------------------------
 1 | interface SuperType {
 2 |   base: string;
 3 | }
 4 | interface SubType extends SuperType {
 5 |   addition: string;
 6 | }
 7 | let sup: SuperType;
 8 | let sub: SubType;
 9 | 
10 | sup = sub;
11 | 
12 | // subtype compatibility
13 | let superType: SuperType = { base: "base" };
14 | const subType: SubType = { base: "myBase", addition: "myAddition" };
15 | superType = subType;
16 | // Covariant
17 | type Covariant<T> = T[];
18 | let coSuperType: Covariant<SuperType> = [];
19 | const coSubType: Covariant<SubType> = [];
20 | coSuperType = coSubType;
21 | 
22 | // Contravariant --strictFunctionTypes true
23 | type Contravariant<T> = (p: T) => void;
24 | const contraSuperType: Contravariant<SuperType> = function(p) {
25 |   p.base;
26 | };
27 | let contraSubType: Contravariant<SubType> = function(p) {
28 |   p.base;
29 |   p.addition;
30 | };
31 | contraSubType = contraSuperType;
32 | 
33 | // Bivariant --strictFunctionTypes false
34 | type Bivariant<T> = (p: T) => void;
35 | let biSuperType: Bivariant<SuperType> = function(p) {};
36 | let biSubType: Bivariant<SubType> = function(p) {};
37 | // both are ok
38 | biSubType = biSuperType;
39 | biSuperType = biSubType;
40 | 
41 | // Invariant --strictFunctionTypes true
42 | type Invariant<T> = { a: Covariant<T>; b: Contravariant<T> };
43 | let inSuperType: Invariant<SuperType> = { a: coSuperType, b: contraSuperType };
44 | let inSubType: Invariant<SubType> = { a: coSubType, b: contraSubType };
45 | // both are not ok
46 | inSubType = inSuperType;
47 | inSuperType = inSubType;
48 | 


--------------------------------------------------------------------------------
/src/feat-4.1/vuex.ts:
--------------------------------------------------------------------------------
 1 | type GetMutations<Module> = Module extends { mutations: infer M } ? M : never
 2 | 
 3 | type AddPrefix<Prefix, Keys> = `${Prefix & string}/${Keys & string}`
 4 | 
 5 | type GetModuleMutationKeys<Module, Key> = AddPrefix<Key, keyof GetMutations<Module>> | (Module extends { modules: infer SubModules } ? AddPrefix<Key, GetModulesMutationKeys<SubModules>> : never)
 6 | 
 7 | type GetModulesMutationKeys<N> = N extends {} ? {
 8 |    [K in keyof N]: GetModuleMutationKeys<N[K], K>
 9 | }[keyof N] : never
10 | 
11 | type Action<Mutations, Modules> = keyof Mutations | GetModulesMutationKeys<Modules>
12 | 
13 | type Store<Mutations, Modules> = {
14 |    dispatch(action: Action<Mutations, Modules>): void
15 | }
16 | 
17 | type VuexOptions<Mutations, Modules> = {
18 |    mutations: Mutations,
19 |    modules: Modules
20 | }
21 | 
22 | declare function Vuex<Mutations, Modules>(options: VuexOptions<Mutations, Modules>): Store<Mutations, Modules>
23 | 
24 | const store = Vuex({
25 |    mutations: {
26 |       root() { },
27 |    },
28 |    modules: {
29 |       cart: {
30 |          mutations: {
31 |             add() { },
32 |             remove() { }
33 |          }
34 |       },
35 |       user: {
36 |          mutations: {
37 |             login() { }
38 |          },
39 |          modules: {
40 |             admin: {
41 |                mutations: {
42 |                   login() { }
43 |                },
44 |             }
45 |          }
46 |       }
47 |    }
48 | })
49 | 
50 | store.dispatch("root")
51 | store.dispatch("cart/add")
52 | store.dispatch("user/login")
53 | store.dispatch("user/admin/login")


--------------------------------------------------------------------------------
/src/distribute-conditional-type.ts:
--------------------------------------------------------------------------------
 1 | // https://stackoverflow.com/questions/55382306/typescript-distributive-conditional-types
 2 | 
 3 | /**
 4 |  * Distributive conditional types are automatically distributed over union types during instantiation.
 5 |  * For example, an instantiation of T extends U ? X : Y with the type argument A | B | C for T
 6 |  * is resolved as (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y).
 7 |  */
 8 | 
 9 | /**
10 |  * 分布式条件类型生效的前提是：
11 |  *
12 |  * 1. 传入泛型的是 「联合类型」
13 |  * 2. 泛型直接放在 「extends」 前面
14 |  *
15 |  * 不能有包装 如 { x: T } extends ? string ? T : 'no'
16 |  * 不能倒置 如 string extends T ? string ? T : 'no'
17 |  * 必须是 type A<T> = T extends string ? T : 'no'
18 |  * 这样 type<'a' | 'b' | 2> 就会经历
19 |  * ('a' extends string ? 'a' : 'no') | 'b' extends string ? 'b' : 'no' | 2 extends string ? 2: 'no'
20 |  * 最终计算出 'a' | 'b' | 'no'
21 |  */
22 | 
23 | // ❌ 这不是分布式条件类型 因为 T 在 extends 后面
24 | type A<T> = string extends T ? "yes" : "no";
25 | 
26 | // ❌ 这不是分布式条件类型 因为 T 不是 naked type 它被用 { x: T } 给包裹起来了
27 | type B<T> = { x: T } extends { x: number } ? "yes" : "no";
28 | 
29 | // ✅ 这是分布式条件类型 因为 T “裸”的直接跟在 extends 前面
30 | type C<T> = T extends number ? "yes" : "no";
31 | 
32 | type Union = 1 | "2";
33 | 
34 | // 'no'
35 | type TestB = B<Union>;
36 | 
37 | // ✅ 一种比较hack的方式实现，虽然 T 在 extends 之前，但是仅仅是一句废话。
38 | // 因为任何东西 extends any 都是 true
39 | // 然而 TS 还是会按照分布式条件类型来解析。
40 | // 达到了 type B 的真正目的
41 | type FixB<T> = T extends {}
42 |   ? { x: T } extends { x: number }
43 |     ? "yes"
44 |     : "no"
45 |   : never;
46 | 
47 | // 'yes' | 'no'
48 | type TestFixB = FixB<Union>;
49 | 
50 | export {}


--------------------------------------------------------------------------------
/src/dispatch-conditional-types.ts:
--------------------------------------------------------------------------------
 1 | // https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
 2 | 
 3 | type Action =
 4 |   | {
 5 |       type: "INIT";
 6 |     }
 7 |   | {
 8 |       type: "SYNC";
 9 |     }
10 |   | {
11 |       type: "LOG_IN";
12 |       emailAddress: string;
13 |     }
14 |   | {
15 |       type: "LOG_IN_SUCCESS";
16 |       accessToken: string;
17 |     };
18 | 
19 | // 用类型查询查出Action中所有type的联合类型
20 | type ActionType = Action["type"];
21 | 
22 | // 把传入的联合类型中"type"类型去除掉
23 | type ExcludeTypeKey<K> = K extends "type" ? never : K;
24 | 
25 | // 把类型中key为"type"去掉
26 | type ExcludeTypeField<A> = {
27 |   [K in ExcludeTypeKey<keyof A>]: A[K];
28 | };
29 | 
30 | // 把参数对象中的type去掉
31 | type ExtractActionParameters<A, T> = A extends { type: T }
32 |   ? ExcludeTypeField<A> // 这里也可以用Omit<A, "type">
33 |   : never;
34 | 
35 | type ExtractSimpleAction<A> = A extends any
36 |   ? {} extends ExcludeTypeField<A>
37 |     ? A
38 |     : never
39 |   : never;
40 | 
41 | type SimpleActionType = ExtractSimpleAction<Action>["type"];
42 | type ComplexActionType = Exclude<ActionType, SimpleActionType>;
43 | 
44 | // 简单参数类型
45 | function dispatch<T extends SimpleActionType>(type: T): void;
46 | // 复杂参数类型
47 | function dispatch<T extends ComplexActionType>(
48 |   type: T,
49 |   args: ExtractActionParameters<Action, T>
50 | ): void;
51 | // 实现
52 | function dispatch(arg: any, payload?: any) {}
53 | 
54 | dispatch("SYNC");
55 | 
56 | dispatch("INIT");
57 | 
58 | dispatch("LOG_IN_SUCCESS", {
59 |   accessToken: "123"
60 | });
61 | 
62 | dispatch("LOG_IN", {
63 |   emailAddress: "123"
64 | });
65 | 
66 | export { dispatch };
67 | 


--------------------------------------------------------------------------------
/src/reflect-metadata/server.ts:
--------------------------------------------------------------------------------
 1 | import "reflect-metadata";
 2 | 
 3 | const isConstructor = (val: any): boolean => {
 4 |   return !!val.caller;
 5 | };
 6 | 
 7 | const isFunction = (val: any): val is Function => {
 8 |   return typeof val === "function";
 9 | };
10 | 
11 | // Controller.js
12 | const METHOD_METADATA = "method";
13 | const PATH_METADATA = "path";
14 | const Controller = (path: string): ClassDecorator => {
15 |   return target => {
16 |     Reflect.defineMetadata(PATH_METADATA, path, target);
17 |   };
18 | };
19 | const createMappingDecorator = (method: string) => (
20 |   path: string
21 | ): MethodDecorator => {
22 |   return (target, key, descriptor) => {
23 |     Reflect.defineMetadata(PATH_METADATA, path, descriptor.value);
24 |     Reflect.defineMetadata(METHOD_METADATA, method, descriptor.value);
25 |   };
26 | };
27 | const Get = createMappingDecorator("GET");
28 | const Post = createMappingDecorator("POST");
29 | 
30 | function mapRoute(instance: Record<string, any>) {
31 |   const prototype = Object.getPrototypeOf(instance);
32 |   // 筛选出类的 methodName
33 |   const methodsNames = Object.getOwnPropertyNames(prototype).filter(
34 |     item => !isConstructor(item) && isFunction(prototype[item])
35 |   );
36 |   return methodsNames.map(methodName => {
37 |     const fn = prototype[methodName];
38 |     // 取出定义的 metadata
39 |     const route = Reflect.getMetadata(PATH_METADATA, fn);
40 |     const method = Reflect.getMetadata(METHOD_METADATA, fn);
41 |     return {
42 |       route,
43 |       method,
44 |       fn,
45 |       methodName
46 |     };
47 |   });
48 | }
49 | 
50 | // app.js
51 | @Controller("/test")
52 | class SomeClass {
53 |   @Get("/a")
54 |   someGetMethod() {
55 |     return "hello world";
56 |   }
57 |   @Post("/b")
58 |   somePostMethod() {}
59 | }
60 | 
61 | console.log("mapRoutes", mapRoute(new SomeClass()));
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # typescript-codes
 2 | 
 3 | ✨ 记录自己学习 TypeScript 时遇到的一些有趣的代码。
 4 | 
 5 | ```
 6 | src
 7 | ├── InversifyJS
 8 | │   ├── entities.ts
 9 | │   ├── index.ts
10 | │   ├── interfaces.ts
11 | │   └── inversify.config.ts
12 | ├── better-scroll-plugins.ts
13 | ├── class-chaining.ts
14 | ├── connect-leetcode-hire.ts
15 | ├── const-assertions.ts
16 | ├── covariance-contravariance
17 | │   └── index.ts
18 | ├── create-reversed-map.ts
19 | ├── decorator
20 | │   ├── log-property.ts
21 | │   ├── method-decorator.ts
22 | │   └── param-decorator.ts
23 | ├── discriminated-unions-select.ts
24 | ├── dispatch-conditional-types-with-builtin-types.ts
25 | ├── dispatch-conditional-types.ts
26 | ├── distribute-conditional-type.ts
27 | ├── exhaustiveness-checking.ts
28 | ├── feat-4.0
29 | │   ├── concat.ts
30 | │   └── tail.ts
31 | ├── feat-4.1
32 | │   └── vuex.ts
33 | ├── flatten-object.ts
34 | ├── function-property-names.ts
35 | ├── getter-type-easy.ts
36 | ├── getter-type-returntype.ts
37 | ├── getter-type.ts
38 | ├── ioc-loader
39 | │   └── good-case.ts
40 | ├── merge
41 | │   ├── function-class-interface-merge.ts
42 | │   ├── global-augmentation.ts
43 | │   ├── interface-merge-a.ts
44 | │   ├── interface-merge-b.ts
45 | │   ├── module-augmentation-a.ts
46 | │   ├── module-augmentation-b.ts
47 | │   ├── namespace-merge-a.ts
48 | │   └── namespace-merge-b.ts
49 | ├── mixin-classes.ts
50 | ├── polymorphic-button.tsx
51 | ├── polymorphic-this.ts
52 | ├── reflect-metadata
53 | │   ├── reflect-metadata.ts
54 | │   └── server.ts
55 | ├── select-property
56 | │   ├── required-keys.ts
57 | │   ├── select-data-property.ts
58 | │   ├── select-feature.ts
59 | │   └── select-readonly.ts
60 | ├── state-machine.ts
61 | ├── tail.ts
62 | ├── tree-property.ts
63 | ├── type-brand.ts
64 | ├── type-vs-interface.ts
65 | ├── union-to-intersection.ts
66 | ├── vue.ts
67 | ├── vue3-ref.ts
68 | └── vuex.ts
69 | ```
70 | 


--------------------------------------------------------------------------------
/src/mixin-classes.ts:
--------------------------------------------------------------------------------
 1 | // 1. Mixins
 2 | class User {
 3 |   name: string;
 4 | 
 5 |   constructor(name: string) {
 6 |     this.name = name;
 7 |   }
 8 | }
 9 | 
10 | type Constructor<T = {}> = new (...args: any[]) => T;
11 | 
12 | function Timestamped<TBase extends Constructor>(Base: TBase) {
13 |   return class extends Base {
14 |     timestamp = Date.now();
15 |   };
16 | }
17 | 
18 | // 2. Mixins with a Constructor
19 | function Tagged<TBase extends Constructor>(Base: TBase) {
20 |   return class extends Base {
21 |     tag: string | null;
22 | 
23 |     constructor(...args: any[]) {
24 |       super(...args);
25 |       this.tag = null;
26 |     }
27 |   };
28 | }
29 | 
30 | // Create a new class by mixing `Tagged` into `User`
31 | const TaggedUser = Tagged(User);
32 | 
33 | // We can now assign values to any property defined in either
34 | // the `User` class or our `Tagged` mixin in a type-safe manner.
35 | // TypeScript will type-check those assignments!
36 | const user2 = new TaggedUser("John Doe");
37 | user2.name = "Jane Doe";
38 | user2.tag = "janedoe";
39 | 
40 | // 3. Mixins with Methods
41 | 
42 | function Activatable<TBase extends Constructor>(Base: TBase) {
43 |   return class extends Base {
44 |     isActivated = false;
45 | 
46 |     activate() {
47 |       this.isActivated = true;
48 |     }
49 | 
50 |     deactivate() {
51 |       this.isActivated = false;
52 |     }
53 |   };
54 | }
55 | 
56 | const ActivatableUser = Activatable(User);
57 | 
58 | // Instantiate the new `ActivatableUser` class
59 | const user3 = new ActivatableUser("John Doe");
60 | 
61 | // Initially, the `isActivated` property is false
62 | console.log(user3.isActivated);
63 | 
64 | // Activate the user
65 | user3.activate();
66 | 
67 | // Now, `isActivated` is true
68 | console.log(user3.isActivated);
69 | 
70 | // 4. Composing Multiple Mixins
71 | const SpecialUser = Activatable(Tagged(Timestamped(User)));
72 | const user = new SpecialUser("John Doe");
73 | 
74 | export {};
75 | 


--------------------------------------------------------------------------------
/src/reflect-metadata/reflect-metadata.ts:
--------------------------------------------------------------------------------
 1 | import "reflect-metadata";
 2 | 
 3 | function classDecorator(): ClassDecorator {
 4 |   return target => {
 5 |     // 在类上定义元数据，key 为 `classMetaData`，value 为 `a`
 6 |     Reflect.defineMetadata("classMetaData", "class", target);
 7 |   };
 8 | }
 9 | 
10 | function Get(method: string): MethodDecorator {
11 |   return (target, key, descriptor) => {
12 |     // 在类的原型属性 'someMethod' 上定义元数据，key 为 `methodMetaData`，value 为 `b`
13 |     Reflect.defineMetadata("methodMetaData", method, target, key);
14 |   };
15 | }
16 | 
17 | @classDecorator()
18 | class SomeClass {
19 |   @Reflect.metadata("inMethod", 123)
20 |   someMethod(a: string, b: number): string {
21 |     return a + b;
22 |   }
23 | }
24 | 
25 | @Reflect.metadata("inClass", "A")
26 | class Test {
27 |   @Reflect.metadata("inMethod", "B")
28 |   public hello(): string {
29 |     return "hello world";
30 |   }
31 | }
32 | console.log(Reflect.getMetadata("inClass", Test)); // 'A'
33 | console.log(Reflect.getMetadata("inMethod", new SomeClass(), "someMethod")); // 'B'
34 | 
35 | function logParamTypes(target: any, key: string) {
36 |   const types = Reflect.getMetadata("design:paramtypes", target, key);
37 |   const ret = Reflect.getMetadata("design:returntype", target, key);
38 | 
39 |   const s = types.map(a => a.name).join();
40 |   console.log(`${key} param types: ${s}`);
41 |   console.log(`${key} return type is ${ret.name}`);
42 | }
43 | 
44 | class Foo {}
45 | interface IFoo {}
46 | class Demo {
47 |   // 应用参数装饰器
48 |   // 打印出：doSomething param types: String, Number, Foo, Object, Object, Function
49 |   @logParamTypes
50 |   doSomething(
51 |     param1: string,
52 |     param2: number,
53 |     param3: Foo,
54 |     param4: { test: string },
55 |     param5: IFoo,
56 |     param6: (a: number) => void
57 |   ): number {
58 |     return 1;
59 |   }
60 | }
61 | 
62 | // 所有的元数据都是存在于对象下面的 [[Metadata]] 属性下面，但是不是通过 Symbol 实现的：
63 | @Reflect.metadata("name", "A")
64 | class A {}
65 | 
66 | A;
67 | 


--------------------------------------------------------------------------------
/src/connect-leetcode-hire.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * LeetCode 的一道 TypeScript 面试题
 3 |  * https://github.com/LeetCode-OpenSource/hire/blob/master/typescript_zh.md
 4 |  * 前段时间，在 GitHub 上，发现一道来自 LeetCode TypeScript 的面试题，比较有意思，题目的大致意思是：
 5 | 
 6 |  * 假设有一个这样的类型（原题中给出的是类，这里简化为 interface）：
 7 |  */
 8 | 
 9 | interface Action<T> {
10 |   payload?: T;
11 |   type: string;
12 | }
13 | 
14 | /**
15 |  * 经过Connect以后，要求返回值为
16 |  * 
17 |    type Result {
18 |     asyncMethod<T, U>(input: T): Action<U>;
19 |     syncMethod<T, U>(action: T): Action<U>;
20 |   }
21 |  */
22 | 
23 | type Func = (args: any) => any;
24 | 
25 | // 通过infer操作符取出元组中的第一个参数类型
26 | type Head<Tuple extends any[]> = Tuple extends [infer Result, ...any[]]
27 |   ? Result
28 |   : never;
29 | 
30 | // 挑选出第一个参数
31 | type FirstParam<T extends Func> = Head<Parameters<T>>;
32 | 
33 | // 挑选出所有Function类型的key
34 | type FunctionKeys<T> = {
35 |   [K in keyof T]: T[K] extends Function ? K : never;
36 | }[keyof T];
37 | 
38 | // Connect核心实现 参数和结果的拆包
39 | type Connect<M> = {
40 |   // 对函数进行转换
41 |   [K in FunctionKeys<M>]: Convert<M[K]>;
42 | } &
43 |   // 除了函数以外的保留
44 |   Omit<M, FunctionKeys<M>>;
45 | 
46 | type Convert<M extends Func> = (arg: ConvertArg<M>) => ConvertReseult<M>;
47 | 
48 | // 转换参数
49 | type ConvertArg<M extends Func> = FirstParam<M> extends Promise<infer P>
50 |   ? P
51 |   : FirstParam<M> extends Action<infer A>
52 |   ? A
53 |   : FirstParam<M>;
54 | 
55 | // 转换结果
56 | type ConvertReseult<M extends Func> = ReturnType<M> extends Promise<infer P>
57 |   ? P
58 |   : ReturnType<M>;
59 | 
60 | const EffectModule = {
61 |   count: 1,
62 |   message: "hello!",
63 | 
64 |   delay(input: Promise<number>) {
65 |     return input.then(i => ({
66 |       payload: `hello ${i}!`,
67 |       type: "delay"
68 |     }));
69 |   },
70 | 
71 |   setMessage(action: Action<Date>) {
72 |     return {
73 |       payload: action.payload!.getMilliseconds(),
74 |       type: "set-message"
75 |     };
76 |   }
77 | };
78 | 
79 | // 函数实现
80 | const connect = <M>(model: M): Connect<M> => {
81 |   return model as any;
82 | };
83 | 
84 | const connected = connect(EffectModule);
85 | 
86 | // 类型测试通过
87 | connected.count = 5;
88 | connected.message = "hello";
89 | connected.setMessage(new Date()).type;
90 | connected.delay(5).type;
91 | 
92 | export {};
93 | 
94 | type GetArrayMembers<T> = T extends Readonly<Array<infer V>> ? V : never;
95 | const example = [1, 2, 3] as const;
96 | type Members = GetArrayMembers<typeof example>; // 1, 2, 3
97 | 


--------------------------------------------------------------------------------
/src/state-machine.ts:
--------------------------------------------------------------------------------
 1 | type InitStateKey = "initialState";
 2 | 
 3 | type StateMationDefinition<T extends string, K extends string> = {
 4 |   initialState: T;
 5 | } & {
 6 |   [Key in T]: MachineOption<T, K>;
 7 | };
 8 | 
 9 | type MachineOption<T, K extends string> = {
10 |   actions: {
11 |     onEnter: () => any;
12 |     onExit: () => any;
13 |   };
14 |   transitions: {
15 |     [Key in K]: {
16 |       target: T;
17 |       action: () => any;
18 |     };
19 |   };
20 | };
21 | 
22 | function createMachine<T extends string, K extends string>(
23 |   stateMachineDefinition: StateMationDefinition<T, K>
24 | ) {
25 |   const machine = {
26 |     value: stateMachineDefinition.initialState,
27 |     transition(currentState: T, event: string) {
28 |       const currentStateDefinition = stateMachineDefinition[currentState];
29 |       const destinationTransition = currentStateDefinition.transitions[event];
30 |       if (!destinationTransition) {
31 |         return;
32 |       }
33 |       const destinationState = destinationTransition.target;
34 |       const destinationStateDefinition =
35 |         stateMachineDefinition[destinationState];
36 |       destinationTransition.action();
37 |       currentStateDefinition.actions.onExit();
38 |       destinationStateDefinition.actions.onEnter();
39 |       machine.value = destinationState;
40 |       return machine.value;
41 |     }
42 |   };
43 |   return machine;
44 | }
45 | 
46 | type Types = "on" | "off";
47 | type Transitions = "switch";
48 | const machine = createMachine<Types, Transitions>({
49 |   initialState: "off",
50 |   off: {
51 |     actions: {
52 |       onEnter() {
53 |         console.log("off: onEnter");
54 |       },
55 |       onExit() {
56 |         console.log("off: onExit");
57 |       }
58 |     },
59 |     transitions: {
60 |       switch: {
61 |         target: "on",
62 |         action() {
63 |           console.log('transition action for "switch" in "off" state');
64 |         }
65 |       }
66 |     }
67 |   },
68 |   on: {
69 |     actions: {
70 |       onEnter() {
71 |         console.log("on: onEnter");
72 |       },
73 |       onExit() {
74 |         console.log("on: onExit");
75 |       }
76 |     },
77 |     transitions: {
78 |       switch: {
79 |         target: "off",
80 |         action() {
81 |           console.log('transition action for "switch" in "on" state');
82 |         }
83 |       }
84 |     }
85 |   }
86 | });
87 | 
88 | let state = machine.value;
89 | console.log(`current state: ${state}`);
90 | state = machine.transition(state, "switch");
91 | console.log(`current state: ${state}`);
92 | state = machine.transition(state, "switch");
93 | console.log(`current state: ${state}`);
94 | 


--------------------------------------------------------------------------------