关于typescript:typescript常用操作符运算符

1次阅读

共计 2578 个字符,预计需要花费 7 分钟才能阅读完成。

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});

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

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

type PartialPeople = Partial<People>;

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

这样编译不会报错

Reuqired
Required<T> 的作⽤就是将某个类型⾥的属性全副变为必选项。
作用和 Partial 相同

Record
Record<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"}
};

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

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

Extract
Extract<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 和 Omit
Pick 就是从一个复合类型中,取出几个想要的类型的组合
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'};
正文完
 0