第五节：TypeScript泛型详解和模块、模块化、namespace、类型查找、declare剖析 ...

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一. 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
}

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

vue-cli3+typescript+router发布时间：2022-07-18

TypeScript特性发布时间：2022-07-18

客服电话

电子邮件

第五节：TypeScript泛型详解和模块、模块化、namespace、类型查找、declare剖析 ...

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053

客服电话

电子邮件

第五节：TypeScript泛型详解 和 模块、模块化、namespace、类型查找、declare剖析 ...

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053

第五节：TypeScript泛型详解和模块、模块化、namespace、类型查找、declare剖析 ...