Typescript: モジュール定義をグローバル変数として宣言できるようにする

作成日 2015年05月15日  ·  11コメント  ·  ソース: microsoft/TypeScript

Reactタイプ定義ファイル(外部モジュールを使用して宣言されている)があります。 私のソースファイルでは、通常、次のことを行います。

import * as R from "react"

そして、強く型付けされた方法でR.createElement(...などを楽しく使用できます。 私もできます:

let _r = R;
_r.createElement(...

私が欲しいのは、すべてのファイルにRをインポートする必要はなく、代わりにグローバル宣言として持つことです(はい、いくつかの変数でグローバル名前空間を汚染するつもりです)。 私は.d.ts試しました:

import * as React from "react";
declare var R : React;

これは機能しませんが、「名前 'React'が見つかりません」というメッセージが表示されます。 基盤となるreact.d.tsを変更せずに、モジュール全体をグローバルとしてエクスポートする別の方法はありますか?

Question

最も参考になるコメント

こんにちは@Evertt確かに私も今このエラーが発生しています。 最初、私のソースコードはES6モジュール構文を使用していませんでしたが、いくつかのファイルをその構文にリファクタリングすると、同じエラーが発生しました。 調査を行いましたが、今は2番目のファイルglobals.d.tsを作成し、それをtypingsフォルダーにも入れています。

import * as _R from 'ramda';
import * as _mobx from 'mobx';

declare global {
  const R: typeof _R;
  const mobx: typeof _mobx;
}

実際、このファイルだけでtypescriptコンパイラを「満たす」ように見えるので、理論的には、前述した他のファイルは必要ありません。 ただし、私の特定のケース(WebStormを使用しています)では、globals.d.tsファイルしかない場合、IDEは常にモジュールをインポートするようにpingを送信し、それらのグローバルの完了も不完全でした。 だから私は基本的に両方のファイルをtypescriptと私のIDEを満たすtypingsディレクトリに保存しました。 あまり良くありませんが、通常使用するいくつかのグローバルでは、これらのファイルを維持しても問題ないと思います。

これは私のtsconfig.jsonです。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "amd",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "lib": [
      "ES6",
      "DOM",
      "ScriptHost"
    ],
    "sourceMap": true,
    "strictNullChecks": true
  },
  "include": [
    "types/**/*",
    "src/**/*"
  ]
}

バンドルにwebpackなどを使用していません。 個々のファイルをトランスパイルし、 https://github.com/SAP/openui5モジュールシステム(AMDに似ています)を介してロードし、本番用にのみバンドルします。

Typescriptのバージョンは:2.2.1

お役に立てば幸いです。

全てのコメント11件

import宣言をソースファイルに追加すると、外部モジュールと見なされるため、これを行うことはできません。 グローバルを使用するReact定義ファイルを使用していない理由は何ですか?

https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react-global.d.ts

これで問題が解決するように私には見えます。

私は実際にreact-global.d.tsも試しましたが、これは明らかにReactをグローバル空間に配置しますが、グローバルに名前を変更してTypescriptに通知するにはどうすればよいですか?

declare var _r = React;  // error Cannot find name 'React';

私の実際のユースケースは、ユーティリティ/共通タイプのモジュールをグローバルスペースに持ち上げることができるため、それに到達するために多数の相対パスインポートを使用する必要がないことです。 これはJavascriptで実行できますが、Typescriptコンパイラに実行したことを通知する方法に苦労しています。

@ ahejlsberg-エッジケースについての私の

たとえば、 r.d.ts宣言ファイルを作成できます。

/// <reference path="react-global.d.ts"/>
declare var R: typeof React;

そして、どこでもそのファイルを参照するだけです。 またはさらに良い:

/// <reference path="react-global.d.ts"/>
import R = React;

これにより、React asR.xxxから型を参照することもできます。

私はこれまでtypeof使用を見たことがありません-かなりクールです。 これは、 .d.tsから定義済みのモジュールには最適ですが、Typescriptで定義された外部モジュールをグローバルスペースに持ち上げて、Typescriptに認識させる方法がまだわかりません。 たぶんそれはアンチパターンであり、私はそれを乗り越える必要があるからです...

外部モジュールをサポートするためにtypeofを拡張するようにいくつかのリクエスト(例:#2357)がありましたが、これまでのところ、この機能に対する需要はそれほど多くありません。

一般的に言って、プログラムは外部モジュールなしで書かれるか、外部モジュールだけで書かれます。 AMDブラウザアプリのブートストラップ部分を除いて、混合モデルでさえ可能な実行環境は実際にはありません。 そうです、それはほとんどアンチパターンです。

これについて私をユーモアを交えてくれてありがとう! 私は外部モジュールの調査を始めたばかりです(今後のAngular2およびAureliaフレームワークで遊ぶため)。 #17、#2338、#2839のような問題は、私が最終的に探しているものの多くのようです。 現在のプロジェクトを深く掘り下げていくうちに、より明確なフィードバックが得られることを願っています。

これはまだできませんか? TypeScriptをVueJSで使用しようとしていますが、グローバル名前空間にいくつかのものをインポートして、すべてのコンポーネントがそれらをインポートせずに使用できるようにしていただければ幸いです。 これを機能させるために進歩やハックはありましたか?

@Evertt

typescript 2.xxで明らかに機能する方法を見つけました。私の場合、ライブラリramdaをグローバルRとして公開したいと思います。

  1. npm install ramda @types/ramda
  2. ファイルを作成typings/ramda.d.ts
  3. 新しく作成したtypingsフォルダーを.tsconfig.jsonのインクルードに追加します。
"include": [
    "typings/**/*",
     ...
]
  1. typings/ramda.d.ts魔法を追加します:
import * as _R from 'ramda';

export as namespace R;
export = _R; 

これで、プロジェクト内のすべてのtsファイルは、入力されたグローバルRがあると想定しますが、これらのファイルにはそれ以上のインポートなどは一切行われません。

types/vue.d.ts次のコードを使用してそれを実行しようとすると、 @ geekflyer

import * as V from 'vue'

export as namespace Vue
export = V

そのグローバルVueどこかで使用しようとすると、次のエラーが発生します。

error TS2686: 'Vue' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ある時点でそのエラーも発生しましたか? もしそうなら、あなたはそれについて何をしましたか?

編集

そのエラーが発生せず、なぜ私がそのエラーを発生させるのかわからない場合は、tsconfig.json全体、さらにはwebpack構成を表示してもらえますか?

こんにちは@Evertt確かに私も今このエラーが発生しています。 最初、私のソースコードはES6モジュール構文を使用していませんでしたが、いくつかのファイルをその構文にリファクタリングすると、同じエラーが発生しました。 調査を行いましたが、今は2番目のファイルglobals.d.tsを作成し、それをtypingsフォルダーにも入れています。

import * as _R from 'ramda';
import * as _mobx from 'mobx';

declare global {
  const R: typeof _R;
  const mobx: typeof _mobx;
}

実際、このファイルだけでtypescriptコンパイラを「満たす」ように見えるので、理論的には、前述した他のファイルは必要ありません。 ただし、私の特定のケース(WebStormを使用しています)では、globals.d.tsファイルしかない場合、IDEは常にモジュールをインポートするようにpingを送信し、それらのグローバルの完了も不完全でした。 だから私は基本的に両方のファイルをtypescriptと私のIDEを満たすtypingsディレクトリに保存しました。 あまり良くありませんが、通常使用するいくつかのグローバルでは、これらのファイルを維持しても問題ないと思います。

これは私のtsconfig.jsonです。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "amd",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "lib": [
      "ES6",
      "DOM",
      "ScriptHost"
    ],
    "sourceMap": true,
    "strictNullChecks": true
  },
  "include": [
    "types/**/*",
    "src/**/*"
  ]
}

バンドルにwebpackなどを使用していません。 個々のファイルをトランスパイルし、 https://github.com/SAP/openui5モジュールシステム(AMDに似ています)を介してロードし、本番用にのみバンドルします。

Typescriptのバージョンは:2.2.1

お役に立てば幸いです。

@geekflyerありがとうございました

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

Zlatkovsky picture Zlatkovsky  ·  3コメント

Antony-Jones picture Antony-Jones  ·  3コメント

kyasbal-1994 picture kyasbal-1994  ·  3コメント

siddjain picture siddjain  ·  3コメント

jbondc picture jbondc  ·  3コメント