写点什么

TypeScript | 第六章:理解声明合并,以及编写声明文件

用户头像
梁龙先森
关注
发布于: 2020 年 12 月 26 日
TypeScript | 第六章:理解声明合并,以及编写声明文件

TypeScript系列学习笔记:

TypeScript | 第一章:环境搭建及基础数据类型

TypeScript | 第二章:类、接口和之间的关系

TypeScript | 第三章:函数、泛型和枚举

TypeScript | 第四章:命名空间和模块

TypeScript | 第五章:高级类型

TypeScript | 第七章:配置文件说明

一、理解声明合并

1. 接口声明合并
interface Man {
age: number;
// name: number;
getName(name: number): number; // 5
getName(name: 'a'): string; // 2
}
interface Man {
age: number;
name:string,
getName(name: string): string; // 3
getName(name: string[]): string[]; // 4
getName(name: 'b'): string; // 1
}
// 接口声明合并个注意规则:
// 接口可以不在同一个文件
// 非函数成员需保持唯一性,不唯一,需保持类型相同
// 函数成员,会被声明为函数重载,
// 重载需要注意函数声明的顺序,后续接口优于前接口,参数为字符串字面量,则提升到最顶端,顺序如代码标示。
let m: Man = {
name:'张三',
age: 1,
// 实现指定更为宽泛的类型
foo(bar: any) {
return bar
}
}
2. 命名空间声明合并

命名空间中导出的成员不能重复定义。

namespace Shape{
const pi = Math.PI
export function circle(r:number){
return pi*r**2
}
}
namespace Shape{
export function circle(r:number){} // 报错,不能重复定义
}
3. 命名空间和函数的合并
function Fun() {}
namespace Fun { // 需放于函数之后
export let version = '1.0'
}
console.log(Fun.version) // 相当于给函数增加属性
4. 命名空间和类
class Cls {}
namespace Cls { // 需放于类之后
export let ver = 1
}
console.log(Cls.ver) // 相当于给类增加静态属性
4. 命名空间和枚举
enum Color {
Red,
Green,
Blue
}
namespace Color {
export function getColor() {}
}
console.log(Color) // 相当于给枚举类型增加了方法

二、编写声明文件

声明文件:为了解决将这些库里的函数和方法体去掉后只保留导出类型声明,而产生的一个描述 JavaScript 库和模块信息的声明文件。

声明文件以 .d.ts 为后缀。

declare:为外部变量提供声明。

ts使用类库,通常要安装类型声明包,如:npm i @types/jquery -D。查找类库的地址为:https://www.npmjs.com/package/package,如若找不到对应类库,则需自己编写,下面看看如何编写全局类库、模块类库以及umd类库。

1. 全局类库
// js编写的类库:glob.js
function globLib(options) {}
globLib.version = '1.0.0';
globLib.doSomething = function() {};



// ts编写的类库声明文件:glob.d.ts
declare function globLib(options: globLib.Options): void;
declare namespace globLib {
const version: string;
function doSomething(): void;
interface Options {
[key: string]: any
}
}
2. module类库
const version = '1.0.0';
function doSomething() {}
function moduleLib(options) {}
moduleLib.version = version;
moduleLib.doSomething = doSomething;
module.exports = moduleLib;



// 模块的声明文件
declare function moduleLib(options: Options): void
interface Options {
[key: string]: any
}
declare namespace moduleLib {
const version: string
function doSomething(): void
}
export = moduleLib
3. umd类库

UMD模块是指那些既可以作为模块使用(通过导入)又可以作为全局(在没有模块加载器的环境里)使用的模块。

(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof module === "object" && module.exports) {
module.exports = factory();
} else {
root.umdLib = factory();
}
}(this, function() {
return {
version: '1.0.0',
doSomething() {}
}
}));



// 声明文件
declare namespace umdLib {
const version: string
function doSomething(): void
}
export as namespace umdLib
export = umdLib

三、总结

至此我们完成了声明合并,以及编写声明文件的学习。

发布于: 2020 年 12 月 26 日阅读数: 39
用户头像

梁龙先森

关注

寒江孤影,江湖故人,相逢何必曾相识。 2018.03.17 加入

1月的计划是:重学JS,点个关注,一起学习。

评论

发布
暂无评论
TypeScript | 第六章:理解声明合并,以及编写声明文件