2021-05-31 复看

Declaration Merge

最常用的：

• Interface Merge
• Namespace Merge

Typescript Decorator

js_decorator

Useful TypeUtils

type A = Partial<Type>
type B = Required<Type>
type C = ReadOnly<Type>
type D = Pick<Type>
type E = Omit<Type>
type F = Exclude<Type>
type G = Extract<Type>
type H = Parameters<Type>
type I = ConstructorParameters<Type>
type J = ReturnType<Type>

Typescript compiled structure

// ES 2020
import { valueOfPi } from "./constants.js";
export const twoPi = valueOfPi * 2;

// CommonJS
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.twoPi = void 0;
const constants_js_1 = require("./constants.js");
exports.twoPi = constants_js_1.valueOfPi * 2;

// UMD
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./constants.js"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.twoPi = void 0;
    const constants_js_1 = require("./constants.js");
    exports.twoPi = constants_js_1.valueOfPi * 2;
});

Create Types from Types

// conidtional types
type NameOrId<T extends number | string> = T extends number
  ? IdLabel
  : NameLabel;

// return type combo type of
function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;

// use type parameter in type-constraints
function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}

BasicTypes

// tupple
type StringNumberBooleans = [string, number, ...boolean[]];
type StringBooleansNumber = [string, ...boolean[], number];
type BooleansStringNumber = [...boolean[], string, number];

// this bind
interface DB {
  filterUsers(filter: (this: User) => boolean): User[];
}

// constraints
function longest<Type extends { length: number }>(a: Type, b: Type) {
  if (a.length >= b.length) {
    return a;
  } else {
    return b;
  }
}

// constructor interface
interface CallOrConstruct {
  new (s: string): Date;
  (n?: number): number;
}

// never
type Shape = Circle | Square;
function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

// type v.s. interface
interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});


// Iterable
function toArray<X>(xs: Iterable<X>): X[] {
  return [...xs]
}

2021-01-29 学习

团队内分享：

TS Matters.pdf

2021-01-05

• type Type = A | B | C
• type Type = A & B & C
• Interface 描述类和构造器 ```typescript interface IClockConstructor { new(a: A): IClock; }

interface IClock { tick(): void; }

export const MyClockClass = class MyClockClass extends IClockConstructor implements IClock { // … } ```

• any v.s. unknown v.s. never 如何提升代码质量？
• 如何实现 protected / public / private / readonly 等类成员修饰符？
• type LogLevelStr = keyof typeof LogLevelEnum 一堆骚操作符
• T extends U ? X : Y 鸭式辩型的类型奥义
• 类型工具
  • Partial<T>
  • ReadOnly<P>
  • Record<A, B>
  • Pick<T, "a" | "b">
  • Omit<T, "a" | "b">
• decorator 可以使用：类、参数、方法、属性、Accessor 进行修饰，其 ES5 编译后的实现思路是怎样的？