【初心者向け解説】TypeScript入門(開発環境を構築)

[記事内には広告が含まれています]

こんにちは、現役エンジニアの inno_tech です。

TypeScriptプロジェクトの始め方をお探しでしょうか? 本記事ではTypeSript入門として、開発環境の構築~サンプルプログラムのビルド方法を解説しています。

本記事を見れば、TypeScriptで開発できるようになり、型チェック機能によってバグが少ないプログラムを開発できるようになります。

本記事は、Ubuntu 20.04LTS で動作確認しています。

もくじ

TypeScript と JavaScriptの違い

TypeScriptMicrosoft が開発したプログラミング言語で、JavaScriptに対して静的型付けをサポートし、クラスベースのオブジェクト指向が加えられています。

TypeScriptでコーディングされたプログラムは、実行前にビルドしてJavaScriptに変換されます。このビルド時にコードの不整合等がチェックされるため、プログラムの実行前にバグを潰すことができます。

それぞれの特徴の比較表を作成してみました。

項目JavaScript (ECMA Script)TypeScript
分類動的型付け言語静的型付け言語.
コーディング時に型情報を付ける必要がある.
拡張子.js.ts
ビルドが必要か?不要必要
エディターによる
コード補完機能 のサポート
推測できない場合は効かない場合がある.完全にサポートされる.
関数の引数の型も分かるので、コーディングが楽になる.
活用シーン小規模なプロジェクト向き大規模プロジェクト向き
比較表 | JavaScript と TypeScript

コーディング量はTypeScriptの方が増えますが、総合的な生産性はTypeScriptの方が良いと思うよ

それでは早速、TypeScriptの開発環境を作成していきましょう.

TypeScript 開発環境構築の流れ

TypeScriptの開発環境をつくるまでの流れは以下の通りです。TypeScriptをビルドするため、Node.js環境が必要です。

  1. Node.js開発環境を構築
  2. TypeScript用パッケージの導入
  3. ビルド設定ファイル tsconfig.json の作成
  4. TypeScriptファイル(.ts)の作成
  5. ビルド実行

以下、順を追って説明していきます。

Node.js開発環境構築

Node.jsの開発環境構築については、下記の記事でまとめているので参照してください。

あわせて読みたい
【Node.js入門】Node.jsアプリ 開発環境の構築方法をまとめ Ubuntu上でNode.js Webアプリケーションの開発方法をお探しでしょうか? 本記事を見れば、Ubuntu上でNode.jsを使ったアプリケーションの開発環境が構築でき、Webアプリ...

ここまでの作業で、Node.jsのインストールプロジェクトフォルダ内にpackage.jsonができていればOKです。

TypeScript用パッケージの導入

次に、TypeScriptをビルドするために必要なパッケージを導入します。ターミナルから以下のようにインストールします。

# プロジェクトフォルダ(package.jsonと同じ階層)に移動
cd [Project Dir]

# インストール(--save-dev : 開発環境にのみ導入)
npm install typescript --save-dev

# バージョン確認
tsc -v
Version 4.7.4

TypeScriptのビルドは tsc コマンドで実行するよ

更に、srcフォルダを作成し、その中に server.tsファイル(とりあえず空ファイル)を作成してください。この時点で下記のようなファイル構成になればOKです。

[Project Dir]
├── node_modules
├── package-lock.json
├── package.json
└── src
     └── server.ts

ビルド設定ファイル tsconfig.json の作成

続いて、TypeScriptビルド設定ファイル tsconfig.json を作成します。ターミナルでtsc --init を実行することで設定ファイルが生成されます。

# プロジェクトフォルダ(package.jsonと同じ階層)に移動
cd [Project Dir]

# tsconfog.json の作成
tsc --init

しかし、初期生成されるファイルはかなり冗長な表現になっており、わかりづらいです。

そこで、Microsoftのサンプルプロジェクト(TypeScript-Node-Starter)に公開されているtsconfig.json の中身をコピペし、一部修正します。

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node", 
        "sourceMap": true,   // sourceMapを有効化するか? 開発時はtrueでOK.
        "outDir": "dist",    // コンパイル後の出力先
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },
    // コンパイル対象ファイル
    "include": [
        "src/**/*"
    ],
    // 除外フォルダ (追加)
    "exclude": ["node_modules", "dist"]
}

srcディレクトリ配下の.tsファイルをビルド ⇒ distディレクトリに.jsファイルを出力する設定だよ

さらに、package.jsonを開き、scriptsキー配下に、ビルドコマンド(build) と プログラムの開始コマンド(start-app)を追加します。

{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "xxxx.",
  "main": "server.js",
  "scripts": {
    "build": "npx tsc --build ./tsconfig.json",  // ビルド用コマンドを追加. --buildでconfigファイルのパス指定
    "start-app": "node ./dist/server.js"         // distディレクトリのjsファイル
  },
  "author": "inno-tech-life.",
  "license": "ISC"
}

この時点のファイル構成は以下のようになっています。

[Project Dir]
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── server.ts
└── tsconfig.json

TypeScriptファイル(.ts)の作成

続いて、src/server.tsファイルの中身を記述します。足し算結果を表示するだけのプログラムです。

// 足し算を行うプログラム
const a = 5;
const b = 10;

const result = sum(a, b);

// 結果表示
console.log(`${a} + ${b} = ${result}です`);

// 関数 sumを定義
function sum(a: number, b: number): number{
  return a + b;
}

ビルド と 実行

TypeScriptファイルが準備できたので、ビルドします。ターミナルから以下のように実行してください。

# ビルド実行
npm run build

> sample-app@1.0.0 build
> npx tsc --build ./tsconfig.json

ビルドに成功すれば、distディレクトリ配下に .jsファイル が生成されているはずです。

[Project Dir]
├── dist
│   ├── server.js
│   └── server.js.map
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── server.ts
└── tsconfig.json

最後に、アプリケーションを実行します。

# アプリケーションの実行
npm run start-app

> sample-app@1.0.0 start-app
> node ./dist/server.js

# 結果
5 + 10 = 15です

少し長かったけどできたかな?

以上でTypeScriptの開発環境が整いました. 以降は 自身のプロジェクト向けにカスタマイズして開発をしていきましょう.

まとめ

今回のまとめです。

  • TypeScript静的な型付けがサポートされ、大規模なプロジェクト開発がしやすくなる.
  • TypeScriptの環境構築方法を解説。
  • tsconfig.jsonを使ってビルドの環境設定を行う。

このミステリーがすごい!2022年版国内編1位に選出された注目の本が気になる方はこちら

参考になったでしょうか。
ほかにも役立つ情報が他のページにあるかもしれないのでお見逃しなく!
ご覧になるかはあなた次第です!

この記事がイイねと思ったら、Twitterフォロー か  にほんブログ村のどちらかしてくれたら嬉しいよ!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント / ご要望

コメントする

goto
もくじ
閉じる