近年のフロントエンド界隈を取り巻く環境の中で、いろんな新しいツールがどんどん登場していますが、古くからあるJavaScriptのライブラリであるjQueryもプロジェクトによってはまだまだ使えます。今回はそのjQueryのライブラリをTypeScriptで使う方法についてまとめていきたいと思います。   今回はnpmでインストールしたjQueryを、外部のモジュールとしてimportする形になります。なので、まずは下記のコマンドで必要なパッケージをインストールしていきます。ここでは、TypeScript関連のパッケージに加えてjQuery本体とjQueryの型定義ファイルのパッケージをインストールします。

$ npm install --save jquery @types/jquery
$ npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

  インストールが完了すると、package.jsonにパッケージが追記されているのが確認できますね。scriptsにはwebpackのビルドコマンドを設定しておきます。 【package.json】

{
 ....... 
 "scripts": { 
  "dev": "npx webpack-dev-server",
  "build": "npx webpack",
  "watch": "npx webpack --watch"
 },
 "dependencies": {
  "@types/jquery": "^3.3.35",
  "jquery": "^3.4.1"
 },
 "devDependencies": {
  "ts-loader": "^7.0.0",
  "typescript": "^3.8.3",
  "webpack": "^4.42.1",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.10.3"
  .......
 }
}

  続いて、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

  これでTypeScriptファイル内でjQueryをインポートすることにより、jQueryのコードが使えるようになります。 【src/index.ts】

import $ from 'jquery';

$(function(){
 console.log('jQuery is ready.');
});

  コンソールで実行結果を確認してみると、jQueryのライブラリが使えているのが確認できました。 【console】

jQuery is ready.

 

---

  今回は、外部のモジュールにjQueryを使うサンプルとしていますが、同じ要領でjQuery以外のライブラリも使えるようになります。その際には各ライブラリの型定義ファイルのインストールを忘れないようにしておきましょう。