typescript高级类型部分代码记录

jsummer 发布于2019-08-23 17:58 / 1052人阅读

摘要：都支持嵌套写法写法写法有趣的写法常量的写法与交叉数据类型用法获取对象的属性升级版用法这种的联合类型可以使用来循环值只能为用法二和与字符串索引签名进行交互。

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 & { next: LinkedList }; // people = {name:"",next:{name:"",next:{...}}}
interface Person {
  name: string;
}
var people: LinkedList;
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(o: T, names: K): T[K] {
  return o[names];
}
// 升级版
function pluck1(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 {
  [key: number]: T;
}
let pp: keyof Map1; // pp 类型为number
let pp4: Map1[0]; // 返回的类型是string
interface Map2 {
  [key: string]: T;
}
let pp1: keyof Map1; // pp1 类型为string
let pp3: Map2["foo"]; // 返回的类型是number

keyof 用法 3 映射类型

</>复制代码 
// 通过这个类型生成一个只读版本 in 内部使用了for---in循环
interface PersonPartial {
    name?: string;
    age?: number;
}
// 使用
type ReadonlyPersonPartial = {
    readonly [key in keyof PersonPartial]: PersonPartial[key]
}
let b: ReadonlyPersonPartial = {
    name: "string",
    age: 123
}
type Map2 = {
    [key in keyof PersonPartial]?: T;
}
var a: Map2 = {
    name: "123",
}
// 封装一些通用的版本
type BeNull = {
    [P in keyof T]:T[P] | null
}
type BeEmpty = {
    [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 = { [key in T]: a[key] };
let c: b<"name" | "age"> = {
  name: "123",
  age: 12
};

内置的 pick record exclude的理解慢慢来吧

</>复制代码 
// pick  的作用是传入一个接口，返回接口里面特定的字段类型
type Pick = {
    [P in K]: T[P];
};
interface b { 
    name: string,
    age:number
}
let cc: Pick = {
    name: "cc",
    age:123
}
// 传入属性，生成一个接口 生成一个 name age 都是string的interface
type Record = {
    [P in K]: T;
};
let mmm: Record<"name" | "age", string> = {
    name: "ccc",
    age:"20"
}
// 排除相同的 extends 可以理解为 T 可以赋值给 U 可以赋值返回never 否则 返回 T
type Exclude = 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 
let nnnn: Exclude // 返回 never  a extends a => never  b extends a b可以赋值给a 返回never
let ccc: Exclude 
let b: a extends b ? number : string  // a 不能赋值给 b 所以返回了string b的类型就是string
let nnn:Exclude // 排除相同的过后 剩下的就是 ‘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 extends U ? T : never; // T 可以赋值给 U的话 表示的是T中的字段 U中肯定都存在 返回了 U。

GPU云服务器云服务器 php部分查询代码 html代码分两部分 c语言高级数据类型 dns域名记录类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104445.html

【速查手册】TypeScript 高级类型 cheat sheet

摘要：官方文档高级类型优先阅读，建议阅读英文文档。关键字这个关键字是在版本引入的在条件类型语句中，该关键字用于替代手动获取类型。源码解释使用条件判断完成示例官方作用该类型可以获得函数的参数类型组成的元组类型。学习 TypeScript 到一定阶段，必须要学会高阶类型的使用，否则一些复杂的场景若是用 any 类型来处理的话，也就失去了 TS 类型检查的意义。本文罗列了 TypeScript...

LoftySoul 2019-08-26 13:40 评论0 收藏0
为vue3学点typescript, 解读高级类型

摘要：直达第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型第五课什么是命名空间回顾第二课的时候为了更好的讲解基础类型所以我们讲解了一部分高级类型比如接口联合类型交叉类型本节课我会把剩余高级类型都讲完知识点摘要本节课主要关键词为自直达第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型第五课, 什么是命名空间(na...

chuyao 2019-08-26 10:28 评论0 收藏0
为vue3学点typescript, 基础类型和入门高级类型

摘要：导航第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型很重要这一节很重要可以说是的最核心部分这一节学完其实就可以开始用写代码了想想中的再看看标题中的类型字所以请大家务必认真什么是入门高级类型因为高级类型的内容比较多但是有些基导航第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型很重要这一节很重要, 可以说...

Songlcy 2019-08-23 18:27 评论0 收藏0
typescript 高级技巧

摘要：会报错，因为中没有暴露此方法，可以最大限度的避免拼写错误在此之前，先看一个的错误处理流程，以下是对进行集中处理，并且标识的过程在处，会编译出错，提示。用了一段时间的 typescript 之后，深感中大型项目中 typescript 的必要性，它能够提前在编译期避免许多 bug，如很恶心的拼写问题。而越来越多的 package 也开始使用 ts，学习 ts 已是势在必行。以下是我在...

venmos 2019-08-23 18:04 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

caspar 2019-08-15 13:33 评论0 收藏0