TypeScriptでjQueryのライブラリを使う
近年のフロントエンド界隈を取り巻く環境の中で、いろんな新しいツールがどんどん登場していますが、古くからあるJavaScriptのライブラリであるjQueryもプロジェクトによってはまだまだ使えます。今回はそのjQueryのライブラリをTypeScriptで使う方法についてまとめていきたいと思います。
今回はnpmでインストールしたjQueryを、外部のモジュールとしてimportする形になります。なので、まずは下記のコマンドで必要なパッケージをインストールしていきます。ここでは、TypeScript関連のパッケージに加えてjQuery本体とjQueryの型定義ファイルのパッケージをインストールします。
今回は、外部のモジュールに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以外のライブラリも使えるようになります。その際には各ライブラリの型定義ファイルのインストールを忘れないようにしておきましょう。
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories