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入門 基礎から実践アプリケーション開発まで

blog-page_footer_336




blog-page_footer_336




-FrontEnd, BackEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

rails

deviseを使ってユーザ登録フォームを作る

1 はじめに1.1 前提条件2 deviseについて2.1 deviseとは2.2 deviseでできること3 登録処理の実装3.1 Gemのインストール3.2 deviseのインストール3.3 デフ ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

laravel logo

Laravelのブラウザテスト「Dusk」をシンプルなCRUDで始めてみよう

1 はじめに2 Laravel Duskのセットアップ3 新規登録のテスト3.1 テスト対象となるコード3.2 Duskのテストコード3.3 テストの実行4 更新のテスト4.1 テスト対象となるコード ...

フォロー

blog-page_side_responsive

2020年3月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

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