您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

掌握以下TypeScript方法,让你开发更加得心应手

时间:2022-08-15 14:25:22  来源:  作者:三木前端笔记

本篇文章汇总了,一些typescript的基础概念和一些常用的类型工具方法。

 

常见的typescript类型定义

const num: number = 123 // 数值const str: string = 'string' // 字符串const boo: boolean = true // 布尔const un: undefined = undefined // undefinedconst nu: null = null // nullconst obj: object = {a: 1} // 对象const big: bigInt = 100n; // 大数const sym: symbol = Symbol('s') // symbolconst arr: number[] = [1,2,3] // 数组const arr: Array<number> = [1,2,3] // 数组

元组

在一个数组中,定义不同类型的值。

// 定义数组的第一个值是number类型,第二个是string类型const x: [number, string] = [123, 'hello workd']// 解构const [a,b] = xconsole.log(a,b) // 123, hello world

unknown

不可预先定义的类型,和any很相似,但是unknow比any更加安全。

any是任意类型的父类型,同时也是任意类型的子类型。

unknown是任意类型的父类型,仅此而已。

很多场景下,我们不好定义类型,需要根据实际情况做判断来决定类型,此时如果用any就失去了校验的能力,用unknown有any的效果,又保留了校验的能力。

const str1: unknown = '123'const str2: any = '123'let sex: booleansex = str1 // 报错,因为str类型没有确定,是unknown类型,所以不能赋值给boolean类型sex = str2 // 正常,因为any可以赋值给任意类型

枚举

可以给数值赋予名字,当我们使用的时候,就可以使用名字而不需要记数字,增加了代码的可读性。

// 定义一组角色,每个角色都用一个数字代表enum Roles {  ADMIN = 0,  USER = 1,  MANAGER = 2}

类型继承

接口可以继承,提高了接口的可复用性

interface Animal {  type: string;}interface Dog extends Animal{  name: sting;  age: number;}interface TaiDi extends Dog {  color: string;}

交叉类型

通过&,将多个类型聚合

很多时候,我们不会将类型写在一个type下面,而且拆分成很多个type,通过将这些不同的type聚合组合成一个新的type。想过与interface的extends很相似

type T1 = {name: string}type T2 = {age: number}type T3 = T1 & T2 // {name: string;age: number}

联合类型

通过|,使一个类型支持多个类型,听起来比较绕,我们直接看例子。

// value 支持string和number类型type value = string | number;// value 支持number和null类型type value = number | null// score只能支持1,2,3,4这四个数值type score = 1 | 2 | 3 | 4

对于联合类型,可以让某个变量的值可以支持多种类型,通过这种方式可以避免写any的情况。

交叉类型,简单理解就是合并两个对象类型,很像Object.assign。一个是对于类型,一个是对于对象。

断言

我们希望写的代码定义的某个变量是什么类型,之后使用就是什么类型。

可以是在多人协作中,以及组件参数的传递中,还有接口后来返回值的类型和一开始定义的不一样。

这个时候就可以使用断言,强制定义某个变量是什么类型。

可以理解成虽然某个变量定义的string类型,但是我知道在某个逻辑下会变成number类型,然后告诉编译器当作number类型吧,我拍胸脯保证不会错的。

// 例子1,常见就是从JAVAScript迁移代码到TypeScriptconst foo = {}foo.bar = 123 // Property 'bar' does not exist on type '{}'.(2339)interface Foo {  bar: number}const foo = {} as Foofoo.bar = 123 // 正常赋值// 例子2const nums: number[] = [1,2,3,4,5,6] // 定义number数组// getNum类型是number | undefinedconst getNum = nums.find(item => item > 2) // 获取大于2的第一个元素// Type 'undefined' is not assignable to type 'number'.(2322)const num : number = getNum // 我们知道这段代码的getNum肯定能获取到值,所以修改如下可以正常const num: number = getNum as number

函数

// 基本使用function sum(x: number, y: number) : number {  return x + y}// 可选参数,通过 ? 实现function sum(x: number, y: number,z?: number) : number {  if(z) {    return x + y + z  } else {    return x + y  }}// 参数默认值function sum(x: number, y: number = 0) : number {  return x + y}// 重载// TypeScript的函数重载通过为一个函数指定多个函数类型定义,从而对函数调用的返回值进行检查function sum(a: number,b:number):numberfunction sum(a: string,b:string): stringfunction sum(a: string | number,b: number | string) : string | number {  if(typeof a === 'number' && typeof b === 'number') { // 如果是数值就相加    return a + b  } else { // 否则字符串通过逗号拼接    return a + ',' + b  }}// 大家可以试一下,如果不用重载的话,返回的类型就是string | number// 之后在使用ans1和ans2就还得需要断言const ans1 = sum(1,2) // ans返回的number类型const ans2 = sum('1','2') //  ans返回的string类型

常用的内置方法使用

掌握以下方法让我们写TypeScript事半功倍,通过一些类型转换就可以得到自己想要的类型,而不需要重新定义。

PIck<T,K>

从T集合里面获取K的子级

type Type = {  id : number;  age: number;  name: string;}// SubType的类型是{id:number; name: string;}type SubType = Pick<Type, 'id' | 'name'>; 

keyof

获取一个类型的所有键值

type Person = {  name:string;  age:number}type Key = keyof person // 'age' | 'age'

Partial<T>

将所有属性变为可选。

我们定义某个对象的类型的时候,一开始大部分都会定义成必传的。之后,在另一个地方使用需要将其变成可选,这是便可以使用Partial定义一个新类型,而不改变之前的类型。

interface Todo {  title: string;  description: string;}//  TodoPartial = {name?:string;age?:number}type TodoPartial = Partial<Todo> // description已经成为可选键值,所以不写也可以const todo: TodoPartial = {title: 'sanmu'}

Required

和Partial相反,将可选全部变为必填

interface Props {  a?: number;  b?: string;} const obj: Props = { a: 5 };// Property 'b' is missing in type '{ a: number; }' // but required in type 'Required<Props>'.// b没有传,报错const obj2: Required<Props> = { a: 5 };

Readonly<T>

将所有的键值对设置为只读

interface Todo {  title: string;}const todo: Readonly<Todo> = {  title: "Delete inactive users",};// Cannot assign to 'title' because it is a read-only property.// 因为title是只读,所以报错todo.title = "Hello";

Exclude<T,K>

从T集合中,剔除T类型和U类型的交集,返回剩余部分

type T = Exclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'

Omit<T,K>

从T集合中,过滤掉K的键值对

interface Todo {  title: string;  description: string;  completed: boolean;  createdAt: number;}type TodoInfo = Omit<Todo, "completed" | "createdAt">;// TodoInfo 只有title和descriptionconst todoInfo: TodoInfo = {  title: "Pick up kids",  description: "Kindergarten closes at 5pm",};

Record<T,K>

构造一个对象类型,T表示对象的属性值,K标识对象的属性值

interface CatInfo {  age: number;  breed: string;}type CatName = "miffy" | "boris" | "mordred";// cats的keys是 "miffy" | "boris" | "mordred",value是{ age,breed}const cats: Record<CatName, CatInfo> = {  miffy: { age: 10, breed: "Persian" },  boris: { age: 5, breed: "Maine Coon" },  mordred: { age: 16, breed: "British Shorthair" },};

NonNullable

去除null和undefined。

开发中经常其他人定义了某个类型是包含null或者undefined,可是某些场景并不需要空值,这个时候不想重新写一个新类型,便可以使用这个

type T0 = NonNullable<string | number | undefined>;// T0 = string | numbertype T1 = NonNullable<string[] | null | undefined>;// T1 = string[]

Parameters<T>

获取函数的参数。

比如函数1的第一个参数的类型和函数2的第一个参数的类型是一样的,可以通过这个方法获取函数2的参数赋予给函数1的参数。

// T0 = [] 函数参数是空值type T0 = Parameters<() => string>;// T1 = [s: string]type T1 = Parameters<(s: string) => void>;declare function f3(arg: { a: number; b: string }): void;// T3 = [arg: {a: number;b: string;}]type T3 = Parameters<typeof f3>;                      // 将f4的第一个参数赋予f5函数的第1个参数declare function f4 (a: number, b: string ): void;// T4 = [a: number, b: string]type T4 = Parameters<typeof f4> // a: numberdeclare function f5(a: T4[0],b:string): void

ReturnType

Parameters获取的函数的参数类型,ReturnType则是获取函数的返回值的类型

// T0 = stringtype T0 = ReturnType<() => string>; // T1 = voidtype T1 = ReturnType<(s: string) => void>;// T2 = unknowntype T2 = ReturnType<<T>() => T>;declare function f1(): { a: number; b: string };//  T4 = { a: number; b: string;}type T4 = ReturnType<typeof f1>;


Tags:TypeScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
首先协变(Covariance)和逆变(contravariance),这俩概念不是TS特有的,很多有类型系统的语言都有一样的概念,比如C#,JAVA等。要理解这两个概念,让我们先建立几个类,然后再详细说明,...【详细内容】
2022-08-17  Tags: TypeScript  点击:(84)  评论:(0)  加入收藏
本篇文章汇总了,一些typescript的基础概念和一些常用的类型工具方法。 常见的typescript类型定义const num: number = 123 // 数值const str: string = &#39;string&#39; //...【详细内容】
2022-08-15  Tags: TypeScript  点击:(81)  评论:(0)  加入收藏
Typescript的编译器挺有趣,如果使用const声明对象,它会大量使用基本类型来声明,看下面的例子: 这个最简单的声明,Typescript会推断出age的类型是number,你可以对它赋任何数值。...【详细内容】
2022-08-11  Tags: TypeScript  点击:(146)  评论:(0)  加入收藏
Enums 是 Enumerations 的缩写,是预设的常量,可以由开发人员定义以在代码的其他地方使用。 对于 JavaScript 开发人员来说,枚举的概念通常是新的,但它们相对容易理解。 Enums 为...【详细内容】
2022-07-06  Tags: TypeScript  点击:(91)  评论:(0)  加入收藏
Hi,我是前端人,今日与君共勉!本篇文章主要介绍 typeScript 中类的定义、类的继承、类中成员修饰符等内容。typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议...【详细内容】
2022-02-21  Tags: TypeScript  点击:(123)  评论:(0)  加入收藏
本文最初发表于 Towards Data Science 博客,经原作者 Rhea Moutafis 授权,InfoQ 中文站翻译并分享。Python 是我的谋生工具,我很喜欢它。尽管我对这门语言有一些批评的地方,但我...【详细内容】
2020-10-30  Tags: TypeScript  点击:(120)  评论:(0)  加入收藏
作者:子弈转发链接:https://juejin.im/post/6856410900577026061目录从零开始配置 TypeScript 项目的教程(一)从零开始配置 TypeScript 项目的教程(二) 本篇Jest 确保构建单独通...【详细内容】
2020-08-20  Tags: TypeScript  点击:(143)  评论:(0)  加入收藏
命令行:npm install -g typescript 新建一个TypeScript文件,粘贴如下内容:function greeter(person) { return "Hello, " + person;}var user = "Jane User";document.bod...【详细内容】
2020-08-20  Tags: TypeScript  点击:(468)  评论:(0)  加入收藏
作者:神奇的程序员K转发链接:https://mp.weixin.qq.com/s/3B8dZRfbIuktSBeArXlmcQ前言我们在页面上渲染数据时,通常会根据特定规则来对数据进行一个排序,然后再将其渲染到页面...【详细内容】
2020-08-17  Tags: TypeScript  点击:(146)  评论:(0)  加入收藏
一、什么是 TypeScriptTypeScript 是近几年被火爆的应用了,这让大家产生了一个错觉:这么多的拥护者,难道TypeScript是一个新的语言?TypeScript是微软公司开发和维护的一种面向对...【详细内容】
2020-08-05  Tags: TypeScript  点击:(111)  评论:(0)  加入收藏
▌简易百科推荐
前段时间有一个叫做“人类高质量男性”的视频火了,相信很多同学都刷到过。所以今天给大家分享下,什么叫做“人类高质量代码”,哈哈,开个玩笑。其实分享的都是一些自己平时总结的...【详细内容】
2022-10-11    慕课网  Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
在之前的的章节已经简单介绍了如何断言接口的响应值,在实际工作过程中,json 的响应内容往往十分复杂,面对复杂的 json 响应体,主要通过 JSONPath 解决。JSONPath 提供了强大的 J...【详细内容】
2022-10-05  白橘透着黑  今日头条  Tags: json   点击:(29)  评论:(0)  加入收藏
对于JS程序员,alert人人都会。相信很多人初学JS时,就是从写alert入手吧,起码我就是这样,写的第一行代码就是alert。alert真的如此简单吗?可以很简单,也可以很复杂,复杂到你认不出它...【详细内容】
2022-09-27  JShaman  今日头条  Tags:JS   点击:(21)  评论:(0)  加入收藏
开发的同学肯定会遇到过通过自带的终端curl请求接口时接口返回的数据格式总是混乱的,如下图这样:常规curl请求可以看到返回数据没有格式化输出看不出数据的层级结构,可以说是非...【详细内容】
2022-09-27  寻丶  今日头条  Tags:json   点击:(35)  评论:(0)  加入收藏
众所周知,使用专业工具对JS代码进行混淆加密时,是要对代码进行语法、词法分析、运算加密,并进行AST(抽象语法树)重建的。代码量越大,加密过程运算也就越复杂,加密耗时也就越长。那...【详细内容】
2022-09-24  WangLiwen   网易号  Tags:JS   点击:(29)  评论:(0)  加入收藏
在创建 JavaScript 模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。...【详细内容】
2022-09-23  dirac    Tags:JavaScript   点击:(34)  评论:(0)  加入收藏
本文简要介绍了 Script Error 问题的来龙去脉,但也不局限于 Script Error,对于通用的系统性问题,应该找到系统性解决方案,进而治标治本。Script Error 原因与当前解法受浏览器同...【详细内容】
2022-09-23  开源中国     Tags:Script Error   点击:(25)  评论:(0)  加入收藏
本实例演示如何通过点击列表头来排序数据网格(DataGrid)。 数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 so...【详细内容】
2022-09-22  长城很长521    Tags:jQuery   点击:(30)  评论:(0)  加入收藏
自己动手,实现一个本地JS加密工具JS加密,是前后端JS程序员、小程序开发人员常用的功能。一般,进行JS代码加密时,都会使用在线的JS加密网站,比如众所周知的JShaman,就是个很优秀的J...【详细内容】
2022-09-21  WangLiwen     Tags:JS加密   点击:(18)  评论:(0)  加入收藏
一般浏览器先加载主页,再请求关联的js脚本文件。不管你把js代码嵌入在html中,还是独立保存为一个文件,都必须等待主页加载完成,js代码加载完成后才能执行。网上有人说把js代码放...【详细内容】
2022-09-19  Mutousoft  今日头条  Tags:js脚本   点击:(50)  评论:(0)  加入收藏
站内最新
站内热门
站内头条