TypeScript入門する - しくじり日記

概要

今までAngularの公式ドキュメントやUdermyのコースで感覚でTypeScriptを触っていた。そもそもTypeScriptの知識自体がほとんどなかったので改めて入門しようと思った話。後増税前って建前で大量に本買っちゃったっていうのも。

こちらを教材にさせて貰い進めていく。 https://www.amazon.co.jp/dp/483996937X/ref=cm_sw_r_tw_dp_U_x_SLH-Cb0N6CDRK

Docker環境構築

まずは環境構築から、ローカル環境にglobalインストールをしたくなかったのでDocker環境を用意する。

Dockerfile

FROM node:10.16.3-alpine

WORKDIR /app
COPY ./package*.json /app/

RUN npm i

COPY . /app

https://hub.docker.com/_/node/

baseのimageは現在のLTS版を選択。 package*.jsonだけ先にコピーすることで、パッケージ以外が変更された時に毎回npm iが走らないようにしている。ただこの場合最初にpackage.jsonを作成しないとイメージをビルド出来ないので、他の処理と合わせて後述のスクリプトで対応する。

docker-compose.yml

version: "3.7"
services:
  app:
    build: .
    volumes:
      - .:/app
    environment:
      NODE_ENV: development
    ports:
      - "8080:8080"
    tty: true

init.sh

echo "{}" > package.json
echo "node_modules" > .gitignore

docker-compose run --rm app npm init -y && npm i -D typescript && npx tsc --init

package.jsonと.gitignoreを作成した後、TypeScriptをインストールする。 package.jsonに記載するためにグローバルインストールでなくローカルインストールをしているのでtscコマンドはそのままでは使えず、npx tscコマンドでts.configファイルを作成する。他に最初からインストールしておきたいモジュールについても記載しておいても良い気はするがとりあえず最低限のモジュールだけ。

実行テスト

scriptを実行した時点でのディレクトリ構成は以下の形。

├── node_modules
├── .gitignore
├── Dockerfile
├── docker-compose.yml
├── package-lock.json
├── package.json
├── script
│   └── init.sh
└── tsconfig.json

コンテナを起動。

docker-compose up -d --build

テスト用に適当なTypescriptファイルを作成。

test.ts

export function test() {
    return 'test'
}

トランスパイル(別の言語へとコンパイルすること)を実行。

 npx tsc

これによってtest.tsと同じ階層にJavaScriptファイルがビルドされていることが確認出来る。

test.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function test() {
    return 'test';
}
exports.test = test;

とりあえずこれで始める準備はOK。