客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
一. ts泛型详解 1. 泛型实现参数化 // 当定义一个函数，不确定参数类型的时候，可以使用泛型 function myPrint<T, M>(obj1: T, obj2: M): void { console.log(obj1); console.log(obj2); } // 调用方式1：明确传入类型 myPrint<string, number>('ypf', 18); // 调用方式2：使用类型推导 myPrint(20, { name: 'ypf', address: 'beijing' }); 2. 泛型接口 //1.基本用法 interface IPerson<T1, T2> { name: T1 age: T2 } // 实现接口 const p1: IPerson<string, number> = { name: 'ypf', age: 18 } // 2. 指定泛型的默认值 interface IPerson2<T1=string, T2=number> { name: T1 age: T2 } // 实现接口 const p2: IPerson2<string, number> = { name: 'ypf', age: 18 } 3. 泛型类 class Point<T>{ x:T y:T z:T constructor(x:T,y:T,z:T){ this.x=x; this.y=y; this.z=z; } } // 几种调用方式 const p1=new Point('1','2','3'); const p2=new Point<string>('1','2','3'); const p3:Point<string>=new Point('1','2','3'); 4. 泛型约束 关键字 extends
interface ILength { length: number } function getLength<T extends ILength>(arg: T) { console.log(arg.length); } getLength("abc"); getLength(['abc','def']); getLength({length:100});
二. ts综合补充 1. 模块化开发 TypeScript支持两种方式来控制我们的作用域： (1). 模块化：每个文件可以是一个独立的模块，支持ES Module，也支持CommonJS； (2). 命名空间：通过namespace来声明一个命名空间 模块化代码 // 1. 通过ESModule的模式导出函数 （按需导出） export function add(m1: number, m2: number) { return m1 + m2; } export function sub(m1: number, m2: number) { return m1 - m2; } 调用： // ESModule的调用 import { add, sub } from './utils/test1' console.log(add(10, 5)); console.log(sub(10, 5)); 命名空间代码 // 命名空间在TypeScript早期时，称之为内部模块，主要目的是将一个模块内部再进行作用域的划分，防止一些命名冲突的问题。 export namespace timeUitls{ export function format(time:string){ return '2021-11-11'; } export let msg:string='ypf'; } export namespace priceUtils{ export function format(price:number){ return '99.99' } } 调用： // namespace的调用 import { timeUitls, priceUtils } from './utils/test2'; console.log(timeUitls.format('2021-11-11')); console.log(timeUitls.msg); console.log(priceUtils.format(99.99)) 2. 类型查找(.d.ts) xx.d.ts文件：用来做类型的声明(declare)。 它仅仅用来做类型检测，告知typescript我们有哪些类型。(重点！) typescript会在哪里查找我们的类型声明呢？ 内置类型声明； 外部定义类型声明； 自己定义类型声明； 特别注意：该文件的名称可以自定义，比如ypf1.d.ts，另外可以同时定义多个.d.ts文件，存放的位置没有特别要求，一般放在根目录下。 (1). 内置类型声明 内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件； 包括比如Math、Date等内置类型，也包括DOM API，比如Window、Document等； 内置类型声明通常在我们安装typescript的环境中会带有的；详见：https://github.com/microsoft/TypeScript/tree/main/lib (2). 外部定义类型声明 外部类型声明通常是我们使用一些库（比如第三方库）时，需要的一些类型声明。 这些库通常有两种类型声明方式： 方式一：在自己库中进行类型声明（编写.d.ts文件），比如axios 方式二：通过社区的一个公有库DefinitelyTyped存放类型声明文件 该库的GitHub地址：https://github.com/DefinitelyTyped/DefinitelyTyped/ 该库查找声明安装方式的地址：https://www.typescriptlang.org/dt/search?search= （比如我们安装react的类型声明：npm i @types/lodash --save-dev）
(3). 自己定义类型声明 情况一：我们使用的第三方库是一个纯的JavaScript库，没有对应的声明文件；比如lodash 情况二：我们给自己的代码中声明一些类型，方便在其他地方直接进行使用； 3. declare声明其它 (1). 声明变量、函数、类 // 声明变量/函数/类 declare let whyName: string declare let whyAge: number declare let whyHeight: number declare function whyFoo(): void declare class Person { name: string age: number constructor(name: string, age: number) } (2). 声明模块 我们也可以声明模块，比如lodash模块默认不能使用的情况，可以自己来声明这个模块： 声明： // 先 【npm install lodash -D】 // 还需要【npm install @types/lodash -D】 declare module 'lodash' { export function join(arr: any[]): string } 调用： // 模块 import lodash from 'lodash' console.log(lodash.join(['msg1','msg2'])); (3). 声明文件 在某些情况下，我们也可以声明文件： 比如在开发vue的过程中，默认是不识别我们的.vue文件的，那么我们就需要对其进行文件的声明； 比如在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的，也需要对其进行声明； // 声明文件 declare module '*.jpg' declare module '*.jpeg' declare module '*.png' declare module '*.svg' declare module '*.gif' (4). 声明命名空间 // 声明命名空间 declare namespace $ { export function ajax(settings: any): any }
!
|
请发表评论