TypeScriptでグローバル変数を作成します -- typescript フィールド 関連 問題

Create a global variable in TypeScript












97
vote

問題

日本語

JavaScriptでは、これを行うことができます:

<事前> <コード> something = 'testing';

と別のファイルで:

<事前> <コード> if (something === 'testing')

と<コード> something を定義する(正しい順序で呼び出された限り)定義されます。

Tysscriptでそれをする方法を理解することはできません。

これは私が試したものです。

.d.tsファイル:

<事前> <コード> interface Window { something: string; }

main.tsファイルに:

<事前> <コード> window.something = 'testing';

その後別のファイルで:

<事前> <コード> if (window.something === 'testing')

とこれは機能します。しかし、 window. の一部を失うことができ、<コード> addPlot0 をグローバルにすることができます。 Tysscriptでそれをする方法はありますか?

(誰かが興味がある場合は、本当に私のアプリケーションのために私のロギングを設定しようとしています。インポートして作成する必要なしに addPlot1 を任意のファイルから呼び出すことができます。)< / P>

英語

In JavaScript I can just do this:

 something = 'testing'; 

And then in another file:

 if (something === 'testing') 

and it will have something be defined (as long as they were called in the correct order).

I can't seem to figure out how to do that in TypeScript.

This is what I have tried.

In a .d.ts file:

interface Window { something: string; } 

Then in my main.ts file:

 window.something = 'testing'; 

then in another file:

 if (window.something  === 'testing') 

And this works. But I want to be able to lose the window. part of it and just have my something be global. Is there a way to do that in TypeScript?

(In case someone is interested, I am really trying to setup my logging for my application. I want to be able to call log.Debug from any file without having to import and create objects.)

</div
  
 
 

回答リスト

3
 
vote
vote
ベストアンサー
 

大丈夫だから、これはおそらくあなたがしたことであるがとにかく...

しかし、私は同じようにします...

純粋なタイプの字幕でそれをするためにできることは、 Me.lstDrives.Items.Clear() For Each item As DriveInfo In My.Computer.FileSystem.Drives If item.DriveType = DriveType.Removable Or item.DriveType = DriveType.CDRom Then Me.lstDrives.Items.Add(item.Name) End If Next 1 機能を使用することです。

<事前> <コード> Me.lstDrives.Items.Clear() For Each item As DriveInfo In My.Computer.FileSystem.Drives If item.DriveType = DriveType.Removable Or item.DriveType = DriveType.CDRom Then Me.lstDrives.Items.Add(item.Name) End If Next 2

以降は

をすることができるでしょう <事前> <コード> Me.lstDrives.Items.Clear() For Each item As DriveInfo In My.Computer.FileSystem.Drives If item.DriveType = DriveType.Removable Or item.DriveType = DriveType.CDRom Then Me.lstDrives.Items.Add(item.Name) End If Next 3

これは、タイプスクリプトがコンパイルされていない命令の実行を強制するためのハック以外のもので、TypesScriptのための Me.lstDrives.Items.Clear() For Each item As DriveInfo In My.Computer.FileSystem.Drives If item.DriveType = DriveType.Removable Or item.DriveType = DriveType.CDRom Then Me.lstDrives.Items.Add(item.Name) End If Next 4 の残りの部分をコンパイルするための

 

Okay, so this is probably even uglier that what you did, but anyway...

but I do the same so...

What you can do to do it in pure TypeScript, is to use the eval function like so :

declare var something: string; eval("something = 'testing';") 

And later you'll be able to do

if (something === 'testing') 

This is nothing more than a hack to force executing the instruction without TypeScript refusing to compile, and we declare var for TypeScript to compile the rest of the code.

</div
 
 
         
         
63
 
vote

<コード> .d.ts 定義ファイル

<事前> <コード> type MyGlobalFunctionType = (name: string) => void

ブラウザで作業している場合は、 ブラウザのウィンドウコンテキストにメンバーを追加します。

<事前> <コード> interface Window { myGlobalFunction: MyGlobalFunctionType }

NodeJSの同じアイデア:

<事前> <コード> declare module NodeJS { interface Global { myGlobalFunction: MyGlobalFunctionType } }

これで、ルート変数を宣言しました(それは実際にはウィンドウまたはグローバルに住んでいます)

<事前> <コード> declare const myGlobalFunction: MyGlobalFunctionType;

通常の .ts ファイルで、副作用としてインポートされているが、実際には実装しています。

<事前> <コード> global/* or window */.myGlobalFunction = function (name: string) { console.log("Hey !", name); };

と最後にコードベースの他の場所でそれを使用します。

<事前> <コード> global/* or window */.myGlobalFunction("Kevin"); myGlobalFunction("Kevin");
 

Inside a .d.ts definition file

type MyGlobalFunctionType = (name: string) => void 

If you work in the browser, you add members to the browser's window context:

interface Window {   myGlobalFunction: MyGlobalFunctionType } 

Same idea for NodeJS:

declare module NodeJS {   interface Global {     myGlobalFunction: MyGlobalFunctionType   } } 

Now you declare the root variable (that will actually live on window or global)

declare const myGlobalFunction: MyGlobalFunctionType; 

Then in a regular .ts file, but imported as side-effect, you actually implement it:

global/* or window */.myGlobalFunction = function (name: string) {   console.log("Hey !", name); }; 

And finally use it elsewhere in the codebase, with either:

global/* or window */.myGlobalFunction("Kevin");  myGlobalFunction("Kevin"); 
</div
 
 
       
       
31
 
vote

GlobalThis は未来

最初に、TypeScriptファイルには、 scopes

の2種類があります。

グローバルスコープ

ファイルが import または type MyGlobalFunctionType = (name: string) => void 0 を持っていない場合、このファイルはグローバルスコープその中のすべての宣言はこのファイルの外側に表示されます。

だから私たちはこのようなグローバル変数を作成するでしょう:

 <コード> type MyGlobalFunctionType = (name: string) => void 1  

すべての魔法は<コード> type MyGlobalFunctionType = (name: string) => void 2 から来ています。 <コード> type MyGlobalFunctionType = (name: string) => void 4 または<コード>または<コード>または<コード>または type MyGlobalFunctionType = (name: string) => void 5 は機能しません。

モジュール範囲

ファイルに type MyGlobalFunctionType = (name: string) => void 6 または<コード> type MyGlobalFunctionType = (name: string) => void 7 がある場合、このファイルは、グローバルによって拡張する必要がある独自の範囲内で実行されます。 宣言 - マージ

 <コード> type MyGlobalFunctionType = (name: string) => void 8  

公式文書

 

globalThis is the future.

First, TypeScript files have two kinds of scopes

global scope

If your file hasn't any import or export line, this file would be executed in global scope that all declaration in it are visible outside this file.

So we would create global variables like this:

// xx.d.ts declare var age: number  // or  // xx.ts // with or without declare keyword var age: number  // other.ts globalThis.age = 18 // no error 

All magic come from var. Replace var with let or const won't work.

module scope

If your file has any import or export line, this file would be executed within its own scope that we need to extend global by declaration-merging.

// xx[.d].ts declare global {   var age: number; }  // other.ts globalThis.age = 18 // no error 

You can see more about module in official docs

</div
 
 
       
       
20
 
vote

これは私がそれを修正した方法です:

ステップ:

  1. は、例えばグローバルネームスペースを宣言した。以下のようなcustom.d.ts:
  2.  <コード> type MyGlobalFunctionType = (name: string) => void 9  
    1. マッピング上記のファイルを「tsconfig.json」に作成しました。
    2. <事前> <コード> interface Window { myGlobalFunction: MyGlobalFunctionType } 0
      1. 以下のファイルの上記のグローバル変数を以下のいずれかのファイルで取得します。
      2.  <コード> interface Window {   myGlobalFunction: MyGlobalFunctionType } 1  

        注:

        1. TypesScriptのバージョン: "3.0.1"。

        2. 私の場合では、アプリケーションを起動する前にグローバル変数を設定し、変数は依存オブジェクトを通してアクセスする必要があるため、必要な設定プロパティを取得できます。

        3. これが助けに役立つことを願っています!

          ありがとう

 

This is how I have fixed it:

Steps:

  1. Declared a global namespace, for e.g. custom.d.ts as below :
declare global {     namespace NodeJS {         interface Global {             Config: {}         }     } } export default global; 
  1. Map the above created a file into "tsconfig.json" as below:
"typeRoots": ["src/types/custom.d.ts" ] 
  1. Get the above created global variable in any of the files as below:
console.log(global.config) 

Note:

  1. typescript version: "3.0.1".

  2. In my case, the requirement was to set the global variable before boots up the application and the variable should access throughout the dependent objects so that we can get the required config properties.

Hope this helps!

Thank you

</div
 
 
14
 
vote

TypeScriptと組み合わせたJavaScriptを使用している場合は、機能を見つけました。

logging.d.ts:

<事前> <コード> interface Window { myGlobalFunction: MyGlobalFunctionType } 2

ログ宣言 js

<事前> <コード> interface Window { myGlobalFunction: MyGlobalFunctionType } 3

initalize-app.ts

<事前> <コード> interface Window { myGlobalFunction: MyGlobalFunctionType } 4

これはグローバルスコープにそれを置き、TypeScriptはそれについて知っています。だから私はそれを私のすべてのファイルで使うことができます。

注: interface Window { myGlobalFunction: MyGlobalFunctionType } 5 TRIPESSCRIPTオプションがTRUEに設定されているため、これは機能すると思います。

誰かが純粋なタイプの解決策を投稿した場合、私はそれを受け入れます。

 

I found a way that works if I use JavaScript combined with TypeScript.

logging.d.ts:

declare var log: log4javascript.Logger; 

log-declaration.js:

log = null; 

initalize-app.ts

import './log-declaration.js';  // Call stuff to actually setup log.   // Similar to this: log = functionToSetupLog(); 

This puts it in the global scope and TypeScript knows about it. So I can use it in all my files.

NOTE: I think this only works because I have the allowJs TypeScript option set to true.

If someone posts an pure TypeScript solution, I will accept that.

</div
 
 
 
 
7
 
vote

この

のみを使用しているIM <事前> <コード> import {globalVar} from "./globals"; declare let window:any; window.globalVar = globalVar;
 

im using only this

import {globalVar} from "./globals"; declare let window:any; window.globalVar = globalVar; 
</div
 
 
   
   
4
 
vote

私はそれをするために適切な方法を見つけるために数時間を費やしました。私の場合、私はグローバル "log"変数を定義しているので、ステップは次のとおりです。

1)定義されたタイプを含める<コード> tsconfig.json を設定します(<コード> src/types フォルダ、node_modules - はあなた次第です):

<事前> <コード> ...other stuff... "paths": { "*": ["node_modules/*", "src/types/*"] }

2)次のコンテンツを使用してファイル<コード> 9988777664 を作成する(輸入+ - これは重要です) Needs +ブラウザを操作している場合は、<コード> NodeJS の代わりに<コード> window インターフェースを使用してください。

<事前> <コード> /** * IMPORTANT - do not use imports in this file! * It will break global definition. */ declare namespace NodeJS { export interface Global { log: any; } } declare var log: any;

3)最後に<コード> log を使用することができます。

<事前> <コード> tsconfig.json0
 

I spent couple hours to figure out proper way to do it. In my case I'm trying to define global "log" variable so the steps were:

1) configure your tsconfig.json to include your defined types (src/types folder, node_modules - is up to you):

...other stuff... "paths": {   "*": ["node_modules/*", "src/types/*"] } 

2) create file src/types/global.d.ts with following content (no imports! - this is important), feel free to change any to match your needs + use window interface instead of NodeJS if you are working with browser:

/**  * IMPORTANT - do not use imports in this file!  * It will break global definition.  */ declare namespace NodeJS {     export interface Global {         log: any;     } }  declare var log: any; 

3) now you can finally use/implement log where its needed:

// in one file global.log = someCoolLogger(); // in another file log.info('hello world'); // or if its a variable global.log = 'INFO' 
</div
 
 
     
     
1
 
vote

私が変更できなかった既存の.jsファイルを使用するためにロードグローバルを作成する必要がありました。

これはうまくいったことを発見しました:

<事前> <コード> tsconfig.json1
 

I needed to make lodash global to use an existing .js file that I could not change, only require.

I found that this worked:

import * as lodash from 'lodash';  (global as any)._ = lodash; 
</div
 
 
0
 
vote

Dima Vの答えへのアドオンとして、これは私がこの仕事をするためにしたことです。

<コード> tsconfig.json2

<コード> tsconfig.json3

<コード> tsconfig.json4

<コード> tsconfig.json5

 

As an addon to Dima V's answer this is what I did to make this work for me.

// First declare the window global outside the class

declare let window: any;

// Inside the required class method

let globVarName = window.globVarName;

</div
 
 
   
   
0
 
vote

これは、このスレッド: <コード> window16

 

This is working for me, as described in this thread:

declare let something: string; something = 'foo'; 
</div
 
 
0
 
vote

私はこれを使っています:

<事前> <コード> tsconfig.json7
 

I'm using this:

interface Window {     globalthing: any; }  declare var globalthing: any; 
</div
 
 

関連する質問

0  ネストしたJSONデータを角度6で印刷できません  ( Cant print nested json data with angular 6 ) 
私はコードを指示し、ちょうどこの問題を解決できないようです。私は前にJSONのデータを取得することができましたが、それはネストされているので、データを取得する方法がわからない。これは私がこれまでにやったこと サービス <事前> <コード> <h:form>1 ...

-1  キーパッドが開いているときにスクロールします  ( Scroll when the keypad is open ) 
私の画面で、入力フィールドを入力して検索結果を得てください。リストはScrollView内にレンダリングされていますが、キーパッドが開いているとき(少なくともAndroidでは、 どうすればいいですか? スクロールビューがレンダリングされているコンポーネントで...

1  TypeScript - Promiseのカスタムメソッド  ( Typescript custom method off promise ) 
約束を返す方法を宣言しました: <事前> <コード> confirm(title: string, message: string) { var promise = new Promise((resolve, reject) => { ...

-3  トップイメージCSSと重複しています  ( Overlap with top image css ) 
以下のように ion-card を作成する必要があります。私はたくさんの方法を試しました。しかし、まだ運がありません。任意の手がかり? 注: 2枚の画像があります。トップワンと小さな本のカバー。 これは stackblitz これは私が必要とする...

0  ReactでUSEREFを使用して正確なDOM要素を取得する方法  ( How to get exact dom element using useref in react ) 
'React.useref(null)を使用して、リストのListItemに正確なDOM要素を取得しようとしています。しかし、それを得ることができない、私は以下のコードを使っています <事前> <コード> useEffect(() => { //T...

2  TypesScript:Type '{}'は 'pick <t、k>'を入力するために割り当てられません、JavaScript `Pick`関数を正しく入力しますか?  ( Typescript type is not assignable to type pickt k how do i type java ) 
pick と呼ばれる関数を入力したい、私はTyptionScriptが組み込まれている<コード> Pick<T, K> を知っています。 Mが立ち往生しています。 指定された文字列に基づいて、 pick のプロパティを与えられた <ListView Name...

0  Project TypeingsファイルにSequel型を組み込むにはどうすればよいですか。  ( How can i incorporate sequel types into my project typings file ) 
@types/sequel/index.d.ts で定義されている sequel に属するいくつかのタイプに組み込まれています。 入力ファイルがモジュールではないため、インポートできないことがわかります。そして私は参考文献を使うことができることを知っていま...

0  エラーTypeErrorの取得:購読時に未定義のプロパティ '0'を読み取ることができません  ( Getting error typeerror cannot read property 0 of undefined on subscribe ) 
エンドポイントを購読しようとしているときに次のエラーが発生しています。これが私のコードとエンドポイントからの応答です。 INSOLEが応答をログに記録すると、データが表示されます。 ts <事前> <コード> this.getMemberDetails...

2  Next.jsとTypeScriptでReact StyleGuidistを設定する  ( Setting up react styleguidist with next js and typescript ) 
私はnext.jsとtypescriptでReact Styleguidistをセットアップしようとしていますが、問題に歩き続けます。 My現在のstyleguide.config.jsは次のようになります: <事前> <コード> const path = r...

0  TypesScriptオーバーライドSuper Interfaceプロパティは機能しません  ( Typescript override super interface property doesnt work ) 
次のインタフェースを持っています: <事前> <コード> interface Person { name: string; id: number; prop: number; } それを拡張する別のインターレースを作成したい: <事前> <コー...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有