SEの部屋

初めてのTypeScript

公式サイト

TypeScriptの特徴、概要、メリット

TypeScriptとは？

TypeScriptはMicrosoftが開発したオープンソースのプログラミング言語で、JavaScriptのスーパーセットです。JavaScriptの上に構築されており、静的型付けをサポートすることで、コードの安全性と保守性を向上させます。

TypeScriptの特徴

  1. 静的型付け: 変数や関数の型を明示的に指定できます。これにより、コードの予測可能性とエラーの検出が向上します。
  2. モダンなJavaScript機能: TypeScriptは最新のJavaScript機能（ES6やES7など）をサポートしており、古いブラウザでもトランスパイルして利用できます。
  3. 優れた開発ツールサポート: TypeScriptはVisual Studio Codeをはじめとする多くのIDEやエディタでのサポートが充実しており、コード補完やインテリセンスなどの機能を提供します。
  4. ブジェクト指向プログラミングのサポート: クラスやインターフェース、継承など、オブジェクト指向プログラミングの概念を取り入れています。

TypeScriptのメリット

  1. エラーの早期発見: 型チェックにより、コンパイル時に多くのエラーを発見できます。これにより、ランタイムエラーの発生を減らし、デバッグ時間を短縮します。
  2. 読みやすく保守しやすいコード: 明示的な型宣言により、コードの読みやすさが向上し、他の開発者が理解しやすくなります。また、コードの変更が容易になります。
  3. 大規模プロジェクトでの優位性: 大規模なコードベースでも型チェックにより一貫性を保てるため、チーム開発において特に有用です。
  4. 既存のJavaScriptライブラリとの互換性: TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptライブラリやフレームワークと簡単に統合できます。

TypeScriptの基本的な使用例

以下に、TypeScriptの基本的な使用例を示します。

変数の型宣言

TypeScriptでは変数の型を宣言することで、特定の型の値のみを代入できるようになります。

 let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
  • let isDone: boolean = false;
    • isDone という変数を boolean 型として宣言し、false を代入しています。これにより、isDone には true か false しか代入できません。
  • let decimal: number = 6;
    • decimal という変数を number 型として宣言し、6 を代入しています。これにより、decimal には数値しか代入できません。
  • let color: string = "blue";
    • color という変数を string 型として宣言し、"blue" を代入しています。これにより、color には文字列しか代入できません。


関数の型指定

関数の引数と戻り値の型を指定することで、関数の使い方を明確にすることができます。

function greet(person: string): string {
    return "Hello, " + person;
}
let user = "Jane User";
console.log(greet(user));
  • function greet(person: string): string { ... }
    • greet 関数は person という string 型の引数を受け取り、戻り値として string を返します。
  • let user = "Jane User";
    • user という変数を string 型として宣言し、"Jane User" を代入しています。
  • console.log(greet(user));
    • greet 関数に user を引数として渡し、その戻り値をコンソールに出力しています。"Hello, Jane User" と表示されます。

インターフェースの使用

インターフェースを使うことで、オブジェクトの形を定義し、その形に従うオブジェクトのみを扱うことができます。

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
console.log(greeter(user));
  • interface Person { ... }
    • Person インターフェースは firstName と lastName という2つの string 型プロパティを持つオブジェクトの形を定義しています。
  • function greeter(person: Person) { ... }
    • greeter 関数は Person インターフェースに従うオブジェクトを引数に取り、string を返します。
  • let user = { firstName: "Jane", lastName: "User" };
    • user というオブジェクトを Person インターフェースに従う形で作成しています。
  • console.log(greeter(user));
    • greeter 関数に user を引数として渡し、その戻り値をコンソールに出力しています。"Hello, Jane User" と表示されます。

クラスの使用

TypeScriptではクラスを使ってオブジェクト指向プログラミングを行うことができます。

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
console.log(greeter(user));
  • class Student { ... }
    • Student クラスは fullName というプロパティを持ち、コンストラクタで firstName、middleInitial、lastName の3つのパラメータを受け取ります。これらのパラメータは自動的にクラスのプロパティとして初期化され、fullName プロパティに結合されます。
  • constructor(public firstName: string, public middleInitial: string, public lastName: string) { ... }
    • コンストラクタ内で public キーワードを使用することで、渡された引数が自動的にクラスのプロパティとして定義されます。
  • interface Person { ... }
    • 先ほどと同様に、Person インターフェースは firstName と lastName という string 型プロパティを持つオブジェクトの形を定義しています。
  • function greeter(person: Person) { ... }
    • greeter 関数は Person インターフェースに従うオブジェクトを引数に取り、string を返します。
  • let user = new Student("Jane", "M.", "User");
    • Student クラスのインスタンスを作成し、user という変数に代入しています。
  • console.log(greeter(user));
    • greeter 関数に user を引数として渡し、その戻り値をコンソールに出力しています。"Hello, Jane User" と表示されます。


これらの例を通じて、TypeScriptの基本的な機能とその使い方を理解することができるでしょう。TypeScriptの静的型付けとオブジェクト指向プログラミングのサポートを活用して、より安全で保守性の高いコードを書くことができます。

次の記事へ

TypeScript

    もっと見る

    Next.js

      もっと見る

      React

        もっと見る

        C++ ライブラリ

          もっと見る