深入浅出 TypeScript | 青训营笔记

57 阅读3分钟

1TypeScript带来了什么 类型安全 下一代JS特性 完善的工具链 不仅仅是一门语言,更是生产力工具。

1TypsScript推荐 Awesome Typescript:TS开源教程及应用 Iypescript Playground:TS到JS在线编译。

2TS基础-基础类型

  1. boolean,number,string
  2. undefined、 null
  3. any、unknown、void
  4. never 5.数组类型0 6.元组类型 tuple function test(x: string | number): boolean { if Ctypeof x = 'string'){ return true; } else if (typeof x == 'number'){ return false; return throwError('参数格式不对“); 9 10 13 function throwError(message: string): never f throw new ErrorlnesaneI

2_TS基础-函数类型 定义:TS定义函数类型时要定义输入参数类型和输出类型 输入参数:参数支持可选参数和默认参数。

2_TS基础-interface 定义:接口是为了定义对象类型 特点: -可选属性:? -只读属性:readonly -可以描述函数类型 -可以描述自定义属性 总结:接口非常灵活 duck typing interface Person ( name: string age: number const pl: Person = ( name:'lin' C name Interface Randonkey( [propNane: string]: string const obj: Randonkey =( a:'hetlo', b:'world', c:'typescript'。

2_TS基础-类 定义:写法和JS差不多,增加了一些定义 特点: -增加了public、private、protected修饰符 -抽象类: -只能被继承,不能被实例化 -作为基类,抽象方法必须被子类实现 -interface约束类,使用implements关键字

3_TS进阶-高级类型 let num: number | string num ='eight" 1.联合类型| 2.交叉类型& 3.类型断言 4.类型别名(type VS interface) .定义:给类型起个别名 -相同点: 1.都可以定义对象或函数 2.都允许继承 .差异点:

  1. interface是TS用来定义对象,type是用来定义别名方便使用; 2.type可以定义基本类型,interface不行; 3.interface可以合并重复声明,type不行;

3 TS进阶-泛型-什么时候需要泛型? 三万定义: 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型。 这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件, 个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

基本定义: 1.泛型的语法是里面写类型参数,一般用T表示; 2.使用时有两种方法指定类型: 1.定义要使用的类型 2.通过TS类型推断,自动推导类型 3.泛型的作用是临时占位,之后通过传来的类型进行推导; function print(arg:T):T { console.log(arg) return arg print('hello') // 定义 T为 string print('hello') 1/ TS 类型推断,自动推导类型为string

3 TS进阶-泛型工具类型-基础操作符 ·typeof:获取类型 ·keyof:获取所有键 •in:遍历枚举类型 •T[K]:索引访问 •extends:泛型约束

3 TS进阶-泛型工具类型-常用工具类型 •PartialT>:将类型属性变为可选 ·Required:将类型属性产一以注 • Readonly:将类型属性 •Pick、Record... ype Partialct> a [p in keyof T]?: T[P]; uno DoguredcT>2 n keyof T]-?: T[P] 1;

4 TS实战-声明文件 •declare: 三方库需要类型声明文件 •.d.ts:声明文件定义 •@types:三方库TS类型包 ·tsconfig.json:定义TS的配置 <ByteTech 初阶训练营 04_TS实战-泛型约束后端接口类型 mport arlos fros 'sylA interface API ( /boow/detait::( id: nunber /book/comnent':( id:nunber comnent: string Case1:路径错误 jew Problem (XFE)No wick fies avalabl function requestcT extends keyof API>(urL: T, Ob1: API(T]) return axios.post(url, obj) request('/book/comment',( 10:1, Went:“非常待! #青训营笔记