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


関連記事

rails

Rails Developer Meetup に参加してきました【1日目】

1 はじめに2 発表について2.1 安全かつ高速に進めるマイクロサービス化2.2 Rails in Microservices2.3 MySQL/InnoDB の裏側2.4 H2O/mruby でつく ...

rails

Active Strageを使用してユーザーのアバターを登録、表示する

1 はじめに1.1 環境2 セットアップ2.1 前準備2.2 マイグレーションファイル作成2.3 設定ファイル3 実際に使って見る3.1 モデル3.2 コントローラー3.3 ビュー4 個人的メモ4.1 ...

rails

Ruby2.4でCookieを手動で復号する際に発生したエラーの対処

1 はじめに1.1 前提条件2 発生したエラー2.1 実際のコード2.2 エラー詳細2.3 原因3 どう対処したか3.1 修正後のコード はじめに こんにちは、onoです。 現在開発中のアプリケーショ ...

PHPerだけどKotlinを勉強したって良いよね その2〜コンストラクタ編〜

1 はじめに2 コンストラクタ2.1 プライマリコンストラクタ2.2 セカンダリコンストラクタ2.3 ニックネームのみを入力した人2.4 ニックネームと email を入力した人2.5 Faceboo ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2020年3月
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

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