【ノート】TypeScript基礎①（環境構築～Hello Worldまで）

はじめに

目的

本記事はJavaScript&TypeScriptの基礎知識を体系的に学び直して、生成AIに頼りすぎず自力でコーディングできるようになることを目的としています。
学んだ内容のアウトプットとして、シリーズ形式で書いていきます。

ゴール

• TypeScriptでフルスタックアプリを個人開発する
• チーム開発でタスクを渡された際に、メンバーのコードを読んで理解したり自分で実装したりできる状態にする（調べる回数をできるだけ少なくする）

シリーズ記事

JavaScript

【ノート】JavaScript基礎①（変数const, let・データ型と型変換）
【ノート】JavaScript基礎②（条件分岐）
【ノート】JavaScript基礎③（配列操作）
【ノート】JavaScript基礎④（例外処理）

注意

• node.jsを導入している前提とする
• ts-nodeを使う
• viteなどの周辺ツールや、React,Vue等のライブラリ・フレームワークは使用しない

TypeScriptのインストール（ローカルインストール）

プロジェクトディレクトリを作り、npmを初期化する

mkdir demo-ts
cd demo-ts
npm init -y

TypeScriptをローカルインストールする

npm install --save dev typescript

TypeScriptのバージョンを表示させてインストールできているか確認

tsc -v

ts-nodeの導入

ts-nodeとは

node.jsでTypeScriptを実行するためのツール。
通常は以下の流れでコードが実行される。

• TypeScriptファイルをJavaScriptファイルへコンパイル
• コンパイルしたJSファイルをnode.jsで実行
  しかし、ts-nodeを使えばコンパイルの手順を省略して、node.jsから直接TSファイルを実行できる。

ts-nodeのインストール

npm install --save-dev ts-node @types/node

• ts-node：ts-node本体
• @types/node：Node.jsの型定義ファイル
• --save dev：DevDependencesでインストールするためのオプション
  デプロイするアプリのサイズを小さくできる

TypeScriptの設定

tsConfig.jsonを作成する

npx tsc --init

以下のようなjsonファイルが生成されたらOK
tsConfig.jsonの例（自動生成時から一部改変しています）

{
  "compilerOptions": {
    // File Layout
    "outDir": "./dist",

    // Environment Settings
    "module": "nodenext",
    "target": "esnext",
    "types": [],

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

TypeScriptの設定（一部抜粋）

項目	値	説明
module	nodenext	モジュールシステムを指定する。
strict	true	TypeScriptの厳格モードの設定。有効にすると型チェックを厳密に行う。
outDir	./dist	コンパイル後のJSファイルの出力先を指定する。この場合はdistディレクトリに出力する。
target	esnext	コンパイルされたJSをどのバージョンのEcmaScriptに準拠させるか指定する。esnextの場合は動的にバージョンが変化する。

TypeScriptでHello World

Hello Worldを出力するスクリプトを書く

index.ts

//hello world
const hello:string = "Hello, TypeScript!";
console.log(hello); 

index.tsをコンパイルする

tsc

コンパイルしたJSファイルをNode.jsで実行する

node dist/index.js

ターミナルで以下のように出力されればOK

Hello, TypeScript!