likes
comments
collection
share

typescript常用操作符运算符

作者站长头像
站长
· 阅读数 32

TypeScript是JavaScript的加强版,它给JavaScript添加了可选的静态类型和基于类的⾯向对象编程,它拓展了JavaScript的语法。 Typescript 是纯⾯向对象的编程语⾔,包含类和接⼝的概念.Typescript 在开发时就能给出编译错误, ⽽ JS 错误则需要在运⾏时才能暴露。 作为强类型语⾔,你可以明确知道数据的类型。代码可读性极强。Typescript中有很多很⽅便的特性, ⽐如可选链.

常用类型和操作符联合类型 | (联合类型⼀次只能⼀种类型;⽽交叉类型每次都是多个类型的合并类型。)交叉类型 & (联合类型⼀次只能⼀种类型;⽽交叉类型每次都是多个类型的合并类型。)Keyof 操作符可以⽤来⼀个对象中的所有 key 值:

interface Person {
 name: string;
 age: number;
}
type p = keyof Person; // "name" | "age"

In ⽤来遍历枚举类型:

type Keys = "a" | "b" | "c"
type Obj = {
 [p in Keys]: any
} // -> { a: any, b: any, c: any }

extends有时候我们定义的泛型不想过于灵活或者说想继承某些类等,可以通过 extends 关键字添加泛型约束。

interface ILengthwise {
 length: number;
}
function loggingIdentity<T extends ILengthwise>(arg: T): T {
 console.log(arg.length);
 return arg;
}
loggingIdentity(3);
loggingIdentity({length: 10, value: 3});

ParitialPartial<T> 的作⽤就是将某个类型⾥的属性全部变为可选项 ?。

interface People {
  age: number;
  name: string;
}

type PartialPeople = Partial<People>;

const tom:PartialPeople = {
    name: 'Tom'
};

这样编译不会报错

ReuqiredRequired<T> 的作⽤就是将某个类型⾥的属性全部变为必选项。作用和Partial相反

RecordRecord<K extends keyof any, T> 的作⽤是将 K 中所有的属性的值转化为 T 类型。

interface PageInfo {
 title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
 about: { title: "about" },
 contact: { title: "contact" },
 home: { title: "home" }
};

ExcludeExclude<T, U> 的作⽤是将某个类型中属于另⼀个的类型移除掉。

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

ExtractExtract<T, U> 的作⽤是从 T 中提取出 U。

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

type 和 interface的异同

⽤interface描述数据结构,⽤type描述类型相同点:都可以用于描述一个对象或者函数

interface User {
 name: string
 age: number
}
interface SetUser {
 (name: string, age: number): void;
}
type User = {
 name: string
 age: number
};
type SetUser = (name: string, age: number)=> void;

都允许拓展(extends)interface 和 type 都可以拓展,并且两者并不是相互独⽴的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同。

interface Name {
 name: string;
}
interface User extends Name {
 age: number;
}
// type extends type
type Name = {
 name: string;
}
type User = Name & { age: number };
// interface extends type
type Name = {
 name: string;
}
interface User extends Name {
 age: number;
}
// type extends interface
interface Name {
 name: string;
}
type User = Name & {
 age: number;
}

只有type可以做的

Type 可以声明基本类型别名,联合类型,元组等类型

// 基本类型别名
type Name = string
// 联合类型
interface Dog {
 wong();
}
interface Cat {
 miao();
}
type Pet = Dog | Cat
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]
// 当你想获取⼀个变量的类型时,使⽤ typeof
let div = document.createElement('div');
type B = typeof div

Pick和OmitPick就是从一个复合类型中,取出几个想要的类型的组合Omit会构造一个除类型K外具有T性质的类型,要两个参数,Omit<type,string>:参数:第一个为继承的type类型,第二个为想要的key的字符串,多个字符串用|分开如何基于⼀个已有类型, 扩展出⼀个⼤部分内容相似, 但是有部分区别的类型?

interface Test {
 name: string;
 sex: number;
 height: string;
}
type Sex = Pick<Test, 'sex'>;
const a: Sex = { sex: 1 };
type WithoutSex = Omit<Test, 'sex'>;
const b: WithoutSex = { name: '1111', height: 'sss' };
转载自:https://segmentfault.com/a/1190000041656337
评论
请登录