module
オプションに応じて異なるJavaScriptを生成されます。無視できるものは次のとおりです(既に過去のものとなった技術については詳しく説明しません):module:commonjs
を使うことをおすすめします。import foo = require('foo')
、つまり、import/require
を避けて、ESモジュールの構文を使用してください。概要:module:commonjs
を使い、ESモジュールの構文を使ってモジュールをimport/export/作成します。
export
を前に置くだけです。簡単です。export
文でエクスポートするexport
文で変数や型をエクスポートするimport
を使用して変数または型をインポートするimport * as
を使って1つの名前にモジュールすべてをインポートするexport default
を使ってエクスポートするlet / const / var
は必要ありません)import someName from "someModule"
という構文を使用してインポートする(インポートしたものには任意の名前を付けることができます):私はmoduleResolution: commonjs
を指定することを前提にしています。これはあなたのTypeScript設定にも追加しておくべきオプションです。この設定はmodule:commonjs
を設定していれば、暗黙的に設定されます。
import foo from 'パス'
)。.
で始まるパス:./someFile
、../../someFolder/someFile
など)'core-js'
、'typestyle'
、'react'
、'react / core'
など)bar.ts
がimport * as foo from './foo';
を実行した場合、foo
を同じフォルダに置く必要があるbar.ts
がimport * as foo from '../foo';
を実行する場合、foo
は1つ上のフォルダ内に存在する必要があるbar.ts
がimport * as foo from '../someFolder/foo';
を実行する場合、1つ上のフォルダにfooが存在するsomeFolder
というフォルダが存在する必要があるimport * as foo from 'foo'
と書いた場合、以下の場所が順番にチェックされます./node_modules/foo
../node_modules/foo
../../node_modules/foo
import * as foo from 'something/foo'
と書いた場合、以下の場所が順番にチェックされます./node_modules/something/foo
../node_modules/something/foo
../../node_modules/something/foo
foo
というパスを指定しているとします:foo.ts
があれば、解決されます。foo/index.ts
ファイルがある場合、解決されます。foo/package.json
が存在し、package.jsonのtypes
キーで指定されたファイルがある場合は、解決されます。package.json
が存在し、package.jsonのmain
キーで指定されたファイルが存在する場合、解決されます。.ts
/.d.ts
と.js
を意味しています。declare module '何らかのパス'
を使ってプロジェクトのモジュールをグローバルに宣言することができます。そして、import文はそのパスを魔法のように解決します。import/require
するfoo
(またはfoo.bas
などのプロパティ)が変数として一度も使用されないためです。foo
が変数として使われているためです。bar
でファイルfoo
のある型を使用したい場合、次のようにしなければならないことを意味します:foo
をロードしたいかもしれません。そのような場合には、import
した名前を型アノテーションとしてのみ使用し、変数として使用しないでください。これにより、TypeScriptにより挿入される実行時依存関係をすべて削除します。そして、あなたは独自のモジュールローダーに固有のコードを書いて実際のモジュールを手動でインポートします。commonjs
ベースのコードを考えてみましょう。このコードでは、特定の関数が呼び出された時だけ'foo'
モジュールをロードします:amd
(requirejsを使用)での同様のサンプルは次のようになります:import/require
を行うと、コンパイルされたJavaScriptがモジュールに依存しておらず、モジュールバンドラ(例えばwebpack)が、そのインポートを完全に無視してしまうかもしれません。このような場合、例えば下記のように ensureImport
変数を使用して、コンパイルされたJavaScriptがモジュールに依存するようにすることができます。