portfolio.prodouga.com

1. TypeScriptとは

TypeScriptは、JavaScriptのスーパーセットであり、静的型付け言語です。JavaScriptと互換性があり、JavaScriptのコードはそのままTypeScriptで使用できます。

静的型付け言語とは、変数や関数の型を明示的に定義する言語です。これにより、コードの型安全性が向上します。

2. TypeScriptの基本的なデータ型

TypeScriptの基本的なデータ型(boolean, number, string, array, tuple, enum, any, voidなど)を解説します。

TypeScriptの基本的なデータ型について説明します。

boolean - trueまたはfalseの論理型

let isDone: boolean = false;

number - 整数や浮動小数点数などの数値型

let count: number = 10;

string - 文字列型

let message: string = 'Hello';

array - 配列型

let list: number[] = [1, 2, 3];

tuple - 要素の型が決まっている配列

let tuple: [string, number] = ['foo', 1];

enum - 列挙型

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

any - 型チェックを行わない型

let value: any = 'foo';

void - 返り値のない関数の返り型

function print(): void {
  console.log('foo');
}

以上が代表的なTypeScriptの基本的なデータ型です。

3. TypeScriptの基本的な文法

それではTypeScriptの基本的な文法(変数宣言、関数定義、クラス定義、インターフェース定義)について、説明していきます。

変数宣言

let message: string = 'Hello';

型注釈を用いて変数の型を指定できます。

関数定義

function add(x: number, y: number): number {
  return x + y;
}

パラメータと返り値に型を定義できます。

クラス定義

class Person {
  name: string;
  constructor(name: string) { 
    this.name = name;
  }
}

フィールドとコンストラクタに型を指定できます。

インターフェイス定義

interface IPerson {
  name: string;
  greet(): void;
}

プロパティとメソッドの型を定義できます。

このように、TypeScriptでは変数、関数、クラス、インターフェイスの定義時に型情報を追加でき、コードの静的解析を強化できます。

4. TypeScriptのコンパイラの使い方

コンパイラの使い方も重要なので、tscコマンドでのコンパイル方法を解説します。

TypeScriptファイルは拡張子が.tsです。

tscコマンドを使って、これをJavaScriptにコンパイルできます。

tsc hello.ts

このコマンドを実行すると、hello.jsファイルが生成されます。

tscには様々なオプションがあります。

--watch ファイルの変更を監視し、自動的にコンパイル
--target ES5など、コンパイル後のJSのバージョンを指定
--module コンパイル後のモジュール化の種類を指定

などが主なオプションです。

tsc --watch --target ES5 hello.ts

のようにオプションを組み合わせて実行できます。

tsconfig.jsonファイルを使えば、コンパイル時の設定をJSONに記述することもできます。

5. 簡単なTodoアプリの作成

簡単なTodoアプリの作成を通して、実践的にTypeScriptを使う方法をデモします。

Todoアイテムを表すTodoクラスを定義

class Todo {
  constructor(public id: number, public title: string, public done: boolean = false) {
  }
}

Todoリストを表すTodoListクラス

class TodoList {
  // ...
}

HTMLとの紐付け

const todoInput = document.getElementById('todo-input')! as HTMLInputElement;

フォーム送信時のイベントハンドラ

form.addEventListener('submit', e => {
  // 新しいTodoアイテムの作成
  // TodoListへの追加
})

Todoリストの描画処理

function renderTodos(todos: Todo[]) {
  // ...
}

6. TypeScriptのメリット

TypeScriptのメリットとしては以下の2つが大きいと考えます。

静的型チェック
IDEサポート

静的型チェックは、コンパイル時に型エラーをキャッチできる点です。

function add(x: number, y: number) {
  return x + y; 
}
 
add('1', '2'); // コンパイルエラー

IDEでコード補完やリファクタリングをサポートしてくれるのも強力なツールです。

この2つのメリットは、大規模なアプリ開発においてバグを減らし、プロダクティビティを上げることができます。

まとめ

このチュートリアルでは、TypeScriptの基本的な概念や構文を学びました。

TypeScriptは、JavaScriptの経験があれば比較的簡単に学習することができます。

このチュートリアルを参考にして、TypeScriptをマスターしましょう。

補足

より高度な内容を学びたい場合は、以下のリソースを参考にしてください。

TypeScriptの公式ドキュメント
TypeScriptのチュートリアルや教材
TypeScriptのコミュニティ

また、TypeScriptのフレームワークやライブラリを使用したい場合は、それぞれのドキュメントやチュートリアルを参照してください。