$ npm install --save jquery @types/jquery
$ npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
tsconfig.jsonにTypeScripitの設定をしていきます。重要なのは「compilerOptions」にある「allowSyntheticDefaultImports」と「esModuleInterop」のオプションをtrueにしておく点です。
【tsconfig.json】
{
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"incremental": true,
"target": "ES5",
"module": "es2015",
"sourceMap": true,
"removeComments": true,
"strict": true,
...............
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
「allowSyntheticDefaultImports」のオプションを指定しないと下記のエラーが出るようです。
TS1259: Module '"/Users/**********/node_modules/@types/jquery/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
esModuleInterop
フラグを有効にすると、コンパイル時にヘルパーメソッドが生成されるようになり、モジュールシステムの相互運用性が高まる。
これにより、defaultをエクスポートしていない CommonJS 形式のモジュールを、ES Modules でデフォルトインポートする、といったことが可能になる。
allowSyntheticDefaultImportsは型チェックにのみ影響を与えるフラグ