Array

TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type:

  1. let list: number[] = [1, 2, 3];
  2. The second way uses a generic array type, Array<elemType>:
  3. let list: Array<number> = [1, 2, 3];

Tuple

Tuple types allow you to express ::an array with a fixed number of elements whose types are known::, but need not be the same. For example, you may want to represent a value as a pair of a string and a number:

  1. // Declare a tuple type
  2. let x: [string, number];
  3. // Initialize it
  4. x = [“hello”, 10]; // OK
  5. // Initialize it incorrectly
  6. x = [10, “hello”]; // Error

Enum

A helpful addition to the standard set of datatypes from JavaScript is the enum. As in languages like C#, an enum is a way of giving more friendly names to sets of numeric values.

  1. enum Color {Red, Green, Blue}
  2. let c: Color = Color.Green;

Any

::是所有类型的并集::
所以可以接受任意类型

NULL & UNDEFINE

::是所有类型的子类的交集::
所有可以赋予任意类型

Object

object is a type that represents the non-primitive type, i.e. anything that is not number, string, boolean, bigint, symbol, null, or undefined.

:::info image.png :::

as 类似于 JAVA 中类型强制转换.

Interfaces

One of TypeScript’s core principles is that type checking focuses on the ::**shape**:: that values have. This is sometimes called ::“duck typing” or “structural subtyping”::. In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

  1. class Control {
  2.     state: any;
  3.     select(): number {
  4.         return 1;
  5.     }
  6. }
  8. // 接口居然可以继承 CLASS？
  9. interface SelectableControl extends Control {
  10.     state2: any;
  11. }
  13. function z(s: SelectableControl): void {
  14. }
  16. z({
  17.     state: 1,
  18.     state2: 2,
  19.     // 其实只是用了 CLASS 的 SHAPE，select() 的 SHAPE
  20.     select: () => { return 2 }
  21. });

SHAPE 可以是对象属性的描述，也可以是函数参数与返回值的描述，或者说::约束::

Generic

Instead, we need a way of capturing the type of the argument in such a way that we can also use it to denote what is being returned. Here, we will use a type variable, a special kind of variable that works on types rather than values.

  1. function identity<T>(arg: T): T {
  2.     return arg;
  3. }

::This allows us to traffic that type information in one side of the function and out the other.::

:::info image.png :::

:::info image.png :::

Advanced Types

image.png

类型收窄：
image.png

image.png

Type

本质是 SHAPE 的 alias

树结构
image.png

链结构
image.png

image.png

Mapped types

A common task is to take an existing type and make each of its properties optional:

  1. interface PersonPartial {
  2.     name?: string;
  3.     age?: number;
  4. }

Or we might want a readonly version:

  1. interface PersonReadonly {
  2.     readonly name: string;
  3.     readonly age: number;
  4. }

This happens often enough in JavaScript that TypeScript provides a way to create new types based on old types — mapped types. In a mapped type, the new type transforms each property in the old type in the same way. For example, you can make all properties of a type readonly or optional. Here are a couple of examples:

  1. type Readonly<T> = {
  2.     readonly [P *in* keyof T]: T[P];
  3. }
  4. type Partial<T> = {
  5.     [P *in* keyof T]?: T[P];
  6. }

And to use it:

  1. type PersonPartial = Partial<Person>;
  2. type ReadonlyPerson = Readonly<Person>;

TS 黑魔法都在这一章😎
Advanced Types · TypeScript

Utility Types

TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.

image.png

image.png

image.png

MISC

TS 一些工具泛型的使用及其实现 - 知乎

image.png

想法💡

编程 = 数据结构 + 算法

TypeScript 的核心就在 Type（数据结构），JS 太灵活，所以须要 Type 加以约束。一个合理的 ts-style 的写法应该是 Type 先行，先定义数据结构，再实现业务逻辑。Type 对于 TS 太重要了以至于出现了基于 type 的运算及内置 type 运算符（Pick / Omit / Record / etc），这一点实在是 💯 很有创新性，也大大简化了类型定义的代码量。假设 TS 只是给 JS 加上了 Type 但是像 Java 一样笨拙的话，估计也就呵呵了☹️

下一步：

  • 使用 umi 写一个简单 ts 应用
  • 走读一个 ts 类库

补充 📖

（一）
image.png

（二）Interface vs Type：https://www.yuque.com/cc98/tech/xqci2q

  • type aliases can act sort of like interfaces, however, there are 3 important differences ( union types, declaration merging)
  • use whatever suites you and your team, just be consistent
  • always use interface for public API’s definition when authoring a library or 3rd party ambient type definitions
  • consider using type for your React Component Props and State