Traffine I/O

日本語

2022-11-20

TypeScript

TypeScriptとは

TypeScriptは、マイクロソフトによって導入されたJavaScriptの静的型付けの上位セットです。大規模なJavaScriptアプリケーションの複雑さに対応するために作成されました。TypeScriptは、型、インターフェース、デコレータなどを導入することでJavaScriptを拡張し、複雑なソフトウェアシステムの開発とメンテナンスを容易にする機能を提供します。

TypeScriptは全てのJavaScriptの機能を含んでいますが、JavaScriptには存在しない追加の機能も提供します。もっとも重要な違いは、TypeScriptの静的型システムです。動的型付けのJavaScriptとは異なり、TypeScriptでは変数の型、関数のパラメータ、および関数の戻り値の型を指定することができます。これにより、一般的なバグを検出し、コードを理解しやすく、保守しやすくすることができます。

TypeScriptのユニークな機能

TypeScriptは、複雑なアプリケーションを書くための強力なツールとなるいくつかの機能を導入しています。これらの主要な機能のいくつかについて詳しく見てみます。

静的型付け

TypeScriptのもっとも基本的な機能は、静的型付けです。動的型付けであるJavaScriptとは異なり、TypeScriptでは変数を自由に型を変えることは許されません。変数の型はコードが実行される前(コンパイル時)にチェックされるため、潜在的な型に関連するバグを回避するのに役立ちます。

ts
let message: string;
message = 'Hello, World!'; // Okay
message = 42; // Error: Type 'number' is not assignable to type 'string'.

高度な型チェック

TypeScriptは、高度な型チェック機能を備えたJavaScriptを拡張します。これには、ユニオン型(いくつかの型のうちの1つになり得る値)、インターセクション型(複数の型の全てを満たす必要がある値)、およびリテラル型(指定された値と完全に一致する必要がある値)などが含まれます。

ts
type StringOrNumber = string | number; // Union type

let variable: StringOrNumber;
variable = 'Hello'; // Okay
variable = 42; // Okay
variable = true; // Error: Type 'boolean' is not assignable to type 'StringOrNumber'.

ジェネリクス

ジェネリクスは、コンポーネントを任意のデータ型で動作させる方法を提供します。ジェネリクスを使用することで、再利用可能なコンポーネントを作成することができます。これは、型の安全性を保ちながら、任意の型の柔軟性を提供する強力な機能です。

ts
function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");  // type of output will be 'string'

インターフェース

TypeScriptのインターフェースは、複雑な型のための契約(または形)を定義するために使用されます。インターフェースが宣言されると、このインターフェースの構造に準拠する任意のオブジェクトをそのインターフェースのインスタンスとして扱うことができます。

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

function greet(person: Person) {
    return `Hello, ${person.name}`;
}

greet({ name: 'Alice', age: 25 }); // Okay
greet({ name: 'Bob' }); // Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

列挙型

列挙型(Enum)は、TypeScriptでサポートされている新しいデータ型です。列挙型は、数値または文字列の値で構成される関連する値のコレクションを作成するために使用されます。

ts
enum Color {
    Red,
    Green,
    Blue,
}

let c: Color = Color.Green;

参考

https://www.typescriptlang.org/

Ryusei Kakujo

researchgatelinkedingithub

Focusing on data science for mobility

Bench Press 100kg!