TypeScriptを導入しよう！！

TypeScriptとは

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。2014年頃にMicrosoftによって開発・発表されました。
TypeScriptは変数のデータ型をあらかじめ宣言することのできる言語です。この仕組みは静的型付けと呼ばれ、コンパイルする時点でエラーが分かることや、コードの読みやすさ、大人数が開発に携わる環境で便利なことが特徴です。

前提

node.jsがインストールされていること
node.jsのインストール

導入の仕方

3ステップで簡単に導入ができる(前提としてnodeがインストールされていること)
1.　インストール
2.　tsconfig.jsonの書き方
3.　build

インストール

# npmプロジェクトを作成(package.jsonが作成される)
% npm init

# 開発環境にTypeScriptをインストール(--save-devが開発環境に使用するライブラリとしてインストールするオプション)
% npm install --save-dev typescript ts-loader webpack webpack-cli

# インストールできたことを確認する(現在のディレクトリにあるのnode_modulesにTypeScriptがインストールされていれば、バージョンを返す)
% ./node_modules/.bin/tsc --version
Version 4.7.4

% ls ./node_modules/ts-loader
CHANGELOG.md    LICENSE         README.md       REFERENCES.md   dist            index.js        package.json

# tsconfig.jsonを作成する(TypeScriptをJavaScriptに変換する際の設定ファイルを作成)
% ./node_modules/.bin/tsc --init
Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

tsconfig.jsonの書き方

tsconfig.jsonがあるディレクトリはTypeScriptプロジェクトのルートディレクトリになります。

tsconfig.json

{
    "compilerOptions": {
        "moduleResolution": "node",
        "outDir": "./dist/",
        "target": "ES2015"
    }
}

• compilerOptions -> コンパイルする際のオプションを指定する
  • moduleResolution ->　モジュールの依存関係の解決に使用するものを指定する
  • outDir ->　出力先になるディレクトリを指定する
  • target -> コンパイルするJavaScriptのバージョンを指定する

build

webpack.config.json

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts'],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        publicPath: 'dist/',
    }
};

• module -> 使用するmoduleを指定
  • rules -> 使用するmoduleの設定を書く
    • test -> webpackがビルドする際にチェックする条件を指定する
    • use -> webpackがビルドする際にチェック時、使用するmoduleを指定する
    • exclude -> webpackのビルドする際のチェック対象から外すものを指定する
  • resolve ->
    • extensions -> webpackのビルド時に解決する拡張子を指定。

その他の設定は過去に書いた記事に書いてるのでそちらを参照してください。
webpack.config.jsonの書き方

参考

TypeScriptチュートリアル