浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】JavaScriptのままTypeScriptの型ファイルを参照する

 TypeScript は型情報の付いた JavaScript の拡張です。JavaScript を扱っているとよくある「今取り扱っているこのオブジェクトの持つ全てのプロパティとメソッドは?」という問題を解決してくれます。解決を行うのは型定義ファイルと適切な場所で宣言された変数等の型情報です。

const tokenElement = document.head.querySelector('meta[name="csrf-token"]') as HTMLMetaElement;
tokenElement.content // HTMLMetaElementならではのプロパティがIDEの自動補完で出せる

 本来は TypeScript 上でしか扱えないのですが JavaScript のまま型情報を IDE に教える方法があります。試したのは PhpStorm だけですが原理に PhpStorm は関わっていないので他 IDE でもできるかもしれません。型情報を IDE に教えるには次の様に行います。

// AxiosInstance, AxiosRequestConfig は実体を持たない型定義
import {AxiosInstance, AxiosRequestConfig} from 'axios';

/**
 * 型をJSDoc内で割り当てる
 * @return {AxiosInstance}
 */
function createAxiosInstance() {
  /**
   * 型をJSDoc内で割り当てる
   * @type AxiosRequestConfig
   */
  const baseConfig = {
    baseURL: process.env.MIX_BASE_APP_URL,
    timeout: 60000, // ms
省略......

 JSDoc の型コメントに型ファイルで定義された型を用います。これを行うことでいきなり宣言した object も次の様にあるべきプロパティを補完できる様になります。

 新しく型を定義するには流石に TypeScript そのものを導入する必要がありますが既存の JavaScript を整理することだけでも随分役に立ってくれる小技です。

  • この記事いいね! (0)