web-dev-qa-db-ja.com

TypeScriptタイプ定義ファイルから列挙型をエクスポートする

使用しているライブラリの型定義を書いています。ライブラリの1つの関数は、整数でクリックされたマウスボタンを識別します。

 //index.d.ts
 export as namespace myLib;
 // activates the library listening for a specific mouse button
 function activate(button : number ) : void

これをより良くするために列挙型を導入しました：

//index.d.ts
export as namespace myLib;
export enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

export function activate(button : MouseButton ) : void;

これで、この関数をインポートして使用すると、すべてがコンパイルされますが、ブラウザーで実行したときに列挙型が取り除かれ、未定義になっていると思います。エラーメッセージにはCannot read property 'LEFT' of undefinedと表示されます。

したがって、ファイルを次のように再配置しました。

//MouseButton.ts
export enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

//index.d.ts
export as namespace myLib;
import {MouseButton} from MouseButton;
export {MouseButton} from MouseButton;
export function activate(button : MouseButton ) : void;

これでimport {MouseButton} from "myLib/MouseButton"; import * as myLib from "myLib"ができます。ただし、これには2つのインポートが必要です。 myLib.MouseButtonを参照すると、コンパイルはされますが実行されません。

import * as myLibステートメントを介してインポートされたMouseButtonを介してmyLib enumをインポートおよび参照する方法はありますか？私はそれを行う方法を説明する答えを探すだけでなく、なぜ私の解決策が機能しないのか、なぜそれが不可能であるのかを説明する答えを探しています。何が悪いのかを説明するリソースへのヒントも高く評価されています

PS：ここで提案されている構文も試してみました TypeScript enumを名前空間から再エクスポートしますか？ ですが、それも機能しませんでした。

PPS：問題のモジュールは、angular 6プロジェクトで使用されている基本的なプロジェクト（ https://github.com/cornerstonejs/cornerstone ）のUMDモジュールです。

typescripttypescript-typings
5
t.animal

（t.animal自身の答えを完成させるため）

宣言ファイルの作成は困難です。長い documentation を参照してください。既存の.d.tsファイルを調べると役立つ場合があります。

enumについて、const enumとして宣言することは、クリーンでシンプルなアプローチです。これは、たとえばjqueryに対して行われることです。MouseおよびKeyについては @ types/jquery/index.d.ts を参照してください。標準の列挙型はJavaScriptで配列としてコンパイルされるので便利ですが、const enumメンバーは値として直接コンパイルされます。 TypeScript Playground を参照してください。

3
Romain Deneau

上記の Romain Denauのコメント を利用して解決しました。それは私を正しい方向に動かしました：TypeScriptコンパイラは列挙型からどのコードを生成しますか（ https://www.typescriptlang.org/docs/handbook/enums.html#enums-at-runtime を参照） ）？ enum constを宣言すると、TypeScriptコンパイラが識別子をそれぞれの値と完全に入れ替えて、効果的にインライン化できます。 enumが製品コードにリークすることはもうありません。ありがとう！

//index.d.ts
export as namespace myLib;

export const enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

export function activate(button : MouseButton ) : void;
4
t.animal