TypeScript 是具有類型語法的 JavaScript。Interface 是為了匹配它們的運(yùn)行時(shí)行為而構(gòu)建的。

• JavaScript 備忘清單 (jaywcjlove.github.io)
• TypeScript 官網(wǎng) (typescriptlang.org)

any, void,
boolean, string, number,
undefined, null,
unknown, never,
bigint, symbol

Date, Error,
Array, Map, Set,
Regexp, Promise

interface Expect {
  (matcher: boolean): string
  (matcher: string): boolean;
}

一個(gè)可調(diào)用 Interface 可以對不同的參數(shù)集有多個(gè)定義。

interface Syncable {
  sync(): void
}
class Account implements Syncable { ... }

您可以通過實(shí)現(xiàn)確保類 class 符合 Interface。

對象可以有自定義的 getter 或 setter。

interface Ruler {
  get size(): number
  set size(value: number | string);
}

用法

const r: Ruler = ...
r.size = 12
r.size = "36"

interface APICall {
  data: Response
}

interface APICall {
  error?: Error
}

Interface 被合并，多個(gè)聲明將向類型定義添加新字段。

type SanitizedInput = string;
type MissingNo = 404;

主要用于文檔

type Location = {
  x: number;
  y: number;
};

type Size = "small" | "medium" | "large"

描述許多選項(xiàng)中的一個(gè)類型，例如已知字符串的列表。

type Location = { x: number }
              & { y: number }
// { x: number, y: number }

一種合并/擴(kuò)展類型的方法

const data = { ... }
type Data = typeof data

通過 typeof 運(yùn)算符重用來自現(xiàn)有 JavaScript 運(yùn)行時(shí)值的類型。

const createFixtures = () => { ... }
type Fixtures = ReturnType<typeof createFixtures>
function test(fixture: Fixtures) {}

將函數(shù)的返回值重新用作類型。

const data: import("./data").data

這些功能非常適合構(gòu)建庫、描述現(xiàn)有的 JavaScript 代碼，您可能會發(fā)現(xiàn)在大多數(shù) TypeScript 應(yīng)用程序中很少使用它們。

type Artist = {
  name: string, bio: string
}

type Subscriber<Type> = {
  [Property in keyof Type]: 
      (newValue: Type[Property]) => void
}
type ArtistSub = Subscriber<Artist>
// { name: (nv: string) => 
//    void, bio: (nv: string) => void }

類似于類型系統(tǒng)的映射語句，允許輸入類型更改新類型的結(jié)構(gòu)。

CFA 幾乎總是采用聯(lián)合，并根據(jù)代碼中的邏輯減少聯(lián)合內(nèi)的類型數(shù)量。

大多數(shù)時(shí)候 CFA 在自然 JavaScript 布爾邏輯中工作，但是有一些方法可以定義您自己的函數(shù)，這些函數(shù)會影響 TypeScript 如何縮小類型。

const input = getUserInput()
input // string | number
const inputLength =
  (typeof input === "string" && input.length)
  || input
   // input: string

在進(jìn)行布爾運(yùn)算時(shí)，縮窄也發(fā)生在與代碼相同的行上

interface A {
  x: number;
}
interface B {
  y: string;
}

function doStuff(q: A | B) {
  if ('x' in q) {
    // q: A
  } else {
    // q: B
  }
}

操作符可以安全的檢查一個(gè)對象上是否存在一個(gè)屬性，它通常也被作為類型保護(hù)使用

聲明一個(gè)可以在你的類方法中改變的類型。

class Box<Type> {
  contents: Type
  constructor(value: Type) {
    this.contents = value;
  }
}
const stringBox = new Box("a package")

這些功能是 TypeScript 特定的語言擴(kuò)展，可能永遠(yuǎn)無法使用當(dāng)前語法進(jìn)入 JavaScript。

class Location {
  constructor(public x: number, public y: number) {}
}
const loc = new Location(20, 40);

loc.x // 20
loc.y // 40

TypeScript 特定于類的擴(kuò)展，可自動(dòng)將實(shí)例字段設(shè)置為輸入?yún)?shù)。

abstract class Animal {
  abstract getName(): string;
  printName() {
    console.log("Hello, " + this.getName());
  }
}
class Dog extends Animal { getName(): { ... } }

一個(gè)類可以被聲明為不可實(shí)現(xiàn)，但可以在類型系統(tǒng)中被子類化。 class 成員也可以。

class MyClass {
  // 最好將索引數(shù)據(jù)存儲在另一個(gè)地方
  // 而不是類實(shí)例本身。
  [s: string]:
    boolean | ((s: string) => boolean);

  check(s: string) {
    return this[s] as boolean;
  }
}

類可以聲明索引簽名，與其他對象類型的索引簽名相同。

type A = Awaited<Promise<string>>;
// type A = string

type B = Awaited<Promise<Promise<number>>>;
// type B = number

type C = Awaited<boolean|Promise<number>>;
// type C = number | boolean

這種類型旨在模擬異步函數(shù)中的 await 或 Promises 上的 .then() 方法等操作 - 特別是它們遞歸解包 Promises 的方式。

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 }; 
const obj2: Required<Props> = { a: 5 };
// ? 類型“{ a: number;”中缺少屬性“b” }' 
// 但在 'Required<Props>' 類型中是必需的。

使 Type 中的所有屬性成為必需

interface Todo {
  title: string;
}
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
todo.title = "Hello";
// ? 無法分配給“title”，因?yàn)樗侵蛔x屬性。

function freeze<Type>(obj: Type)
            : Readonly<Type>;

將 Type 中的所有屬性設(shè)為只讀

interface Todo {
  title: string;
  description: string;
}
function updateTodo(
  todo: Todo,
  fieldsToUpdate: Partial<Todo>
) {
  return { ...todo, ...fieldsToUpdate };
}
const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};
const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

將 Type 中的所有屬性設(shè)為可選

interface CatInfo {
  age: number;
  breed: string;
}

type CatName = "miffy" | "boris";
const cats: Record<CatName, CatInfo> = {
  miffy: {age:10, breed: "Persian" },
  boris: {age:5, breed: "Maine Coon" },
};

cats.boris; 
// ?? const cats: Record<CatName, CatInfo>

構(gòu)造一個(gè)具有一組 Keys 類型的屬性 Type 的類型

interface Todo {
  name: string;
  description: string;
  completed: boolean;
}
type TodoPreview = Pick<
  Todo, "name" | "load"
>;
const todo: TodoPreview = {
  name: "Clean room",
  load: false,
};

todo;
 // ?? const todo: TodoPreview

從 Type 中選擇一組其鍵在并集 Keys 中的屬性

type T0 = Exclude<"a" | "b" | "c", "a">;
// ?? type T0 = "b" | "c"

type T1 = Exclude<"a"|"b"|"c", "a" | "b">;
// ?? type T1 = "c"

type T2 = Exclude<string | number |
    (() => void), Function>;
// ?? type T2 = string | number

從 UnionType 中排除那些可分配給 ExcludedMembers 的類型

type T0 = Extract<
  "a" | "b" | "c", "a" | "f"
>;
// type T0 = "a"
type T1 = Extract<
  string | number | (() => void),
  Function
>;
// type T1 = () => void

通過從 Type 中提取所有可分配給 Union 的聯(lián)合成員來構(gòu)造一個(gè)類型。

type T0 = NonNullable<
  string | number | undefined
>;
// type T0 = string | number

type T1 = NonNullable<
  string[] | null | undefined
>;
// type T1 = string[]

通過從 Type 中排除 null 和 undefined 來構(gòu)造一個(gè)類型。

interface Todo {
  name: string;
  completed: boolean;
  createdAt: number;
}
 
type TodoPreview = Omit<Todo, "name">;

const todo: TodoPreview = {
  completed: false,
  createdAt: 1615544252770,
};
 
todo;
 // ?? const todo: TodoPreview

構(gòu)造一個(gè)具有 Type 屬性的類型，但類型 Keys 中的屬性除外。

declare function f1(
  arg: { a: number; b: string }
): void;

type T0 = Parameters<() => string>;
// type T0 = []
type T1 = Parameters<(s: string) => void>;
// type T1 = [s: string]
type T2 = Parameters<<T>(arg: T) => T>;
// type T2 = [arg: unknown]
type T3 = Parameters<typeof f1>;
// type T3 = [arg: {
//     a: number;
//     b: string;
// }]
type T4 = Parameters<any>;
// type T4 = unknown[]
type T5 = Parameters<never>;
// type T5 = never

從函數(shù)類型 Type 的參數(shù)中使用的類型構(gòu)造元組類型。

type T0 = ConstructorParameters<
  ErrorConstructor
>;
// type T0 = [message?: string]
type T1 = ConstructorParameters<
  FunctionConstructor
>;
// type T1 = string[]
type T2 = ConstructorParameters<
  RegExpConstructor
>;
// type T2 = [
//    pattern: string | RegExp,
//    flags?: string
// ]
type T3 = ConstructorParameters<any>;
// type T3 = unknown[]

從構(gòu)造函數(shù)類型的類型構(gòu)造元組或數(shù)組類型。它產(chǎn)生一個(gè)包含所有參數(shù)類型的元組類型（如果 Type 不是函數(shù)，則類型 never ）。

declare function f1(): {
  a: number; b: string
};

type T0 = ReturnType<() => string>;
// type T0 = string

type T1 = ReturnType<(s: string) => void>;
// type T1 = void

type T2 = ReturnType<<T>() => T>;
// type T2 = unknown

type T3 = ReturnType<<
  T extends U, U extends number[]
>() => T>;
// type T3 = number[]

type T4 = ReturnType<typeof f1>;
// type T4 = {
//     a: number;
//     b: string;
// }

type T5 = ReturnType<any>;
// type T5 = any

type T6 = ReturnType<never>;
// type T6 = never

構(gòu)造一個(gè)由函數(shù) Type 的返回類型組成的類型。

type ObjectDescriptor<D, M> = {
  data?: D;
  // 方法中“this”的類型是 D & M
  methods?: M & ThisType<D & M>;
};
 
function makeObject<D, M>(
  desc: ObjectDescriptor<D, M>
): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}
 
let obj = makeObject({
  data: { x: 0, y: 0 },
  methods: {
    moveBy(dx: number, dy: number) {
      this.x += dx; // Strongly typed this
      this.y += dy; // Strongly typed this
    },
  },
});
 
obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

此實(shí)用程序不返回轉(zhuǎn)換后的類型。 相反，它用作上下文 this 類型的標(biāo)記。 請注意，必須啟用 noImplicitThis 標(biāo)志才能使用此實(shí)用程序。

class C {
  x = 0;
  y = 0;
}
type T0 = InstanceType<typeof C>;
// type T0 = C
type T1 = InstanceType<any>;
// type T1 = any
type T2 = InstanceType<never>;
// type T2 = never

構(gòu)造一個(gè)由 Type 中構(gòu)造函數(shù)的實(shí)例類型組成的類型。

function toHex(this: Number) {
  return this.toString(16);
}
 
function numberToString(
  n: ThisParameterType<typeof toHex>
) {
  return toHex.apply(n);
}

提取函數(shù)類型的 this 參數(shù)的類型，如果函數(shù)類型沒有 this 參數(shù)，則為未知。

function toHex(this: Number) {
  return this.toString(16);
}
const fiveToHex
  : OmitThisParameter<typeof toHex>
  = toHex.bind(5);

console.log(fiveToHex());

從 Type 中移除 this 參數(shù)。 如果 Type 沒有顯式聲明此參數(shù)，則結(jié)果只是 Type。 否則，從 Type 創(chuàng)建一個(gè)不帶此參數(shù)的新函數(shù)類型。 泛型被刪除，只有最后一個(gè)重載簽名被傳播到新的函數(shù)類型中。

JSX 規(guī)范是對 ECMAScript 的類似 XML 的語法擴(kuò)展。

• 使用 .tsx 擴(kuò)展名命名您的文件
• 啟用 jsx 選項(xiàng)
• 不允許在 .tsx 文件中使用尖括號類型斷言。
• JSX 規(guī)范

const foo = <foo>bar;
// ? 不允許在 .tsx ?? 文件中使用尖括號類型斷言。

const foo = bar as foo;

as 運(yùn)算符在 .ts 和 .tsx 文件中都可用，并且在行為上與尖括號類型斷言樣式相同。

import MyComponent from "./myComponent";

<MyComponent />; // ok
<SomeOtherComponent />; // ? error

基于值的元素只是由范圍內(nèi)的標(biāo)識符查找。

declare namespace JSX {
  interface IntrinsicElements {
    foo: any;
  }
}
<foo />; // ok
<bar />; // error

<bar /> 沒有在 JSX.IntrinsicElements 上指定。

declare namespace JSX {
  interface IntrinsicElements {
    [elemName: string]: any;
  }
}

interface CeProps {
  children: JSX.Element[] | JSX.Element;
}
 
interface HomeProps extends CeProps {
  home: JSX.Element;
}
 
interface SideProps extends CeProps {
  side: JSX.Element | string;
}
 
function Dog(prop:HomeProps): JSX.Element;
function Dog(prop:SideProps): JSX.Element;
function Dog(prop:CeProps): JSX.Element {
  // ...
}

interface Point {
    x: number;
    y: number;
}
 
// type keys = "x" | "y"
type keys = keyof Point;

interface NumberOrString {
  [index: string]: string | number;
  length: number;
  name: string;
}

type Point = { x: number; y: number; }
type Data = Point[];
// Data 是個(gè)數(shù)組，提取里面的元素類型
type PointDetail = Data[number];
// type PointDetail = { x: number; y: number; }

const point = [3, 4] as const
// type 'readonly [3, 4]'

declare global {
  interface String {
    fancyFormat(opts: FancyOption): string;
  }
}
export interface FancyOption {
  fancinessLevel: number;
}

例如，當(dāng)您想使用擴(kuò)展另一個(gè)庫的 JavaScript 代碼時(shí)

import { greeter } from "super-greeter";
// 普通歡迎 API
greeter(2);
greeter("Hello world");
// 現(xiàn)在我們在運(yùn)行時(shí)用一個(gè)新函數(shù)擴(kuò)展對象
import "hyper-super-greeter";
greeter.hyperGreet();

"super-greeter" 的定義：

/* 此示例說明如何為您的函數(shù)設(shè)置多個(gè)重載 */
export interface GreeterFunction {
  (name: string): void
  (time: number): void
}
/* 此示例顯示如何導(dǎo)出接口指定的函數(shù) */
export const greeter: GreeterFunction;

我們可以像下面這樣擴(kuò)展現(xiàn)有模塊：

/* 導(dǎo)入這個(gè)模塊添加到的模塊 */
import { greeter } from "super-greeter";
/* 聲明與上面導(dǎo)入的模塊相同的模塊，然后我們擴(kuò)展 greeter 函數(shù)的現(xiàn)有聲明 */
export module "super-greeter" {
  export interface GreeterFunction {
    /** Greets even better! */
    hyperGreet(): void;
  }
}

例如，當(dāng)您想要使用如下所示的 JavaScript 代碼時(shí)：

const Greeter = require("super-greeter");
const greeter = new Greeter();
greeter.greet();

要處理通過 UMD 和模塊導(dǎo)入：

export as namespace "super-greeter";
/* 此聲明指定類構(gòu)造函數(shù)是從文件中導(dǎo)出的對象 */
export = Greeter;
/* 在此類中編寫模塊的方法和屬性 */
declare class Greeter {
  constructor(customGreeting?: string);
  greet: void;
  myMethod(opts: MyClass.MyClassMethodOptions): number;
}

如果你也想從你的模塊中公開類型，你可以把它們放在這個(gè)塊中，如果您決定包含此命名空間，則模塊可能會被錯(cuò)誤地導(dǎo)入為命名空間對象，除非 --esModuleInterop 已打開： import * as x from '[~THE MODULE~]'; 錯(cuò)誤的！ 不要這樣做！

declare namespace MyClass {
  export interface MyClassMethodOptions {
    width?: number;
    height?: number;
  }
}

# 基于向后查看 tsconfig.json 的 fs 運(yùn)行編譯
$ tsc
# 使用編譯器默認(rèn)值僅為 index.ts 發(fā)射 JS
$ tsc index.ts
# 使用默認(rèn)設(shè)置為文件夾 src 中的任何 .ts 文件發(fā)出 JS
$ tsc src/*.ts
# 使用 tsconfig.production.json 中的編譯器設(shè)置發(fā)出引用的文件
$ tsc --project tsconfig.production.json
# 為 js 文件發(fā)出 d.ts 文件，顯示布爾值的編譯器選項(xiàng)
$ tsc index.js --declaration --emitDeclarationOnly
# 通過采用字符串參數(shù)的編譯器選項(xiàng)從兩個(gè)文件發(fā)出單個(gè) .js 文件
$ tsc app.ts util.ts --target esnext --outfile index.js

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "strictNullChecks": false
  }
}

{
  "watchOptions": {
    "synchronousWatchDirectory": true
  }
}

{
  "typeAcquisition": {
    "enable": false
  }
}