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


関連記事

Go言語

Go 1.16でのgo getとgo installの変更点

1 はじめに2 go getとgo installの役割2.1 go getの役割2.2 go installの役割3 この変更で何が改善されたのか3.1 go:generateと併用する4 その他の ...

Stripe Connectで支払方法をクローンする

1 はじめに2 プラットフォームの顧客側の実装2.1 プラットフォームの顧客登録2.2 支払方法の登録3 支払方法クローンの実装3.1 顧客と支払方法のクローン3.1.1 支払方法のクローン3.1.2 ...

rails

configに追記したのに、rails runnerが起動しない?

1 はじめに1.1 環境2 rails runnerを使用してみる2.1 バッチファイルの作成2.2 configにパスを追記2.3 実行3 ところが…3.1 解決方法4 おまけ(runnerコマンド ...

rails

Ruby、Railsの時間に関するメソッドを使用してみた

はじめに 普段PHPのお仕事をしています、tonnyです。 半年程前からRuby on Railsの勉強を始めました。 今回はよく使う時間に関するメソッドついてまとめたいと思います。 目次 1 はじめ ...

EloquentのtoArray()とtoJson()をカスタマイズ

1 はじめに2 $visibleプロパティと$hiddenプロパティ2.1 $visibleプロパティ2.2 $hiddenプロパティ3 独自属性の追加3.1 $appendsプロパティ4 使い所5 ...

フォロー

blog-page_side_responsive

2020年3月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

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