typescript高等范例部份代码纪录

interface type 都支撑嵌套写法

// interface 写法
interface Ip {
  name: string;
  child?: Ip;
}

let child: Ip = {
  name: "str",
  child: {
    name: "test"
  }
};

// type 写法
type Ip = {
  name: string;
  child?: Ip;
};

let child: Ip = {
  name: "child",
  child: {
    name: "haha"
  }
};
// 风趣的写法
type LinkedList<T> = T & { next: LinkedList<T> }; // people = {name:'',next:{name:'',next:{...}}}
interface Person {
  name: string;
}
var people: LinkedList<Person>;
var s = people.name;
var s = people.next.name;
var s = people.next.next.name;
var s = people.next.next.next.name;
  • 常量的写法 与 交织数据范例
interface I {
  name: "ccc";
}
interface P {
  age: "bbb";
}

var a: I & P = {
  name: "ccc",
  age: "bbb"
};
  • keyof 用法
// 猎取对象的属性
function pluck<T, K extends keyof T>(o: T, names: K): T[K] {
  return o[names];
}

// 升级版
function pluck1<T, K extends keyof T>(o: T, names: K[]): T[K][] {
  return names.map(item => o[item]);
}

// keyof用法
interface Personal {
  name: string;
  age: number;
}
//keyof Personal ==> 'name' | 'age' 这类的团结范例 能够运用in来轮回
let ppp: keyof Personal = "name";
let ppp1: keyof Personal = "age";
let ppp2: keyof Personal = "ss"; // error 值只能为 name | age
  • keyof 用法二
    keyof 和 T[K]与字符串索引署名举行交互。 假如你有一个带有字符串索引署名的范例,那末 keyof T 会是 string。 而且 T[string]为索引署名的范例
interface Map1<T> {
  [key: number]: T;
}
let pp: keyof Map1<string>; // pp 范例为number
let pp4: Map1<string>[0]; // 返回的范例是string

interface Map2<T> {
  [key: string]: T;
}
let pp1: keyof Map1<string>; // pp1 范例为string
let pp3: Map2<number>["foo"]; // 返回的范例是number
  • keyof 用法 3 映照范例

// 经由过程这个范例天生一个只读版本 in 内部运用了for---in轮回
interface PersonPartial {
    name?: string;
    age?: number;
}
// 运用
type ReadonlyPersonPartial<T> = {
    readonly [key in keyof PersonPartial]: PersonPartial[key]
}
let b: ReadonlyPersonPartial<string> = {
    name: 'string',
    age: 123
}

type Map2<T> = {
    [key in keyof PersonPartial]?: T;
}
var a: Map2<string> = {
    name: '123',
}

// 封装一些通用的版本
type BeNull<T> = {
    [P in keyof T]:T[P] | null
}

type BeEmpty<T> = {
    [P in keyof T]?:T[P]
}
  • 明白 extends in 相干的东西
interface a {
  name: string;
  age: number;
}
// T 相当于上面有 name | age
// [key in T] 轮回 name age ,每个key就是name age 那末 a[name],a[age] j
type b<T extends keyof a> = { [key in T]: a[key] };
let c: b<"name" | "age"> = {
  name: "123",
  age: 12
};
  • 内置的 pick record exclude的明白 逐步来吧
// pick  的作用是传入一个接口,返回接口内里特定的字段范例
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
interface b { 
    name: string,
    age:number
}
let cc: Pick<b, 'name' | 'age'> = {
    name: 'cc',
    age:123
}

// 传入属性,天生一个接口 天生一个 name age 都是string的interface
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
let mmm: Record<'name' | 'age', string> = {
    name: 'ccc',
    age:'20'
}

// 消除雷同的 extends 能够明白为 T 能够赋值给 U 能够赋值返回never 不然 返回 T
type Exclude<T, U> = T extends U ? never : T;
interface a { 
    name:string
}
interface b { 
    name: string,
    age:number
}

interface c {
    name: string,
    age: number,
    hobby:any
}

// 这两个东西示意出来了 是离开来搞的 起首 a extends b => a  b extends b=>never 所以返回的是 a
let nnn: Exclude<a | b, b> // 返回 a 
let nnnn: Exclude<a | b, a> // 返回 never  a extends a => never  b extends a b能够赋值给a 返回never
let ccc: Exclude<a | b | c, c> 

let b: a extends b ? number : string  // a 不能赋值给 b 所以返回了string b的范例就是string
let nnn:Exclude<keyof b,keyof a> // 消除雷同的事后 剩下的就是 ‘age’  'name'|'age' extends 'name'  岂非是 name extends name , age extends name 离开来的 先如许明白吧

type mm = 'number' | 'age';
type nn = 'age'
let c: mm extends nn ? never : mm; // mm 不能赋值给 nn 所以返回值是 mm 并非上面Exclude 返回的 age 这个能够明白为传入泛型变量的时刻ts 帮我们去轮回 extends(赋值了一下)

// 掏出雷同的
type Extract<T, U> = T extends U ? T : never; // T 能够赋值给 U的话 示意的是T中的字段 U中肯建都存在 返回了 U。
    原文作者:香蕉你个拔娜娜
    原文地址: https://segmentfault.com/a/1190000019402965
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞