OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

TypeScriptでjQueryのライブラリを使う

近年のフロントエンド界隈を取り巻く環境の中で、いろんな新しいツールがどんどん登場していますが、古くからある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以外のライブラリも使えるようになります。その際には各ライブラリの型定義ファイルのインストールを忘れないようにしておきましょう。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram