一文带你了解TypeScript 声明合并和混入 桃扇骨 2023-01-06 01:35 142阅读 0赞 ### 全文概览: ### ![在这里插入图片描述][20210113174937677.png] ### 1. 声明合并的概念 ### 声明合并是指 **TypeScript 编译器会将名字相同的多个声明合并为一个声明,合并后的声明同时拥有多个声明的特性。** 在 JavaScrip 中,使用var关键字定义变量时,定义相同名字的变量,后面的会覆盖前面的值。使用 let 定义变量和使用 const 定义常量时,不允许名字重复。在 TypeScript 中,接口、命名空间是可以多次声明的,最后 TypeScript 会将多个同名声明合并为一个: interface Info { name: string } interface Info { age: number } let info: Info info = { // error 类型“{ name: string; }”中缺少属性“age” name: 'TypeScript' } info = { // right name: 'TypeScript', age: 18 } 这里定义了两个同名接口Info,每个接口里都定义了一个必备属性,最后定义info类型为Info时,info的定义要求同时包含name和age属性。 TypeScript的所有声明概括起来,会创建这三种实体之一:**命名空间、类型**和**值**: * 命名空间的创建实际是创建一个对象,对象的属性是在命名空间里export导出的内容; * 类型的声明是创建一个类型并赋给一个名字; * 值的声明就是创建一个在JavaScript中可以使用的值。 <table> <thead> <tr> <th><strong>声明类型</strong></th> <th><strong>创建了命名空间</strong></th> <th><strong>创建了类型</strong></th> <th><strong>创建了值</strong></th> </tr> </thead> <tbody> <tr> <td>Namespace</td> <td>✔️</td> <td></td> <td>✔️</td> </tr> <tr> <td>Class</td> <td></td> <td>✔️</td> <td>✔️</td> </tr> <tr> <td>Enum</td> <td></td> <td>✔️</td> <td>✔️</td> </tr> <tr> <td>Interface</td> <td></td> <td>✔️</td> <td></td> </tr> <tr> <td>Type Alias类型别名</td> <td></td> <td>✔️</td> <td></td> </tr> <tr> <td>Function</td> <td></td> <td></td> <td>✔️</td> </tr> <tr> <td>Variable</td> <td></td> <td></td> <td>✔️</td> </tr> </tbody> </table> 可以看到,只要命名空间创建了命名空间这种实体。Class、Enum两个,Class即是实际的值也作为类使用,Enum编译为JavaScript后也是实际值,在一定条件下,它的成员可以作为类型使用;Interface和类型别名是纯粹的类型;而Funciton和Variable只是创建了JavaScript中可用的值,不能作为类型使用,注意这里Variable是变量,不是常量,常量是可以作为类型使用的。 ### 2. 合并接口 ### 多个同名接口,定义的非函数的成员命名应该是不重复的,如果重复了,类型应该是相同的,否则将会报错。 interface Info { name: string } interface Info { age: number } interface Info { age: boolean // error 后续属性声明必须属于同一类型。属性“age”的类型必须为“number”,但此处却为类型“boolean” } 对于函数成员,每个同名函数成员都会被当成这个函数的重载,且合并时后面的接口具有更高的优先级。来看下多个同名函数成员的例子: interface Res { getRes(input: string): number } interface Res { getRes(input: number): string } const res: Res = { getRes: (input: any): any => { if (typeof input === 'string') return input.length else return String(input) } } res.getRes('123').length // error 类型“number”上不存在属性“length” ### 3. 合并命名空间 ### 同名命名空间最后会将多个命名空间导出的内容进行合并,如下面两个命名空间: namespace Validation { export const checkNumber = () => { } } namespace Validation { export const checkString = () => { } } 这就相当于: namespace Validation { export const checkNumber = () => { } export const checkString = () => { } } 在命名空间里,有时我们并不是把所有内容都对外部可见,对于没有导出的内容,在其它同名命名空间内是无法访问的: namespace Validation { const numberReg = /^[0-9]+$/ export const stringReg = /^[A-Za-z]+$/ export const checkString = () => { } } namespace Validation { export const checkNumber = (value: any) => { return numberReg.test(value) // error 找不到名称“numberReg” } } 上面定义的两个命名空间,numberReg没有使用export导出,所以在第二个同名命名空间内是无法使用的,如果给 const numberReg 前面加上 export,就可以在第二个命名空间使用了。 ### 4. 不同类型合并 ### 命名空间分别和类、函数、枚举都可以合并: * **命名空间和类** 这里要求同名的类和命名空间在定义的时候,类的定义必须在命名空间前面,最后合并之后的效果,一个包含一些以命名空间导出内容为静态属性的类: class Validation { checkType() { } } namespace Validation { export const numberReg = /^[0-9]+$/ export const stringReg = /^[A-Za-z]+$/ export const checkString = () => { } } namespace Validation { export const checkNumber = (value: any) => { return numberReg.test(value) } } console.log(Validation.prototype) // { checkType: fun () {} } console.log(Validation.prototype.constructor) /** { checkNumber: ... checkString: ... numberReg: ... stringReg: ... } */ * **命名空间和函数** 在JavaScript中,函数也是对象,所以可以给一个函数设置属性,在TypeScript中,就可以通过声明合并实现。但同样要求,函数的定义要在同名命名空间前面,我们再拿之前讲过的计数器的实现来看下,如何利用声明合并实现计数器的定义: function countUp () { countUp.count++ } namespace countUp { export let count = 0 } countUp() countUp() console.log(countUp.count) // 2 * **命名空间和枚举** 可以通过命名空间和枚举的合并,为枚举拓展内容,枚举和同名命名空间的先后顺序是没有要求的: enum Colors { red, green, blue } namespace Colors { export const yellow = 3 } console.log(Colors) /* { 0: "red", 1: "green", 2: "blue", red: 0, green: 1, blue: 2, yellow: 3 } */ 通过打印结果可以发现,虽然使用命名空间增加了枚举的成员,但是最后输出的值只有key到index的映射,没有index到key的映射。 ### 5. 混入 ### 混入即把两个对象或者类的内容,混合起来,从而实现一些功能的复用。Vue 中有个api 是 mixins,它可以允许你将一些抽离到对象的属性、方法混入到一些组件。先来看看个在 JavaScript 中实现的简单混入: class A { constructor() { } funcA() { console.log("here"); } } class B { constructor() { } funcB() { } } const mixin = (target, from) => { // 这里定义一个函数来将一个类混入到目标类 Object.getOwnPropertyNames(from).forEach(key => { // 通过Object.getOwnPropertyNames可以获取一个对象自身定义的而非继承来的属性名组成的数组 target[key] = from[key]; // 将源类原型对象上的属性拿来添加到目标类的原型对象上 }); }; mixin(B.prototype, A.prototype); // 传入两个类的原型对象 const b = new B(); b.funcA(); // here 通过`Object.getOwnPropertyNames`方法获取一个对象自身的属性,这里自身指除去继承的属性,获取到属性后将属性赋值给目标对象。 这是 JavaScript 中的简单混入,在 TypeScript 中除了值还有类型的概念,所以简单地将属性赋值到目标元素是不行的,还要处理类型定义,来看下 TypeScript 中混入的例子: class ClassAa { isA: boolean; funcA() { } } class ClassBb { isB: boolean; funcB() { } } // 定义一个类类型接口AB,我们在讲类的时候补充过类和接口之间的继承,也讲过类类型接口 // 这里是让类AB继承ClassAa和ClassBb的类型,所以使用implements关键字,而不是用extends class AB implements ClassAa, ClassBb { constructor() { } isA: boolean = false; // 定义两个实例属性 isB: boolean = false; funcA: () => void; // 定义两个方法,并指定类型 funcB: () => void; } function mixins(base: any, from: any[]) { // 这里我们改造一下,直接传入类,而非其原型对象,base是我们最后要汇总而成的类,from是个数组,是我们要混入的源类组成的数组 from.forEach(fromItem => { Object.getOwnPropertyNames(fromItem.prototype).forEach(key => { base.prototype[key] = fromItem.prototype[key]; }); }); } mixins(AB, [ClassAa, ClassBb]); const ab = new AB(); console.log(ab); /* { isA: false, isB: false, __proto__: { funcA: f () funcB: f () constructor: f } } */ 来看下这个例子。这里定义了两个类 A 和 B,它们分别有自己的方法和实例属性。如果想使用它们的所有属性和方法来创建实例,就需要将它们做一个混合。因为包含类型定义,所以首先要定义一个接口,来包含着两个类中元素类型的定义。所以定义一个类类型接口,然后让这个类类型接口 AB 通过 implements 继承 A 和 B 这两个类,这样类 AB 就会同时拥有类 A 和 B 的类型定义,还有自身定义的一些类型和值。所以此时类 AB 相当于: class AB { isA: boolean = false; isB: boolean = false; funcA: () => void; funcB: () => void; } 然后通过 mixins 函数将类 A 和类 B 的原型对象的属性方法赋值给类 AB,因为类 AB 有 funcA 和 funcB 的类型定义,所以可以把 funcA 和 funcB 函数实体赋值给类 AB。 [20210113174937677.png]: /images/20221119/6d1535634c70404b80e9e334ed1c138c.png?
相关 一文带你了解TypeScript 声明合并和混入 全文概览: ![在这里插入图片描述][20210113174937677.png] 1. 声明合并的概念 声明合并是指 TypeScript 编译器会将名字相同的 桃扇骨/ 2023年01月06日 01:35/ 0 赞/ 143 阅读
相关 一文带你了解TypeScript函数类型 目录 本文概览: 1. 函数类型 (1)为函数定义类型 (2)完整的函数 ╰+哭是因爲堅強的太久メ/ 2022年12月27日 01:25/ 0 赞/ 235 阅读
相关 一文带你了解TypeScript接口使用 目录 本文概览: 1. 接口的基本用法 2. 接口的可选属性 3. 接口的多余属性检查 ﹏ヽ暗。殇╰゛Y/ 2022年12月27日 01:11/ 0 赞/ 232 阅读
相关 一文带你了解TypeScript数据类型 目录 本文概览: 1. TypeScript的数据类型概述 (1)常见的9种数据类型 清疚/ 2022年12月26日 13:26/ 0 赞/ 198 阅读
还没有评论,来说两句吧...