TypeScript入門 第1回 環境構築

目次

１）はじめに

プログラムを実行する環境がデスクトップPCからスマートフォンに移っています. スマートフォンだけで動作するプログラムもありますが, スマートフォンはインターネットと常時接続できるため, サーバと協調して動作するプログラムも多くあります. スマートフォンが接続するサーバは, 自前で用意したオンプレミスのサーバよりもアマゾンのAWSやマイクロソフトのAzureといったクラウドサービスを利用したサーバが大半でしょう. 

このようにプログラムの開発・実行環境がデスクトップPCやオンプレミスのサーバからクラウド環境に移行しており, プログラマとして今後も仕事を続けていくためには, クラウド環境は避けて通れません. クラウド環境でプログラムを開発するのですから単純に仮想マシンを使うのではなく, AWS LambdaやAzure Functionsといったサービスを組み合わせて作りたいものです. そのために最適なプログラミング言語を選んでおきたいので, いろいろと検索して調べた結果, 型安全性を保証してくれるTypeScriptが良さそうな感じがします. 

15年ぐらい前にWebアプリケーションを開発するためJavaScriptを使って以来, JavaScriptから離れていましたので, TypeScriptはもちろんのこと最新のJavaScript事情やNode.jsについて何の知識もありません. 急ぎ書店で「プログラミングTypeScript」と「ハンズオンNode.js」を買い求め, この２冊を一通り読んでみましたが, 分かったような, 分からないようなモヤモヤした感じです. やはり, 簡単なもので良いのでTypeScriptを使ってプログラムを作らないとそのプログラミング言語を習得できません.

これに続く記事では, 私がTypeScriptに入門するにあたり, 試したこと, 考えたことを書きますので, 参考にしていただけると幸いです. なお, この記事では, TypeScriptでプログラムを開発するための環境を構築し, TypeScriptで書いたプログラムが動作するところまでを説明します.

２）環境構築

TypeScriptでプログラムを作成するために用意したものは次の通りです.

• Node.js
• Visual Studio Code

Node.jsはTypeScriptで書いたプログラムをJavaScriptにコンパイルし, 実行するために使います. ブラウザ上でTypeScriptを試せる「TypeScript Playground」もありますが, クラウドでサーバレスを目標にしていますので, Node.jsは必須でしょう. 

Visual Studio Code（以下, VSCodeと書きます）はソースコードを編集するためのテキストエディタです. テキストエディタは他にも色々とありますが, 情報が得られやすいVSCodeを選択しました. 

３）最初のプロジェクト

TypeScriptでプログラムを作成するための準備から始めす. まず, エクスプローラなどを用いて作業用のディレクトリを作成します. ディレクトリ名は「HelloTypeScript」としました. PowerShellを起動し, 作成したディレクトリに移動します. 続けて, 次の４つのコマンドを実行します. 

> npm init -y

> npm i -D typescript

> npm i -D @types/node

> npx tsc -init

１番目はプロジェクトの初期化, ２番目はTypeScriptコンパイラのインストール, ３番目はTypeScriptからNode.jsのAPIを使うための型情報のインストール, ４番目はTypeScriptのための初期化を実行しています. ４番目のコマンドはnpmでなくnpxであることに注意してください. lsコマンドを使ってディレクトリの中身を確認するといくつかのファイルができています. 

VSCodeを使って, tsconfig.jsonファイルを編集します. ここは, 「プログラミングTypeScript」の流儀に従って編集します. 編集結果は次の通りです.

{

  "compilerOptions": {

    "target": "es5",                                

    "module": "commonjs",                          

    "outDir": "./dist",     // コメントを外し, 出力ディレクトリにdistを指定             

    "strict": true,                             

    "esModuleInterop": true,                     

    "skipLibCheck": true,                          

    "forceConsistentCasingInFileNames": true      

  },

  "include": ["src"]        // 追加

}

tsconfig.jsonファイルの内容を見やすくするために, コメント行は削除しました. また, 編集した２行にコメントを付けています. 

tsconfig.jsonファイルの設定内容に合わせて, ディレクトリなどを作成します.

1. distディレクトリを作成する.
2. srcディレクトリを作成する.
3. srcディレクトリ内にindex.tsファイルを作成する.
4. index.tsファイルに「console.log('Hello TypeScript!')」と入力する.

これらのディレクトリやファイルは, VSCodeの画面左側, エクスプローラを使って作成できます. 作成した結果は次の通りです.

index.tsをコンパイルして実行します. PowerShellで次のコマンドを実行します.

> .\node_modules\.bin\tsc

> node .\dist\index.js

実行結果は次のようになります.

Windows10の設定によっては, tscを実行した時に次のようなエラーが表示されます.

このようなエラーが表示された場合, 

スタート→設定→更新とセキュリティ→開発者向け

の順に画面を開き, PowerShellスクリプトの実行を許可します.

ここまでできれば, TypeScriptで開発するための最低限の環境が整いました. 次回から簡単なプログラムを作成しながら, TypeScriptコンパイラの反応を観察し, 勘所を探っていきます.

目次