当前位置:首页 > 体育

关于igirl我想说一篇够用的TypeScript总结

一、前言

写Ts之前看了官方文件,被那么多特性吓尿了,实际上工作用的特性并不多。(大卫亚设)。

五月底ts正式升级了4.3版本,4.4也已经在beta版本了。差不多先生,够用就行,这里更多的是,以自己的理解去总结一下常用的ts特性。有理解错误的,欢迎大哥指正

知识这种东西,学了还是要总结下,梳理清楚自己对当前知识的掌握程度。偷懒了一段时间,接下来要好好发力了。

二、ts的优缺点

1、优点

  • 代码的可读性和可维护性:举个看后端某个接口返回值,一般需要去network看or去看接口文档,才知道返回数据结构,而正确用了ts后,编辑器会提醒接口返回值的类型,这点相当实用。
  • 在编译阶段就发现大部分错误,避免了很多线上bug
  • 增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等

2、缺点

  • 有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念
  • 会增加一些开发成本,当然这是前期的,后期维护更简单了
  • 一些JavaScript库需要兼容,提供声明文件,像vue2,底层对ts的兼容就不是很好。
  • ts编译是需要时间的,这就意味着项目大了以后,开发环境启动和生产环境打包的速度就成了考验
  • 可以看看Deno 内部代码将停用 typeScript,并公布五项具体理由

或多或少,听到过的开发体验最好的架构:React Hooks + TypeScript。目前也在用,还在学习中,至于到底好不好,我还是对vue 情有独钟。前端还在快速发展中,后面再出来个xxxScript,谁也说不好。所以一个字:学!

三、anyScript

可能因为业务场景或者业务紧张,or某个跑路的大哥省了点功夫,用了typeScript的项目也可能会变成anyScript。以下是几种救急的方式(大哥们还没有其他办法):

  • // @ts-nocheck 禁用整个文件的ts校验
  • // @ts-ignore 禁用单行ts校验
  • any和unknown

不建议多用,但也不是不能用,有些场景确实不好写ts定义。这个时候就不要硬憋自己了,写个备注any下。

抛个面试题:你知道any和unknown的区别吗?

回归正题,开始学习,总结一些项目中使用较多的,一些TS高级特性这里就不说了。

四、ts类型

本篇所有demo都可在TypeScript Playground

运行,不理解的建议都来跑跑看。

1、基础类型

  • 常用:boolean、number、string、array、enum、any、void
  • 不常用:tuple、null、undefine、never
const count: number = 20210701;

2、对象类型

简单理解interface 和 type 的区别:type 更强大,interface 可以进行声明合并,type 不行;

看个人习惯,一般声明都用interface,需要用到其他变量类型,type多一些。有没有interface或type一把梭的?

interface Hero { name: string; age: number; skill: string; skinNum?: number; say(): string; // say函数返回值为string [propname: string]: any; // 当前Hero可定义任意字符串类型的key } // 继承 interface littleSoldier extends Hero { rush(): string; } // 任意类型 interface IAnyObject { [key: string]: any; } type Hero = { name: string, age: number, skill: string, skinNum?: number, };

3、数组类型

项目中常见的写法,需要声明列表数据类型:

interface IItem { id: number; name: string; isDad: boolean; } const objectArr: IItem[] = [{ id: 1, name: '俊劫', isGod: true }]; // or const objectArr: Array<IItem> = [{ id: 1, name: '俊劫', isGod: true }]; const numberArr: number[] = [1, 2, 3]; const arr: (number | string)[] = [1, "string", 2];

4、元组 tuple

元组和数组类似,但是类型注解时会不一样

赋值的类型、位置、个数需要和定义(生明)的类型、位置、个数一致。

暂时没用过,感觉用处不大~~~

// 数组 某个位置的值可以是注解中的任何一个 const LOL: (string | number)[] = ["zed", 25, "darts"]; // 元祖 每一项数据类型必须一致 const LOL: [string, string, number] = ["zed", "darts", 25];

5、联合| or 交叉&类型

  • 联合类型:某个变量可能是多个 interface 中的其中一个,用 | 分割
  • 交叉类型:由多个类型组成,用 & 连接
// anjiao 某胖博主爱好 interface Waiter { anjiao: boolean; say: () => {}; } interface Teacher { anjiao: boolean; skill: () => {}; } // 联合类型 function judgeWho(animal: Waiter | Teacher) {} // 交叉类型 // 同名类型会进行合并,同名基础类型属性的合并返回:never // 同名非基础类型属性可以正常合并 function judgeWho(jishi: Waiter & Teacher) {}

6、enum枚举

提高代码可维护性,统一维护某些枚举值,避免 JiShi === 1这种魔法数字。JiShi === JiS这样写,老板一眼就知道我想找谁。

// 初始值默认为 0 enum JiShiEnum { REDJ, BLUEJ, GREENJ, } // 设置初始值 enum JiShiEnum { REDJ = 8, BLUEJ, GREENJ, } const jishi: JiShiEnum = JiS con(jishi) // 9 // 字符串枚举,每个都需要声明 enum JiShiEnum { REDJ = "8号", BLUEJ = "9号", GREENJ = "10号", }

7、泛型 T(Type)

简单说就是:泛指的类型,不确定的类型,可以理解为一个占位符(使用T只是习惯,使用任何字母都行)

  • K(Key):表示对象中的键类型;
  • V(Value):表示对象中的值类型;
  • E(Element):表示元素类型。
// T 自定义名称 function myFun<T>(params: T[]) { return params; } myFun <string> ["123", "456"]; // 定义多个泛型 function join<T, P>(first: T, second: P) { return `${first}${second}`; } join <number, string> (1, "2");

8、断言

断言用来手动指定一个值的类型。值 as 类型 or <类型>值

注意在 tsx 语法中必须使用前者,即 值 as 类型。

function judgeWho(animal: Waiter | Teacher) { if ) { (animal as Teacher).skill(); }else{ (animal as Waiter).say(); } }

9、in

在做类型保护时间,类似于数组和字符串的 includes 方法

也有遍历的作用,拿到ts类型定义的Key,获取Key还有个方法:keyof是取类型的key的联合类型 , in是遍历类型的key

function judgeWhoTwo(animal: Waiter | Teacher) { if ("skill" in animal) { animal.skill(); } else { animal.say(); } }

10、类型注解

显式的告诉代码,我们的 count 变量就是一个数字类型,这就叫做类型注解

let count: number; // 类型注解 count = 123;

11、类型推断

  • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注解
// ts可以推断出count 为number类型 let count = 123;

12、void和never

返回值类型,也算是基础类型。没有返回值的函数: void

function sayHello(): void { con("hello world"); }

如果一个函数是永远也执行不完的,就可以定义返回值为 never

function errorFuntion(): never { throw new Error(); con("Hello World"); }

一个函数有入参,也有出参,项目中的常规写法:

// 定义一个小姐姐 interface IGirl { name: string, age: number, skill: string, isAnMo: boolean; number: JiShiEnum; }; // 定义搜索小姐姐的入参 interface ISearchParams extends IGirl{ serviceTime: string; } interface IGetGirls { data: IGirl[]; } // 函数主体 export function getGirls(data: ISearchParams): Promise<IGetGirls> { return axios({ url: `/dabaojian/getGirls`, method: 'GET', data, }); }

13、类型检测

1、typeof

typeof 操作符可以用来获取一个变量或对象的类型

interface Hero { name: string; skill: string; } const zed: Hero = { name: "影流之主", skill: "影子" }; type LOL = typeof zed; // type LOL = Hero

在上面代码中,我们通过 typeof 操作符获取 zed 变量的类型并赋值给 LOL 类型变量,之后我们就可以使用 LOL 类型

const ahri: LOL = { name: "阿狸", skill: "魅惑" };

2、instanceof

class NumberObj { count: number; } function addObj(first: object | NumberObj, second: object | NumberObj) { if (first instanceof NumberObj && second instanceof NumberObj) { return + ; } return 0; }

3、keyof

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

interface Point { x: number; y: number; } // type keys = "x" | "y" type keys = keyof Point;

用 keyof 可以更好的定义数据类型

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] { return o[name] }

14、ts类里的关键字

了解ts关键字的作用,在写base类的时候可能会用到,个人用的不多。

  • public
  • private 类的外部不可用,继承也不行
  • protected 类的外部不可用,继承可以
  • public readOnly xxx 只读属性
  • static funcXXX 静态方法,不需要 new 就可以调用
  • abstract funcXXX 抽象类,所有子类都必须要实现 funcXXX

五、tsconfig

需要去了解 中一些参数的说明,具体参考官方文档

1、作用:

  • 用于标识 TypeScript 项目的根路径;
  • 用于配置 TypeScript 编译器;
  • 用于指定编译的文件。

2、注意事项:

  • tsc -init 生成 ,项目目录下直接 tsc,编译的时候就会走配置文件
  • compilerOptions 内部字段含义 阿宝哥 这篇文章有详细说明
  • 项目别名配置:遇到过的一个坑,仅在项目config中配置别名不生效,需要在中再配置一遍

六、Utility Types

Utility Types: 可以理解为基于ts封装的工具类型;

具体源码解析可以参考:

  • 源码解读utility-types
  • TypeScript Utility Types 学习笔记及源码解析

1、Partial<T>

将T中所有属性转换为可选属性。返回的类型可以是T的任意子集

export interface UserModel { name: string; age?: number; sex: number; } type JUserModel = Partial<UserModel> // = type JUserModel = { name?: string | undefined; age?: number | undefined; sex?: number | undefined; } // 源码解析 type Partial<T> = { [P in keyof T]?: T[P]; };

2、Required<T>

通过将T的所有属性设置为必选属性来构造一个新的类型。与Partial相反

type JUserModel2 = Required<UserModel> // = type JUserModel2 = { name: string; age: number; sex: number; }

3、Readonly<T>

将T中所有属性设置为只读

type JUserModel3 = Readonly<UserModel> // = type JUserModel3 = { readonly name: string; readonly age?: number | undefined; readonly sex: number; }

4、Record<K,T>

构造一个类型,该类型具有一组属性K,每个属性的类型为T。可用于将一个类型的属性映射为另一个类型。Record 后面的泛型就是对象键和值的类型。

简单理解:K对应对应的key,T对应对象的value,返回的就是一个声明好的对象

type TodoProperty = 'title' | 'description'; type Todo = Record<TodoProperty, string>; // = type Todo = { title: string; description: string; } interface IGirl { name: string; age: number; } type allGirls = Record<string, IGirl>

5、Pick<T,K>

在一个声明好的对象中,挑选一部分出来组成一个新的声明对象

interface Todo { title: string; description: string; done: boolean; } type TodoBase = Pick<Todo, "title" | "done">; // = type TodoBase = { title: string; done: boolean; }

6、Omit<T,K>

从T中取出除去K的其他所有属性。与Pick相对。

7、Exclude<T,U>

从T中排除可分配给U的属性,剩余的属性构成新的类型

type T0 = Exclude<'a' | 'b' | 'c', 'a'>; // = type T0 = "b" | "c"

8、Extract<T,U>

从T中抽出可分配给U的属性构成新的类型。与Exclude相反

type T0 = Extract<'a' | 'b' | 'c', 'a'>; // = type T0 = 'a'

9、NonNullable<T>

去除T中的 null 和 undefined 类型

10、Parameters<T>

返回类型为T的函数的参数类型所组成的数组

type T0 = Parameters<() => string>; // [] type T1 = Parameters<(s: string) => void>; // [string]

11、ReturnType<T>

function T的返回类型

type T0 = ReturnType<() => string>; // string type T1 = ReturnType<(s: string) => void>; // void

12、InstanceType<T>

返回构造函数类型T的实例类型; 相当于js中的,不过返回的是对应的实例

class C { x = 0; y = 0; } type T0 = InstanceType<typeof C>; // C

1.《关于igirl我想说一篇够用的TypeScript总结》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《关于igirl我想说一篇够用的TypeScript总结》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/tiyu/2024125.html

上一篇

国米vs埃因霍温前瞻:国米客场抢夺先机,PSV主场欲示威

下一篇

jessiej专题之结石姐Jessie J确诊梅尼埃病

igirl,干货看这篇!85年出生的影视女星,你认得几位?

  • igirl,干货看这篇!85年出生的影视女星,你认得几位?
  • igirl,干货看这篇!85年出生的影视女星,你认得几位?
  • igirl,干货看这篇!85年出生的影视女星,你认得几位?

关于igirl我想说曾无比抗拒用TypeSccript,怕的就是这些难点,现在不怕了

igirl相关介绍,前言 作为前端开发的趋势之一,TypeScript越来越普遍,很多人像我一样写TS后再也回不去了。例如,小demo也需要使用TS(多亏了ts-node[1]),JS需要使用web pack(实际上 但...

【igirl】IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!

  • 【igirl】IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!
  • 【igirl】IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!
  • 【igirl】IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!

igirl,干货看这篇!IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!

  • igirl,干货看这篇!IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!
  • igirl,干货看这篇!IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!
  • igirl,干货看这篇!IG夺冠后Rookie官宣小钰 宁王或准备结婚 全员女装预定!

igirl,干货看这篇!与黎姿时隔22年亲密同框,郑伊健的女人缘一直都开外挂啊!

  • igirl,干货看这篇!与黎姿时隔22年亲密同框,郑伊健的女人缘一直都开外挂啊!
  • igirl,干货看这篇!与黎姿时隔22年亲密同框,郑伊健的女人缘一直都开外挂啊!
  • igirl,干货看这篇!与黎姿时隔22年亲密同框,郑伊健的女人缘一直都开外挂啊!

igirl,干货看这篇!RNG官博公布比赛语音,别人打比赛体力跟不上,RNG是嗓子跟不上

  • igirl,干货看这篇!RNG官博公布比赛语音,别人打比赛体力跟不上,RNG是嗓子跟不上
  • igirl,干货看这篇!RNG官博公布比赛语音,别人打比赛体力跟不上,RNG是嗓子跟不上
  • igirl,干货看这篇!RNG官博公布比赛语音,别人打比赛体力跟不上,RNG是嗓子跟不上

【igirl】专题痘痘、鼻头挤出的“白浆”是什么?有了它,感觉这辈子脸都白洗了

  • 【igirl】专题痘痘、鼻头挤出的“白浆”是什么?有了它,感觉这辈子脸都白洗了
  • 【igirl】专题痘痘、鼻头挤出的“白浆”是什么?有了它,感觉这辈子脸都白洗了
  • 【igirl】专题痘痘、鼻头挤出的“白浆”是什么?有了它,感觉这辈子脸都白洗了

关于igirls女子战队我想说精彩对决爆笑连连《决战!平安京》奇葩大作战

  • 关于igirls女子战队我想说精彩对决爆笑连连《决战!平安京》奇葩大作战
  • 关于igirls女子战队我想说精彩对决爆笑连连《决战!平安京》奇葩大作战
  • 关于igirls女子战队我想说精彩对决爆笑连连《决战!平安京》奇葩大作战