首页 > 其他分享 >TS进阶知识点

TS进阶知识点

时间:2023-02-21 18:24:53浏览次数:27  
标签:知识点 进阶 const string age TS number type name

1.TS内置高级类型Partial&Pick&Required&Readonly 

1.1、Partial 

Partial 可以快速把某个接口类型中定义的所有属性变成可选的

interface ApiKey {   id: number;   name: string; }
const dataType1: ApiKey = {   id: 1,   name: 'static' } const dataType2: ApiKey = {   name: 'json' } 这段代码会在编译报错:

 

 因为dataType2的类型是ApiKey,ApiKey中idname都是必选的,这导致编译报错。假如ApiKey中的参数是可选的,那么这个问题就会不复存在,而Partial的作用就在于此,它可以帮助我们把ApiKey中的所有属性都变成可选的

我们用Partial来重写一下这个栗子:

const dataType2:  Partial<ApiKey> = {   name: 'json' } 这样就不会报错啦! 1-2、Pick  可以选择一个原来的接口中一部分的属性定义 interface People {   name: string   age: number } type somePeople = Pick<People,'name'> let onlyName:somePeople = {    name:"112" } 选择了接口中的name属性,那么该属性就必须含有 1-3、Required 和Partial刚好相反,将一个定义中的属性全部变成必选参数 // 必选参数 interface People1 {   name?: string;   age?: number; } // 类型 "{ name: string; }" 中缺少属性 "age",但类型 "Required<People>" 中需要该属性 const person2: Required<People1> = {   name:"11" } 1-4、Readonly  // 只读 让一个定义中的所有属性都变成只读参数 interface People3 {   name: string   age: number,   dog:{       name:string       age:number   } } const xiaoling: Readonly<People3> = {   name: '小凌', // 只读   age: 18, // 只读   dog:{       age:1,       name:'大黄'   } } // 但是是浅层的 xiaoling.name = '大凌' // 无法分配到 "name" ,因为它是只读属性。 xiaoling.dog.age = 2 // 可以

2.联合类型(UnionType)

首先是联合类型的介绍,也是一切的起源

let a: string | number | boolean = '123' // 变量a的类型既可以是string, a = 123 // 也可以是number a = true // 也可以是boolean 3.keyof 将一个类型的属性名全部提取出来当做联合类型 // key of 使用 interface People5 {   name: string;   age: number; } // keyof 取 interface 的键 // type keys = "name" | "age" type keys = keyof People5; // 假设有一个 object 如下所示, // 我们需要使用 typescript 实现一个 get 函数来获取它的属性值 const xiaozhang:People5 = {   name: '小张',   age: 12 } function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {   return o[name] } console.log(get(xiaozhang,'age')) // 12 console.log(get(xiaozhang,'name')) // 小张 // error 类型“"address"”的参数不能赋给类型“keyof People”的参数。 console.log(get(xiaozhang,'address'))

keyof 与 Object.keys 略有相似,只不过 keyof 取 interface 的键

4.映射(Record)

Record用于属性映射

搭配联合类型 type RequestMethods = 'GET'|'POST'| 'DELETE' type MethodsAny = Record<RequestMethods, any> let mothod1:MethodsAny = {     GET:"1",     POST:'1',     DELETE:'1' } let mothod2:MethodsAny = {     GET:"1",     POST:'1',     DELETE:'1', // 缺少,会报错,因为它为必须存在的     PUT:'111' // error “PUT”不在类型“MethodsAny”中 } 搭配接口使用 interface PersonModel {   name:string,   age:number } // [x: string]: PersonModel; type student = Record<string, PersonModel> let students:student = {   student1:{       name:'小凌',       age:18   },   student2:{       name:'小李',       age:19   } }

5.Exclude(排除)

ts中可以排除 联合类型 中一部分的内容
注意:Exclude用来操作联合类型

type havTypes = 'name' | 'age' | 'sex' type someTypes = Exclude<havTypes,'sex'> const myTypes1:someTypes = 'name' // 可以 const myTypes2:someTypes = 'sex' // 错误 不能将类型“"sex"”分配给类型“someTypes” 6.Omit (省略) ts中就是将接口或者类型的键值对删除一部分 // 省略 interface People {   name: string;   age: number; } type somePeople = Omit<People,'name'> /** type somePeople = {   age: number; } */ 7.ReadonlyArray(只读数组)

创建一个数组,数组中的索引不允许被修改

我们知道当我们使用const创建对象或者数组时,其实是可以修改其内部属性的,但是有的时候我们可能不需要其内部能够被修改,这时候我们就需要用ReadonlyArray

实现的方式有两种:

 

 

 

 

标签:知识点,进阶,const,string,age,TS,number,type,name
From: https://www.cnblogs.com/yihuanhuan/p/17141965.html

相关文章

  • 一张图看懂CodeArts Build 6大特性,带你玩转构建服务
    华为云编译构建服务CodeArtsBuild为开发者提供配置简单的混合语言构建平台,实现编译构建云端化,支撑企业实现持续交付,缩短交付周期,提升交付效率。CodeArtsBuild支持编译构建......
  • TS声明文件
    1.什么是声明当使用第三方库时,很多三方库不是用TS写的,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。比如,在TS中直接使用Vue,就会报错,consta......
  • 论今日,Vue VSCode Snippets 不进行代码提示的问题 或 vetur Request textDocument/doc
    这他喵的是因为vetur这个鬼东西升级了,然后和项目中某些包不匹配了,降级就好了,法克尤啊法克尤,我整了一天,大概是坏了吧灵感来源:https://cxymm.net/article/a843334549/1......
  • python __slots__魔法
    先谈谈python中__dict__存储了该对象的一些属性类和实例分别拥有自己的__dict__在__init__中声明的变量,会存到实例的__dict__中类的静态函数、类函数、普通函数、全局......
  • 字节流的基本流:FileInputStream
    FileInputStream的基本用法字节输出流的循环读取文件的拷贝文件拷贝的弊端和改进方案FileInputStream的基本用法packagecom;importjava.io.*;public......
  • 开心档之Bootstrap4 自定义表单
    Bootstrap4自定义表单Bootstrap4可以自定义一些表单的样式来替换浏览器默认的样式。 自定义复选框如果要自定义一个复选框,可以设置<div>为父元素,类为.custom-c......
  • vue3 setup echarts5 绘制图表
    vue3<divref="chartRef1"style="width:100%;height:100%"/><scriptsetuplang="ts">importtype{ECharts,EChartsOption}from"echarts";import{init......
  • Typora - 进阶
    Typora基础-安装官网:https://www.typora.io/中国官网:https://typoraio.cn/中文官网:https://www.typora.net/Typora主题下载主题官方主题:http://theme.typora.io/......
  • K8SPod进阶资源限制以及探针
    一、Pod进阶1、资源限制当定义Pod时可以选择性地为每个容器设定所需要的资源数量。最常见的可设定资源是CPU和内存大小,以及其他类型的资源。当为Pod中的容器指......
  • [ARC107D] Number of Multisets
    \(\text{Solution}\)学习到了一些\(dp\)的\(trick\)设\(f_{i,j}\)表示用了\(i\)的元素,当前和为\(j\)的方案数\(dp\)有两样不好处理的东西第一是当前和不一定......