mainv

【2020年】いまさら始めるTypeScript入門【npm-script】

投稿日:2020/03/27

VueやReactなどの新しいフレームワークに夢中になっている間、ずっと見て見ぬふりをしてきたTypeScript。 そろそろやらねば。という事で、今更ながらTypeScript勉強してみました。

記事の流れ

  1. TypeScriptに触れてみる。
  2. TypeScriptをコンパイル・実行してみる。
  3. npm-scriptを用いた開発環境例の紹介。

導入

ひとまず環境構築をする前に、公式サイトを参考にTypeScriptを軽く触ってみましょう。

今回はnpmを使用して導入をしていきます。Windows環境です。
下記コマンドをbash等のターミナルで叩いてみましょう。

npm install -g typescript

導入はこれで終了です。

( ˘ω˘ ).。o○(あれ…速攻できるやん…)

TypeScriptを書いてコンパイルしてみる

コマンド一つで導入できてしまったので、とりあえずTypeScriptを書いてみます。
試しにtest.tsというファイルを作成して、下記の様なコードを書いてみましょう。

function hello(name: string) {
  return "Hello! " + name + "!";
}

let you = "dummy men";

console.log(hello(you));

コード内容的には、よくあるhello worldです。引数の所に何やら見えるかもしれませんが、 一旦スルーしてコピーしてください。

次に、作成したtest.tsをコンパイルしていきます。下記コマンドを叩いてみましょう。

tsc test.ts

すると、test.tsを作成した同一ディレクトリに、test.jsというJavaScriptの形式に されたファイルが出現するはずです。これでコンパイルも完了。

では、実際にコードを実行してみましょう。ターミナルで下記の様にコマンドを叩いてみてください。

node [該当のパス]/test.js

すると「Hello! dummy men!」と表示されるはずです!

( ˘ω˘ ).。o○(あ、あれれ…速攻できるやん…)

TypeScriptの「型」について

先ほど作成したtest.tshello関数の引数が、通常のJavaScriptの形式では見慣れない記載方法だったかと思います。
これが何かといいますと、そうです。「型」です。

hello(name: string)は「引数namestring型じゃないとこの関数は使えませんよ!」という事を定義しています。 試しに、let you = "dummy men";の箇所をlet you = 4649;let you = ["iam", "dummy men"];といった string以外の型して、再度コンパイルしてみましょう。すると、エラーメッセージが返されるはずです!

今回、詳細な説明は省きますが「interface」や「class」などにも対応しています。

( ˘ω˘ ).。o○(コンパイルのタイミングで簡単な単体テストの様な事ができるんや…便利…)

TypeScript 環境構築編

それでは実際にTypeScriptを開発で使用する為に、環境構築を行っていきましょう。
この記事を書き始めた当初は、webpackを使用してガチガチの開発環境を構築しようと思っていたのですが、
調べていくうちに「純粋にTypeScriptだけを導入するだけならばnpm-scriptだけで環境構築ができるのでは?」
と思ったので、npm-scriptのみで開発環境を構築してみました。

( ˘ω˘ ).。o○(webpackでの環境構築は他に素敵な記事が大量にあったしね…)

まずはディレクトリを作成して、npm initしましょう。 私の場合は、TypeScript-Testというディレクトリを作成しました。

mkdir TypeScript-Test
cd TypeScript-Test
npm init

次にTypeScripをインストールします。今回はgit等で開発環境を共有するために-Dオプションを付けましょう。

npm install -D typescript

インストールが完了し、node_modulesディレクトリが作成されたら
tsconfig.jsonを作成しましょう。ここではtsファイルのコンパイル先のディレクトリを指定したり
コンパイルの形式を指定したりすることができます。細かい設定についてはTypeScriptの公式ドキュメントを参照しましょう。

tsconfig.jsonを下記の様に記載してください。

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "./dist/js/",    // 書き出しフォルダの指定
  },
  "include": [
    "./src/ts/*.ts"            // 監視対象の指定
  ],
  "exclude": [
    "./node_modules",
    "**/*.spec.ts"
  ]
}

コード内にもコメントアウトで記載はしていますが、主に注目して頂きたいのはoutDirincludeの箇所になります。
includeで次の工程で説明する監視コマンドの、監視対象を指定しています。
outDirではコンパイルされたデータを吐き出すディレクトリを指定しています。ここをoutFileとして、
ファイル名を指定すると、すべてのtsファイルを指定した1つのファイルに連結して出力してくれます。

次に、package.jsonを下記の様に記述してください。

{
  "name": "typescript-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w"      // ここでwatch scriptを設定
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.8.3"
  }
}

変更するのはscriptの個所ですが、見てもらうとわかる通りめちゃくちゃ簡単ですね。

実際にコンパイルしてみる

では最後に実際にコンパイルしてみましょう。tsconfig.jsonで指定した通り、 ./src/ts/ディレクトリ内にindex.tsを作成して、この記事のはじめにテストしてみた下記コードをコピペしてみましょう。

function hello(name: string) {
  return "Hello! " + name + "!";
}

let you = "dummy men";

console.log(hello(you));

そして、さきほどpackage.jsonで設定した下記コマンドを打ってみます。

npm run watch

すると、./dist/js/index.jsというjsファイルが出力されているはずです!
./src/ts/ディレクトリ内に他の名前のtsファイルを作成すると、./dist/js/ディレクトリに
出力が行われることが確認できるかと思います。また、この記事のはじめの方で行ったように
型の違反を行うと、しっかりエラーメッセージが返されます!

感想

ずっと避けてきたnpm-scriptですが、意外に簡単に入門できました!
次は今まで素のjsで書いていたものをTypeScriptで置き換えていく記事が書けたらと思っています!