TypeScriptで「Hello World」をやってみた！

前回までで開発環境の構築までは終わっている状態です。

• WindowsPCにnvmを使用してNodeをインストールする。
  
• WindowsPCにTypeScriptをインストールしてみた。
  

準備

• 注意
  • コマンドプロンプトでこれから記載するコマンドを実行します。
  • コマンドを入力する際のカレントディレクトリに各種ファイルが生成されます。
  • あらかじめプログラム用のディレクトリを作成したうえで、作成したディレクトリに移動してから各種処理を実施することをお勧めします。

package.jsonの作成

npmの初期化

> npm init --yes

• プログラムのルートディレクトリにpackage.jsonというファイルが生成されます。（中身は以下でした。）

    {
      "name": "helloworld",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

• 私の場合はhelloworldというフォルダで作業をしているためか、"name": "helloworld",となっていました。

TypeScriptのインストール

> npm install --save-dev typescript

• package.jsonの中身にtypescriptの記述が追加されます。

    {
      "devDependencies": {
        "typescript": "^5.2.2"
      }
    }

• インストールされたTypeScriptのバージョンを確認します。

    > npx tsc --version
  

  • 結果

      Version 5.2.2
    

ts-nodeのインストール

• ts-nodeとはtypescriptのコンパイルと処理の実行を1コマンドで実行するためのライブラリです。

  • 通常はコンパイル（npx tsc）と実行（node src/index.js）を別々に実行しますが、ts-nodeをインストールしておくと1コマンドで処理することが可能になります。

• 今回は便利そうなのでインストールしておくことにしました。

    > npm install --save-dev ts-node
  

  • package.jsonの中身に記述が追加されます。

       {
          "devDependencies": {
            "ts-node": "^10.9.1"
          }
        }

tsonfig.jsonの作成

• tsonfig.jsonはTypeScriptの設定ファイルです。
• tsonfig.jsonを0から作成することもできますが、ひな型を作成する機能がデフォルトで存在しているのでそちらを使用してみます。

初期化の実施

• まずは以下のコマンドを実行します。

    > npx tsc --init
  

  • プログラムのルートディレクトリにtsonfig.jsonというファイルが生成されます。（中身は省略。）

        {
          "compilerOptions": {
            /* Visit https://aka.ms/tsconfig to read more about this file */

            /* Projects */（省略）
            /* Language and Environment */（省略）
            /* Modules */（省略）
            /* JavaScript Support */（省略）
            /* Emit */（省略）
            /* Interop Constraints */（省略）
            /* Type Checking */（省略）
            /* Completeness */（省略）
          }
        }

• 私の場合はhelloworldというフォルダで作業をしているためか、「"name": "helloworld",」となっていました。

ソースファイル置き場の指定

• tsonfig.json内のcompilerOptionsの外側にincludeを追加し、内部にコンパイル対象とするディレクトリを指定することができます。

    {
      "compilerOptions": {
        （省略）
      },
      ”include”:[
        "src/**/*"
      ]
    }

• 拡張子の指定を省略した場合、デフォルト設定で動作します

  拡張子	解釈
  .ts	TypeScriptの標準的な拡張子
  .tsx	JSXを含むTypeScriptに使用する拡張子
  .d.ts	型定義ファイル用の拡張子

コンパイル対象がのファイルを指定する

• コンパイル対象から強制的に除外したいファイルがある場合、excludeを使用します。

    {
      "compilerOptions": {
        （省略）
      },
      “include”:[
        （省略）
      ],
      “exclude”:[
        "node_modules",
        "**/*.test.ts"
      ]
    }

コンパイラオプションを設定する

• ココで紹介する内容はいかになります。

  目的	ブロック	キー
  コンパイルターゲットの指定	Language and Environment	target
  組み込み型定義ライブラリの指定	Language and Environment	lib
  ルートディレクトリの指定	Modules	rootDir
  JavascriptとTypeScriptの共存許可を指定する	JavaScript Support	allowJs
  JSDocで定義した型を型検査に利用する	JavaScript Support	checkJs
  ソースマップの有無	Emit	sourceMap
  コンパイル結果の出力先の指定	Emit	outDir
  厳格な型チェックの指定	Type Checking	strict
  その他のチェックの指定	Type Checking	-

コンパイルターゲットの指定

• コンパイル後のECMAScriptのバージョンを指定できます。
  • 動作環境で必要となる最低バージョンを指定するのが一般的。
  • デフォルトではES3が適用されます。
  • ES5、ES2015～、ESNextといった値が指定できます。

    "target": "es2016",

組み込み型定義ライブラリの指定

• TypeScriptが持つ型の定義ライブラリ群から、プログラムに適したものを指定して使用します。
  • ブラウザで動作させることが前提のプロジェクトであれば、DOMを追加する必要があります。

    "lib": ["es2020","DOM"],

JavascriptとTypeScriptの共存許可を指定する

• allowJSを指定することで、.tsと.tsx以外に、Javascriptのファイルを読み込むことを許可します。
  • JavascriptからTypeScriptへ段階的に移行する場合は必要となる。

    "allowJs": true,

JSDocで定義した型を型検査に利用する

• checkJSを指定することで、JSDocで定義した型を型検査に利用できます。

    "checkJs": true,

ソースマップの有無

• sourceMapを指定することで、ソースマップを出力されます。各種ツールで元のTypeScriptコードに関する情報を参照する際に必要になります。

    "sourceMap": true,

コンパイル結果の出力先の指定

• 「TypeScriptで記載されたコードを実行する」とは、TypeScriptのコードをコンパイルすることによりJavaScriptのソースを生成し、生成したJavascriptのコードを実行することを意味します。
• コンパイル時に生成されたJavaScriptのコードを格納するフォルダをあらかじめ指定することができます。

    "outDir": "build",

• コンパイル前に作業用ディレクトリ直下にbuildというフォルダを生成しておく。

ルートディレクトリの指定

• どのディレクトリを起点とするかを指定します。
• すべてのTypeScriptファイルは指定したディレクトリ以下に配置する必要があります。

    "rootDir": "src",

厳格な型チェックの指定

• strictを指定することで以下の型チェックが有効になります。

  名称	説明
  noImplicitAny	推論できない方を許可しない
  noImplicitThis	推論できないthisを許可しない
  alwaysStrict	ECMAScriptにstrictモードでコードを解析、出力する
  strictBindCallApply	|関数型のcall,bind,applyを厳密に扱う
  strictNullChecks	nullとundefinedを厳密に扱う
  strictFunctionTypes	関数型のパラメータを厳密に扱う
  strictPropertyInitialization	クラスメンバーの定義を厳密に扱う

• strictを有効化したうえで、個々の設定をキャンセルすることができます

    "strict": true,

追加チェック

• TypeScriptのコンパイラのチェックに追加できるもの

  名称	説明
  noUnusedLocals	未使用のローカル変数を許可しない
  noUnusedParameters	関数の引数のうち未使用なものを許可しない
  noImplicitReturns	関数内で戻り値の型が一致しないケースを許可しない
  noFallthroughCasesInSwitch	switch文のフォールスルーを許可しない

コーディング

• 以下の二つのファイルを生成しました。

• src/index.ts

import {greet} from './greet';

greet('TypeScript');

• src/greet.ts

export const greet =(name:string)=>{
    console.log(`Hello ${name}`);
}

コンパイル＆実行

ts-nodeを入れている場合

• ts-nodeを入れている場合は以下の1コマンドで同時に実行することができます。

> npx ts-node src/index.ts

• 以下が出力されました。 Hello TypeScript

ts-nodeを入れていない場合

• コンパイルを実施するコマンド

> npx tsc

• 実行するコマンド

> node build/index.js

• 以下が出力されました。 Hello TypeScript

---

Hello TypeScriptの表示がうまくできました。