typescript - 使用声明合并到 ES2015 模块语法重构 TypeScript 代码
问题描述
我有一个类和一个名称空间,其声明合并定义如下:
// product.ts
export class Product {
constructor(public name: string, public seller: Product.Seller, public price: Product.Price) {}
}
export namespace Product {
export class Seller {
constructor(public name: string, public country: string) {}
}
export class Price {
constructor(public currency: string, public value: number) {}
}
}
export default Product
我可以将它导入另一个文件并使用 Product、Product.Seller 和 Product.Price 来创建新对象以及进行类型检查:
// index.js
import Product from './product'
function discountPrice(price: Product.Price, discount: number): Product.Price {
return new Product.Price(price.currency, price.value * discount)
}
const seller = new Product.Seller('John', 'US')
const price = new Product.Price('USD', 749.9)
const priceWithDiscount = discountPrice(price, 0.7)
const product = new Product('Dell Laptop', seller, priceWithDiscount)
在我对文件进行 lint 之前,一切都运行良好。我收到错误“ES2015 模块语法优于自定义 TypeScript 模块和命名空间”。
该错误很直观,我可以通过删除命名空间并将 product.ts 作为命名模块导入来轻松摆脱它:
// product.ts
export class Product {
constructor(public name: string, public seller: Seller, public price: Price) {}
}
export class Seller {
constructor(public name: string, public country: string) {}
}
export class Price {
constructor(public currency: string, public value: number) {}
}
// index.js
import * as Product from './product'
问题是,现在 Product 类本身位于 Product 模块中,我必须将其称为 Product.Product:
const product = new Product.Product('Laptop', seller, priceWithDiscount)
我再次尝试匿名导出默认的 Product 类,但我仍然得到一个错误,最后我不得不将它称为 Product.default:
// product.ts
export default class {
constructor(public name: string, public seller: Seller, public price: Price) {}
}
...
// index.ts
const product = new Product.default('Laptop', seller, priceWithDiscount)
是否可以在遵守无命名空间规则的同时保留原始设计的结果?任何帮助将不胜感激!
解决方案
有了命名空间,两个内部类本质上就变成了Product
构造函数的属性。您仍然可以使用静态成员来实现:
export class Seller {
constructor(public name: string, public country: string) { }
}
export class Price {
constructor(public currency: string, public value: number) { }
}
export class Product {
constructor(public name: string, public seller: Seller, public price: Price) { }
static Seller = Seller
static Price = Price
}
export default Product;
推荐阅读
- python - 从 URL 解析 XML 并从标签获取信息
- html - 如何选择某个DOM元素之后的元素
- svg - 使 svg 宽度为 100%
- java - 是否可以在不使用 Direction API 的情况下在两个位置之间绘制路线
- prestashop - 如何覆盖 Prestashop 1.7 控制器类
- r - 如何使用 rollapply 函数找到局部最小值?
- python - 我不知道 argv 到底是做什么的,我需要解释一下
- json - 触发状态更新以在 Azure DevOps 中发送补丁方法
- android - 小吃店扩展功能的 Lint 错误
- docker - Nginx 配置问题:k8s 集群上的 vue.js 历史模式