typescript常用知识

256 阅读2分钟

前端阅读室

enum

枚举值可以用enum声明类型

enum E_SEX {
  MALE = '男',
  FEMALE = '女',
}

interface

接口是一系列抽象方法的声明

也可用于对象的类型声明

interface IProps {
  value: string;
}

可选值

interface IProps {
  value?: string;
}

value属性是可选的,值可以是空对象

const props: IProps = {};

联合类型

可以通过管道(|)将变量设置为联合类型

value的类型可以是string或者number

const value: string | number = 1;

type

type TName = number;
const value: TName = 1;

补充:typescript 中的 interface 和 type 到底有什么区别?

数组

两种声明都可以

const list: number[] = [];
// 或
const list: Array<number> = [];

函数

function f(value: number): number {
  return 1;
}

extends

继承

interface IProps {
  value: number;
}

interface IChildProps extends IProps {
  childValue: number;
}

&

交叉类型

interface IProps1 {
  value1: number;
}

interface IProps2 {
  value2: number;
}

const props: IProps1 & IProps2 = {
  value1: 1,
  value2: 2
};

namespace

命名空间可以解决重名问题

namespace NameSpace {
  export interface IProps {
    value: number;
  }
}

元组

用来表示已知元素数量和类型的数组。

const list: [string, number] = ['1', 1];

never 类型

never是其它类型(包括null和undefined)的子类型,代表从不会出现的值。

这意味着声明为never类型的变量只能被never类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环)

let x: never;

// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

泛型

interface IProps<T> {
  value: T;
}

const props: IProps<number> = {
  value: 1
};

Omit<T, K>​

Omit<T, K>​类型让我们可以从对象类型中剔除某些属性,从而创建新的对象类型。

interface IProps {
  value: number;
  value1: number;
}

type TProps = Omit<IProps, "value1">;

const props: TProps = {
  value: 1
};

声明文件

declare const jQuery: (selector: string) => any;

jQuery('div');

在React中使用ts

推荐一篇文章:

TypeScript 备忘录:如何在 React 中完美运用

前端阅读室