TypeScriptプロジェクトでライブラリを参照するその他の方法
TypeScriptのtsconfigオプション "lib" とは？
lib オプションの役割
lib オプションは、TypeScriptコンパイラがコードを理解し、型チェックを行う際に必要なライブラリを指定します。 具体的には、以下の機能を提供します。
- 型定義ファイルの指定
.d.ts型定義ファイルのパスを直接指定することで、特定のライブラリの型情報をコンパイラに提供できます。 - 外部ライブラリの参照
libオプションを使用して、@typesパッケージのような外部ライブラリをプロジェクトに参照することができます。 - 標準ライブラリの提供
libオプションを指定することで、DOMやNode.jsなどの標準ライブラリへのアクセスを可能にします。
lib オプションには、以下の値を指定することができます。
- false
標準ライブラリを使用不可にします。 - true
すべての標準ライブラリと、@typesパッケージで提供されているすべての型定義ファイルを使用可能にします。 - 文字列の配列
使用するライブラリの名前を文字列の配列として指定します。 例えば、["dom", "es2015"]と指定すると、DOMとES2015の標準ライブラリが使用可能になります。
以下は、lib オプションの使用例です。
例1: 標準ライブラリと外部ライブラリを使用する
{
"compilerOptions": {
"lib": ["dom", "es2015", "@types/jquery"]
}
}
この例では、DOM、ES2015 標準ライブラリと、jQuery ライブラリの型定義ファイルを使用可能にしています。
例2: すべての標準ライブラリを使用する
{
"compilerOptions": {
"lib": true
}
}
// DOMへのアクセス
const element = document.getElementById("my-element");
// jQueryの使用
$(document).ready(() => {
$("#my-element").on("click", () => {
alert("クリックされました!");
});
});
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "@types/jquery"]
}
}
このコードを実行するには、tsc コマンドを使用して index.ts ファイルをコンパイルする必要があります。
tsc index.ts
コンパイルが成功すると、index.js という名前のJavaScriptファイルが生成されます。 このファイルをブラウザで実行すると、my-element 要素をクリックすると "クリックされました!" というアラートが表示されます。
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": ["es2015"]
}
}
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "@types/node"]
}
}
lib オプション以外のライブラリの参照方法
import ステートメント
import ステートメントを使用して、JavaScript ファイルや型定義ファイルから直接ライブラリをインポートすることができます。
例
import * as $ from "jquery";
// jQueryの使用
$(document).ready(() => {
$("#my-element").on("click", () => {
alert("クリックされました!");
});
});
この例では、jquery ライブラリを import ステートメントを使用してインポートしています。
npm パッケージ
npm パッケージを使用して、ライブラリをインストールしてプロジェクトに参照することができます。
npm install --save @types/jquery
このコマンドを実行すると、@types/jquery パッケージがインストールされます。
その後、tsconfig.json ファイルの lib オプションに "@types/jquery" を追加することで、プロジェクトで jQuery ライブラリを使用することができます。
CDN
CDN (Content Delivery Network) からライブラリを直接参照することができます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// jQueryの使用
$(document).ready(() => {
$("#my-element").on("click", () => {
alert("クリックされました!");
});
});
</script>
この例では、CDN から jQuery ライブラリを直接参照しています。
型定義ファイル
ライブラリに型定義ファイルがない場合は、自分で作成することができます。
declare module "my-library" {
export function myFunction(): void;
}
// ライブラリの使用
import { myFunction } from "my-library";
myFunction();
この例では、my-library ライブラリの型定義ファイルを作成し、myFunction という関数を宣言しています。
参照パス
tsconfig.json ファイルの paths プロパティを使用して、ライブラリの参照パスを指定することができます。
{
"compilerOptions": {
"paths": {
"my-library": ["path/to/my-library"]
}
}
}
この例では、my-library ライブラリの参照パスを path/to/my-library に設定しています。
typescript
