VueへのTypeScript導入

Vueを書いたら型が欲しくなったのでTypeScriptで書ける様にする。

導入方法

TypeScriptのインストール

npm install typescript

TypeScriptを書く例（lib.ts）

/**
 * 年の配列を返す関数
 * 
 * @param start 開始年
 * @param end 終了年
 * @returns [2021, 2022, 2023 ...]
 */
function getYearsArray(start: number, end: number): number[] {
    if (start > end) {
        return []
    }
    const years = [];
    for (let i = start; i <= end; i++) {
        years.push(i);
    }
    return years
}
// 関数をエクスポートします。
export default {
    getYearsArray,
};

TypeScriptのビルド

// lib.tsがあるディレクトリで以下を実行
npx tsc lib.ts

// 自動ビルド
npx tsc *.ts --watch

lib.jsができる

"use strict";
exports.__esModule = true;
/**
 * 年の配列を返す関数
 *
 * @param start 開始年
 * @param end 終了年
 * @returns [2021, 2022, 2023 ...]
 */
function getYearsArray(start, end) {
    if (start > end) {
        return [];
    }
    var years = [];
    for (var i = start; i <= end; i++) {
        years.push(i);
    }
    return years;
}
// 関数をエクスポートします。
exports["default"] = {
    getYearsArray: getYearsArray
};

Vue側から読み込む

import Lib from './lib.js';

所感

なるほど、TypeScriptだとファイル編集のたびにビルドしないとダメなのか・・・ちょっとめんどいな・・・
→ 自動ビルドあった。--watch