简体   繁体   English

为什么导出接口、枚举或类型不会在 TypeScript 中创建模块?

[英]Why does exporting an interface, enum or type not create a module in TypeScript?

I have the following TS file ( enums.ts ) I try to import in another file我有以下 TS 文件 ( enums.ts ) 我尝试在另一个文件中导入

export interface ZZZ { 
  z: number
}

export const enum EnumTest {
  T2,
  T3,
  XY
}

export type EnumTest_Strings = keyof typeof EnumTest;

export function toto(){ }; // commenting this 'removes' the module

If I remove the last line, I can't import anything in the other file.如果我删除最后一行,我将无法在另一个文件中导入任何内容。 It says it does not find a module " ./enums ".它说它没有找到模块“ ./enums ”。

Is there a way to create a module without having to declare functions?有没有一种无需声明函数就可以创建模块的方法?

For const enum对于const enum

You will want to enable preserveConstEnums in your tsconfig.json file.您需要在tsconfig.json文件中启用preserveConstEnums

preserveConstEnums: Do not erase const enum declarations in generated code. preserveConstEnums:不要删除生成代码中的 const 枚举声明。 const enums provide a way to reduce the overall memory footprint of your application at runtime by emitting the enum value instead of a reference. const 枚举提供了一种通过发出枚举值而不是引用来减少应用程序在运行时的整体 memory 占用空间的方法。

With preserveConstEnums enabled then this typescript code:启用preserveConstEnums然后这个 typescript 代码:

export interface ZZZ { 
  z: number
}

export const enum EnumTest {
  T2,
  T3,
  XY
}

export type EnumTest_Strings = keyof typeof EnumTest;

Will result in this javascript code:将导致此 javascript 代码:

export var EnumTest;
(function (EnumTest) {
    EnumTest[EnumTest["T2"] = 0] = "T2";
    EnumTest[EnumTest["T3"] = 1] = "T3";
    EnumTest[EnumTest["XY"] = 2] = "XY";
})(EnumTest || (EnumTest = {}));

playground 操场

For regular enum对于常规enum

Alternatively you can use a regular enum instead of a const enum .或者,您可以使用常规enum而不是const enum

With a regular enum then this typescript code:使用常规enum ,则此 typescript 代码:

export interface ZZZ { 
  z: number
}

export enum EnumTest {
  T2,
  T3,
  XY
}

export type EnumTest_Strings = keyof typeof EnumTest;

Will result in this javascript code:将导致此 javascript 代码:

export var EnumTest;
(function (EnumTest) {
    EnumTest[EnumTest["T2"] = 0] = "T2";
    EnumTest[EnumTest["T3"] = 1] = "T3";
    EnumTest[EnumTest["XY"] = 2] = "XY";
})(EnumTest || (EnumTest = {}));

playground 操场

Difference between enum & const enum enumconst enum的区别

Regular enum :s are:常规enum :s 是:

  • More coprehensive than const enum :sconst enum更全面:s
  • Compiled down to javascript object编译下来为 javascript object

const enum :s are: const enum :s 是:

  • More restrictive then regular enum :s比常规enum更严格:s
  • Compiled "away" during transpilation.在转译过程中“离开”编译。

This means that const enum :s wont be accessible during runtime (or as part of a library), however const enum :s leave less of a footprint in the resulting javascript.这意味着const enum :s 在运行时(或作为库的一部分)无法访问,但是const enum :s 在生成的 javascript 中留下的足迹更少。 For example: console.log(EnumTest.XY) will either transpile to console.log(EnumTest.XY) if EnumTest is a regular enum , or it will transpile to console.log(2 /* XY */) if EnumTest is a const enum .例如:如果 EnumTest 是常规枚举, console.log(EnumTest.XY)将转译为console.log(EnumTest.XY) EnumTest如果EnumTest是一个常规enum ,它将转译为console.log(2 /* XY */) const enum

playground 操场

Regarding interface and type关于interfacetype

These are "just" types, they won't be accessible or relevant in vanilla javascript in any shape or form, so typescript won't include them in any way in the build output by default.这些是“只是”类型,它们在原版 javascript 中无法以任何形状或形式访问或相关,因此 typescript 默认不会以任何方式将它们包含在构建 output 中。 You can still include them in your output in the form of a type declaration if you enable declaration in your tsconfig.json .如果您在 tsconfig.json 中启用declaration ,您仍然可以以类型声明的形式将它们包含在tsconfig.json中。 This wont change your codes behavior during runtime or during interop with javascript.这不会在运行时或与 javascript 互操作期间改变您的代码行为。 But it will allow other typescript files to import your transpiled javascript as if it was regular typescript.但它会允许其他 typescript 文件导入您转译的 javascript,就像它是常规 typescript 一样。

With declaration enabled then this typescript code:启用declaration后,此 typescript 代码:

export interface ZZZ { 
  z: number
}

export enum EnumTest {
  T2,
  T3,
  XY
}

export type EnumTest_Strings = keyof typeof EnumTest;

Will result in this declaration file ( .d.ts ) alongside your javascript:将在您的 javascript 旁边生成此声明文件 ( .d.ts ):

export interface ZZZ {
    z: number;
}
export declare enum EnumTest {
    T2 = 0,
    T3 = 1,
    XY = 2
}
export declare type EnumTest_Strings = keyof typeof EnumTest;

playground 操场

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM