0%

Programmingプログラミングナレッジ

Posted:2020.05.06

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以外のライブラリも使えるようになります。その際には各ライブラリの型定義ファイルのインストールを忘れないようにしておきましょう。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】