【入門編】TypeScriptを初心者向けにわかりやすく解説してみた

TypeScriptは、JavaScriptのスーパーセットにあたるプログラミング言語です。

静的型付けとクラスベースのオブジェクト指向を提供しており、これらを活用することで大規模なプロジェクトの開発を容易に行えるようになります。

今回は、TypeScriptの基本的な概念と開発環境の構築方法について解説します！

TypeScriptとは？

TypeScriptはMicrosoft社が開発したプログラミング言語です。

JavaScriptが動的型付け言語なのに対してTypeScriptは静的型付け言語で、さらにクラスベースのオブジェクト指向が加えられています。

TypeScriptでコーディングされたプログラムは、実行前のビルド段階でJavaScriptに変換されます。

ビルドの際にコードの不整合がチェックされるため、プログラムの実行前にバグを潰すことができます。

こちらの表にJavaScriptとTypeScriptの主な違いをまとめました。

TypeScript開発環境の構築

TypeScriptの開発環境は、以下の5STEPで構築できます。

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

Node.js開発環境の構築

Node.jsの開発環境の構築は、みなさんのそれぞれの環境に合わせて進めてください。

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

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

次に、TypeScriptビルド設定ファイル tsconfig.json を作成します。

ターミナルでtsc –init を実行すると、設定ファイルが自動で生成されます。

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

cd [Project Dir]

# tsconfog.json の作成

tsc --init

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

そこで、以下のように設定ファイルを修正します。

{
    "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"]
}

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

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

ビルドに成功すると、distディレクトリ配下に .jsファイル が生成されます。

ファイルが正常に生成されたら、最後にアプリケーションを実行します。

# アプリケーションの実行

npm run start-app

今回は実行結果として、5 + 10 = 15ですと表示されれば成功です！

これでTypeScriptの開発環境が整いました。

以降はみなさん自身のプロジェクト向けにカスタマイズして、実際に開発を進めていきましょう。

TypeScriptの基本的な概念

TypeScriptはJavaScriptのスーパーセットの位置付けとなるため、JavaScriptの構文や概念をTypeScript内でそのまま使用できます。

それに加えて、TypeScript独自の機能も多く存在します。ここからは、TypeScriptの基本的な概念をいくつか紹介します。

型注釈と型推論

TypeScriptでは、変数や関数のパラメータに型を指定することができます。

これを型注釈といいます。

let name: string = 'John Doe';
let age: number = 30;
let isAdult: boolean = true;

また、TypeScriptは型推論という機能も持っています。

これは変数が初めて値を持つときに、その値の型に基づいて変数の型を自動的に決定する機能です。

let name = 'John Doe'; // string型と推論される
let age = 30; // number型と推論される
let isAdult = true; // boolean型と推論される

インターフェース

TypeScriptでは、インターフェースを使用して特定の構造を持つオブジェクトを定義することができます。

こちらはオブジェクト定義の一例です。

interface Person {
  name: string;
  age: number;
}

let john: Person = {
  name: 'John Doe',
  age: 30
};

クラスと継承

クラスベースのオブジェクト指向プログラミングのサポート機能もあります。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

let john = new Person('John Doe', 30);
console.log(john.greet()); // Hello, my name is John Doe and I am 30 years old.

さらに、クラスの継承もサポートしています。

class Employee extends Person {
  company: string;

  constructor(name: string, age: number

まとめ

TypeScriptの基本的な概念と、開発環境の構築方法についてご紹介しました。

これらの基本的な概念を理解し、開発環境を構築することで、TypeScriptを活用したさまざまな開発が可能となります。

大規模なプロジェクトを効率的に開発するために、ぜひTypeScriptの特性を活用してみてください！