TypeScript 高级语法

枚举类型

枚举类型是一组可能出现的值列举出来定义在一个类型中这个类型就是枚举类型

枚举允许开发者定义一组命名常量常量可以是数字也可以是字符串类型

enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}
const dl: Direction = Direction.UP;

function turnDirection(direction: Direction) {
  switch (direction) {
    case Direction.LEFT:
      console.log("");
      break;
  }
}

枚举类型设置值

enum Direction {
  LEFT = 'LEFT'
  RIGHT = "RIGHT"
}

枚举类型默认值

枚举类型默认值从 0 开始可以重新赋值

泛型

泛型表示泛指某一种类型开发者可以指定一个表示类型的变量用来作为实际类型的占位符用尖括号来包裹这个类型变量泛型的作用主要是创建可以重用的组件从而让一个组件可以支持多种数据类型它也可以作用在接口类函数或者函数别名上

首先我们定义一个函数让一个函数接受一个参数并直接返回这个参数

function identity(value) {
  return value;
}
console.log(identity(111)); // 111

然后我们在继续支持 typescript 类型的参数

function identity(value: number): number {
  return value;
}
console.log(identity(666));

这里我们将 number 类型分配给参数和返回类型使得该函数可用于原始类型但是该函数不是通用的我们希望定义不同的类型但是还不能使用 any 因为 any 会使得编译器失去类型保护的作用我们目的是让函数适合任意的类型我们可以使用泛型

function identity<T>(value: T): T {
  return value;
}
console.log(identity<number>(1)); // 1

当我们调用函数的时候 number 类型就像参数一样会出现在 T 的任何位置进行填充 T 被称为类型变量其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

到底要传入什么类型，不能写死，要让用户自己传递上去,让用户传递一个类型，用户传递类型在函数名字得后面

function identity<Type>(arg: Type): Type {
  return arg;
}

const res1 = identity<number>(123);

const res2 = identity<string>("string");

const res3 = identity<{ name: string }>({ name: "ek" });

WARNING

T (type) 表示类型 K (Key) 表示对象中的键的类型 V (Value) 表示对象中值的类型 E (Element) 表示元素类型

而且我们并不是只能定义一个类型变量我们可以引用定义希望的任何数量的类型变量比如我们引用了一个类型变量 u 用于扩展我们定义的函数

function identity <T U>(value: T, message: U): T {
  console.log(message)
  return value
}
console.log(identity<Number, string>(68, "erkelost"));

我们返回多种类型可以使用元组

function identity<T, U>(value: T, message: U): [T, U] {
  return [value, message];
}

useState 的练习 react

泛型接口

解决函数中返回多种类型对象的问题我们可以创建一个用于 identity 函数通用接口

interface Identities<V M> {
  value: V
  message:
}

function identity<T, U>(value: T, message: U): Identities<T, U> {
  console.log(value + ": " + typeof value);
  console.log(message + ": " + typeof message);
  let identities: Identities<T, U> = {
    value,
    message,
  };
  return identities;
}

console.log(identity(68, "Semlinker"));

泛型约束

我们可以限制类型变量对应类型上的某些属性

确保属性是否存在

function identity<T>(arg: T): T {
  // Property 'length' does not exist on type 'T'.(2339)
  console.log(arg.length); // Error
  return arg;
}

编译器没法确认 T 类型一定含有 length 属性，尤其是在可以将任何类型赋给类型变量 T 的情况下。需要做的就是让类型变量 extends 一个含有我们所需属性的接口这时候会报错

interface Length {
  length: number;
}

function identity<T extends Length>(arg: T): T {
  console.log(arg.length); // 可以获取length属性
  return arg;
}

这时候如果在调用这个函数但是传递别的类型的值就会报错使用，逗号来分割多中的约束类型 T extends Length, Type2, Type3>

// 使用其他数组也可以调用length
function identity<T>(arg: T[]): T[] {
  console.log(arg.length);
  return arg;
}

Extend

接口和类型别名都能够被扩展，但语法有所不同。此外，接口和类型别名不是互斥的。接口可以扩展类型别名，而反过来是不行的。

继承，一个新的接口或者类，从父类或者接口继承所有的属性和方法，不可以重写属性，但可以重写方法

// 接口继承接口
interface Person {
  name: string;
  age?: number;
}
interface obj extends Person {
  sex: number;
}

// 类型别名 继承

type PartialPointX = { x: number };
type Point = PartialPointX & { y: number };

Implements

implements 实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能

interface Point {
  x: number;
  y: number;
}

class SomePoint implements Point {
  x = 1;
  y = 2;
}

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

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

Ts 映射类型工具链

我们设定如果登录需要以下类型

type user {
  username: string
  password: string
}

如果我们修改对象信息只能修改密码那么我们不需要 username 我们需要定义可选类型

type UserPartial {
  username?: string
  password?: string
}

对于查看用户信息所有都是只读属性

type ReadonlyType {
  readonly username?: string
  readonly password?: string
}

这样代码就会有许多相同的字段我们这时候可以是用映射类型他是一种泛型 Mapped Type 把原有的对象类型映射成为新的对象类型

映射类型语法

{[P in K]: T}
// in 类似js中的 for in 语句 用于遍历k类型中的所有类型
// T 类型用于 表示ts中的任意类型
// 在映射的过程中我们还可以使用 readonly 和 ？ 这两个额外的修饰符

// 映射类型 示例
type Item = { a: string; b: number; c: boolean }
type T1 = { [P in "X" | "Y"]:number}
// { x:number, y: number}
type T2 = { [P in "x" | "y"]: p}
// { x: 'x', y: 'y'}
type T3 = { [P in "a" | "b"] : Item[p]}
// { a: string, b: number}
type T4 = { [P in keyof Item]: item[P]}
// { a: string, b:number, c: boolean}

在github 上编辑文档

TypeScript 高级语法 #

枚举类型 #

泛型 #

泛型接口 #

泛型约束 #

Extend #

Implements #

Ts 映射类型 工具链 #

映射类型语法 #