FrontEnd BackEnd

TypeScriptでJavaScriptのライブラリを使用するには?

投稿日:2020年3月23日 更新日:

はじめに

TypeScript の人気が高まっている昨今ですが、 JavaScript で書かれたライブラリが必要な場面があると思います。しかし、 JavaScript には型情報がないため、そのままでは TypeScript のコードから使用することができません。

そこで、今回は、 TypeScript のコードから JavaScript のライブラリを使うために、型定義ファイルを作成する方法を実例を交えて紹介します。

対応方法

JavaScript のモジュールを TypeScript で使用するには、型定義ファイルを用意するか、モジュールを require で読み込む必要があります。

型定義ファイルを用意する方法としては、以下の方法があります。

  • npm で @types からインストールする
  • 自分で型定義ファイルを作る

npmで@typesからインストールする

Definitely Typed は型定義ファイルのリポジトリで、数多くの JavaScript ライブラリの型定義ファイルを用意しています。既に型定義ファイルが用意されている場合、 npm でインストールすることができます。

自分で型定義ファイルを作る

残念ながら型定義ファイルが用意されていない場合や自作のライブラリの場合、自分で型定義ファイルを作成する必要があります。

型定義ファイルは .d.ts という拡張子のファイルです。保存する場所はどこでも構いませんが、 @types ディレクトリに保存することが多いようです。

型定義ファイルを読み込むには、 tsconfig.json に型定義ファイルが保存されているパスを指定する必要があります。

今回は、こちらを参考に Vue.js のプロジェクトの TypeScript のコードで、 Vue.Draggable を使う場合を想定して、型定義ファイルを紹介します。

注目すべきは、 declare module "vuedraggable" で vuedraggableモジュール をグローバルに宣言している点です。

次に、 TypeScript の Declaration Space(宣言空間)について説明します。

Declaration Space

TypeScript には、 Type Declaration Space(型宣言空間)と Variable Declaration Space(変数宣言空間)という2種類の Declaration Space(宣言空間)があります。

Type Declaration Space

Type Declaration Space(型宣言空間)には型アノテーションとして使用できるものが含まれます。

これらは、以下のように型名として使用することができます。

しかし、 Variable Declaration Space(変数宣言空間)には宣言されていないので、変数として使うことはできません。

ただし、例外としてクラスは変数として使うことができます。

Variable Declaration Space

Variable Declaration Space(変数宣言空間)には変数として使用できるものが含まれます。

これらは Variable Declaration Space だけに宣言されているので、型アノテーションとして使うことはできません。

Module

モジュールには Global Module と File Module の2種類があります。 Global Module は global namespace に入り、コードのどこからでもアクセスできるため、 global namespace を汚染します。できる限り使うべきではありませんが、使用する場合には注意が必要です。

File Module

File Module は External Modules(外部モジュール)とも呼ばれます。ルートレベルに import または export が存在する場合、そのファイル内にローカルスコープが作成されます。

これらは import しない限り外部から使用することはできません。

ESモジュールの構文

変数または型のエクスポートは export キーワードで行います。

インポートは import キーワードで行います。

モジュールのパス

モジュールには相対パスでインポートする Relative path modules(相対パスモジュール)とモジュール名だけを指定する Dynamic lookup(動的ルックアップ)の2種類があります。

Dynamic lookup の場合、検索は Node.jsスタイルのモジュール解決によって行われます。いかに例を示します。

例)import * as hoge from “hoge”と書いた場合

はじめに、 ./node_modules/hoge がチェックされます。見つからなかった場合、次に、ある ../node_modules/hoge がチェックされます。このルールでモジュールが見つかるか、ファイルシステムのルートに到達するまで続きます。

この時、チェックされる順番は以下のとおりです。

  1. hoge.ts(hoge.d.tsもしくはhoge.js)
  2. hoge/index.ts(hoge.d.tsもしくはhoge.js)
  3. hoge/package.json が存在し、 package.json の typesキー で指定されたファイル
  4. hoge/package.json が存在し、 package.json の mainキー で指定されたファイル

Namespace

namespace は JavaScrip tで使用される一般的で便利な構文を提供します。

以下のように定義すると、

以下のような JavaScript のコードを生成します。

これは、以下のように使用できます。

さいごに

TypeScriptでJavaScriptのライブラリを使用する方法を紹介しました。いかがでしたでしょうか。 TypeScript の型システムについて参考になれば幸いです。

おすすめ書籍

確かな力が身につくJavaScript「超」入門 第2版 プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発 Vue.js入門 基礎から実践アプリケーション開発まで

page_footer_responsive




-FrontEnd, BackEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

laravel logo

Laravelでメールを送る

1 はじめに1.1 準備2 実装2.1 Mailableクラスの作成2.2 テンプレートの作成2.3 Mailableクラスの修正2.4 コントローラの作成2.5 コンフィグの修正3 さいごに4 おす ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

laravel logo

DeployerでLaravelをデプロイ! 初期設定〜レシピのカスタマイズまで

1 はじめに2 Deployerの導入2.1 前提条件2.2 インストール3 デプロイの設定3.1 デプロイスクリプト3.2 サーバサイドの設定3.3 デプロイコマンド3.4 Deployerのディレ ...

Go言語

GoのWeb Application Framework

1 はじめに2 代表的なGoのWAF2.1 軽量なWAF2.2 フルスタックなWAF3 Ginを使ってみる3.1 クエリパラメータ+ポストパラメータ3.2 ファイルアップロード3.3 URLのグループ ...

Vue.js+TypeScriptな環境整備

1 はじめに2 vue-cliのインストール3 プロジェクトの作成3.1 機能の選択3.2 シンタックスの選択3.3 CSSプリプロセッサの設定3.4 Unit test3.5 E2E test3.6 ...

フォロー

blog-page_side_responsive

2020年3月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。