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 + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

軽量なAlpine Linuxイメージでgitbookのローカル環境を構築する

1 はじめに2 Alpine Linuxとは3 Docker本体のインストール4 サンプルリポジトリのダウンロード5 dockerイメージ作成6 Gitbook初期化&実行7 Dockerの ...

Kotlinでのnullの基本的な扱いかた

1 はじめに2 基本的にnullを許容しない3 nullを許容するNullable4 Nullableをnon-nullに変える4.1 nullチェックとスマートキャスト4.2 エルビス演算子4.3 ...

rails

Shrineを使って画像をアップロードする

1 はじめに2 Shrineとは2.1 簡単な説明2.2 作者2.3 特徴3 下準備3.1 Gemを追加3.2 初期設定3.3 テーブルを作成する4 実装4.1 Uploaderの実装4.2 Mode ...

rails

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

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

フォロー

blog-page_side_responsive

2020年3月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

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