1
let a: any = 10;

1
let b: number = <any>"10"; // 不会报错

1
let a: unknown = 10;

1
let a: number = <never>10;

1
let str = "mari"; // str: string
2
let strObj = new String( "mari" ); // strObj: String

1
let obj1: Object;
2
let obj2: {};

1
let str: "mari";
2
let num: 18;
3
let bigNum: 18n;
4
let arr: [1, 2, 3];

1
let str: "mari" = "mari";
2
let str2: string = "10";
3

4
str = str2; // 报错: Type `string` is not assignable to type `"mari"`

1
// number | string 就是一个联合类型，表示既可以是字符串也可以是数字
2
let sex: number | string;
3
// 用对应的类型赋值均不会报错
4
sex = 0;
5
sex = "Armed helicopter";

1
let name: "mari" | "marry" | "Marry Kozakura";
2
let height: number | string | null = null;

1
let name:
2
    | "mari"
3
    | "marry"
4
    | "Marry Kozakura";

1
let name: string & number; // name: never
2
let value: ( string | number ) & ( number | boolean ); // value: number

1
let arr1: Array<number>;
2
let arr2: number[];

1
let arr1: (number | string)[];
2
let arr2: Array<number | string>;

1
const arr: number[] = [];
2
const firstEl = arr[0]; // firstEl: number

1
const normal: [number, string, boolean] = [9, "baka", true];

1
const noraml: [number, string, boolean?] = [9, "baka"];
2
let normal1: [number, string?, boolean]; // 报错: A required element cannot follow an optional element.

1
// 解析值类型
2
const str = "mari";
3
type Str = typeof str; // Str: "mari"
4

5
// 解析函数
6
function normal(arg: string): boolean {
7
  return !!arg;
8
}
9
type Normal = typeof normal; // Normal: (arg: string) => boolean
10

11
// 解析对象
12
const obj = {
13
  label: "baka",
14
  value: 9,
15
};
16
type Obj = typeof obj; // Obj: { label: string, value: number }

1
// 限制str的值，使其不允许被修改（模拟const）
2
let str: "mari" = "mari";
3
// 限制只能是几个值之一
4
let str1: "red" | "blue" | "green" = "red";
5
let str2: "color" | true | 1;

1
function handle(method: "GET" | "POST") {}
2
const obj = { method: "GET" };
3
// 报错：类型“string”的参数不能赋给类型“"GET" | "POST"”的参数。
4
handle(obj.method);

1
// 将obj内属性设置为只读
2
const obj1 = { method: "GET" } as const;
3
// 或另一种断言方式
4
const obj2 = <const>{ method: "GET" };

1
const bigintNum: bigint = 100n;

1
type Circle = {
2
  kind: "circle";
3
};
4

5
type Square = {
6
  kind: "square";
7
};
8

9
type Sharp = Circle | Square;
10

11
function sharpHandle(sharp: Sharp) {
12
  switch (sharp.kind) {
13
    case "circle":
14
      // sharp: Circle;
15
      return sharp;
16
    case "square":
17
      // sharp: Square;
18
      return sharp;
19
    default:
20
      // sharp: never;
21
      return sharp;
22
  }
23
}

1
/* 接口 */
2
interface Handle {
3
  (arg: number): boolean;
4
}
5
/* 类型别名 */
6
type Handle = (arg: number) => boolean;

1
type Handle = (arg1: number, arg2: booleab) => boolean;
2
// 少定义了一个参数，不会报错
3
// 等号右侧不需要明显定义类型其实，ts会自动推断
4
const handle: Handle = (mari: number): boolean => true;

1
type Handle = {
2
  desc: string;
3
  (arg: number): boolean;
4
};
5

6
const handle: Handle = mari => mari === 1;
7
// 不定义会报错
8
handle.desc = "";

1
interface IFunc {
2
  (mari: string): boolean;
3
  desc: string;
4
}
5

6
const handle: IFunc = (arg: string) => !!arg;
7
// 没有下面这一行会报错，因为desc为必须的属性
8
handle.desc = "函数的属性";

1
class TsClass {
2
  private arg: string;
3
  constructor(arg: string) {
4
    this.arg = arg;
5
  }
6
}
7

8
interface ITsc {
9
  new (mari: string): TsClass
10
}
11

12
// 或使用类型别名
13
// type ITsc = new (mari: string) => TsClass
14

15
function getTsClass(tsc: ITsc) {
16
  return new tsc( "mari" );
17
}

1
function getTsClass(tsc: TsClass) {
2
  // 类型 "TsClass" 没有构造签名
3
  return new tsc( "mari" );
4
}

1
function overload(timeStamp: number): Date;
2
function overload(d: number, m: number, y: number): Date;
3

4
/* 函数实现 */
5
function overload(dOrTimeStamp: number, m?: number, y?: number): Date {
6
  if (m && y) {
7
    return new Date(y, m, dOrTimeStamp);
8
  } else {
9
    return new Date(dOrTimeStamp);
10
  }
11
}
12

13
overload(1650819030751);
14
overload(25, 4, 2022);
15
// 报错：没有需要 2 参数的重载，但存在需要 1 或 3 参数的重载。
16
overload(25, 4);

1
function overload(field: string): void;
2
// 不会报错
3
function overload() {}
4
overload("this is a field");

1
function overload(field: string): string;
2
function overload(field: number): number;
3

4
function overload(field: string | number): string | number {
5
  return "field";
6
}
7

8
overload("this is a field");

1
function overload(field: string): void;
2
function overload(field: number): void;
3

4
const field: string | number = Math.random() > 0.5 ? "" : 0;
5
// 类型“string | number”的参数不能赋给类型“string”的参数。
6
// 类型“string | number”的参数不能赋给类型“number”的参数。
7
overload(field);

1
class Handle {
2
  public value: string;
3
  constructor(value: string) {
4
    this.value = value
5
  }
6

7
  onClick(this: Handle, e: Event) {
8
    this.value = e.type;
9
  }
10
}
11

12
interface myElement {
13
  addClickListener(onClick: (this: void, e: Event) => void): void
14
};
15

16
const ele: myElement = {
17
  addClickListener(onClick: (this: void, e: Event) => void) {
18
    onClick({ type: 'click' } as Event)
19
  }
20
};
21

22
// TS2345: Argument of type "(this: Handle, e: Event) => void" is not assignable to parameter of type "(this: void, e: Event) => void".
23
ele.addClickListener(new Handle("default").onClick);

1
// 此处 m 若不做具体类型定义，则为 any[] 类型
2
function mutiply(n: string, ...m: number[]) {
3
  return m.map((x) => n.padEnd(x, n));
4
}
5

6
mutiply( "mari", 6, 7, 8, 9, 10 );

1
const list: string[] = [];
2
const list2: string[] = ["a", "b"];
3
list.push(...list2);

1
type Parm = {
2
  label: string;
3
  value: number;
4
};
5

6
function handle({ label, value }: Parm) {
7
  return `${label}: ${value}`;
8
}
9

10
handle({ label: "baka", value: 9 });

1
type VoidFun = () => void;
2

3
// 不会报错
4
const v1: VoidFun = () => true;
5
// const res: void
6
const res = v1();
7
// true
8
console.log(res);

1
// 不能将类型“boolean”分配给类型“void”。
2
const v2 = (): void => true;

1
// 匿名
2
const obj: { label: string; value: number } = {
3
  label: "baka",
4
  value: 9,
5
};
6

7
// 接口
8
interface INormal {
9
  label: string;
10
  value: number;
11
}
12

13
const obj: INormal = {
14
  label: "baka",
15
  value: 9,
16
};
17

18
// 类型别名
19
type Normal = {
20
  label: string;
21
  value: number;
22
};
23

24
const obj: Normal = {
25
  label: "baka",
26
  value: 9,
27
};

1
// 基本使用
2
interface INormal {
3
  [key: string]: number;
4
}
5

6
// 携带其他参数，必须和索引签名指定类型兼容
7
interface INormal {
8
  [key: string]: number;
9
  title: number;
10
}
11

12
// 只读属性
13
interface INormal {
14
  readonly [key: string]: number;
15
}

1
/* 接口 */
2
interface a {
3
  name: string;
4
}
5
interface a {
6
  age: number;
7
}

1
// string: number | string
2
const string = Math.radom() > 0.5 ? 10 : "string";

1
function handle() {
2
  let x: number | string | boolean;
3
  x = Math.random() < 0.5 ? 10 : "string";
4
  // x: string | number
5
  return x;
6
}

1
let str = "string" as any;
2
let str = <any>"string";

1
type bird = {
2
  fly: () => void;
3
};
4

5
type fish = {
6
  swim: () => void;
7
};
8

9
/* 使用类型谓词is */
10
function isBird(pet: bird | fish): pet is bird {
11
  return (<bird>pet).fly !== undefined;
12
}
13

14
function getPet(): bird | fish {
15
  const fish: fish = {
16
    swim: () => {},
17
  };
18
  const bird: bird = {
19
    fly: () => {},
20
  };
21
  return Math.random() < 0.5 ? fish : bird;
22
}
23

24
const pet = getPet();
25

26
// typescript会自动推断不同条件下，pet的类型
27
isBird(pet) ? pet.fly() : pet.swim();

1
const zoos: Array<fish | bird> = [getPet(), getPet(), getPet()];
2
// fishs: fish[]
3
const fishs = zoos.filter(isFish);
4
// fishs1: fish[]
5
const fishs1 = zoos.filter((pet): pet is fish => isFish(pet));

1
type Normal = {
2
  label: string;
3
  value: number;
4
};
5

6
// "label" | "value"
7
type KeysNormal = keyof Normal;

1
type Normal = {
2
    label: string
3
    value: number
4
}
5
// type Values = string | number
6
type Values = Normal[keyof Normal]

1
function getProperty<T extends object, K extends keyof T>(obj: T, key: K): T[keyof T] {
2
    return obj[key]
3
}

1
// type Num = "toString" | "toFixed" | "toExponential" | "toPrecision" | "valueOf" | "toLocaleString"
2
type Num = keyof number
3
// type Bool = "valueOf"
4
type Bool = keyof boolean

1
class Base {
2
    private label: string
3
    public value: number
4
    constructor(label: string, value: number) {
5
        this.label = label
6
        this.value = value
7
    }
8
    getValue() {
9
        return this.value
10
    }
11
}
12
// type Normal = "value" | "getValue"
13
type Normal = keyof Base

1
enum HttpMethod {
2
    Get,
3
    Post
4
}
5
// type FakeMethod = "toString" | "toFixed" | "toExponential" | "toPrecision" | "valueOf" | "toLocaleString"
6
type FakeMethod = keyof HttpMethod
7
// type Method = "Get" | "Post"
8
type Method = keyof typeof HttpMethod

1
// 解析函数
2
function normal(arg: string): boolean {
3
  return !!arg;
4
}
5
// type Normal = (arg: string) => boolean
6
type Normal = typeof normal;
7

8
// 解析对象
9
const obj = {
10
  label: "baka",
11
  value: 9,
12
};
13
// type Obj = { label: string; value: number; }
14
type Obj = typeof obj;

1
type Normal<T> = T extends (infer U)[] ? U : T;
2
// type T0 = number
3
type T0 = Normal<number[]>;

1
type Normal<T> = T extends { label: infer U; value: infer R } ? [U, R] : T;
2

3
type Base = {
4
  label: string;
5
  value: number;
6
};
7
// type T0 = [string, number]
8
type T0 = Normal<Base>;

1
class Normal {
2
  label: string;
3
  value: number;
4
  constructor() {
5
    this.label = "";
6
    this.value = 0;
7
  }
8
}

1
class Normal {
2
  label: string;
3
  constructor(label: string) {
4
    this.label = label;
5
  }
6
}
7

8
// "baka"
9
console.log(new Normal("baka").label);

1
class Normal {
2
    label: string;
3
      constructor(name: string, age: number);
4
      constructor(sex: boolean);
5
      constructor(ns: string | boolean, age?: number) {
6
          // ...
7
      }
8
}

1
class Normal {
2
  label: string = "";
3
  get title() {
4
    return this.label;
5
  }
6
  // (parameter) title: string
7
  set title(title) {
8
    this.label = title;
9
  }
10
}
11

12
const normal = new Normal();
13
// 自动执行 get 内的逻辑
14
const title = normal.title;
15
// 自动执行 set 内的逻辑
16
normal.title = "baka";

1
class Normal {
2
  [fieldName: string]: boolean | ((...args: string[]) => string);
3

4
  label: boolean = true;
5

6
  handle(arg: string) {
7
    return arg;
8
  }
9
}