導入
TypeScriptは、様々な開発環境で使用されている汎用プログラミング言語です。リリース以来、開発者や企業から多くの支持を得ており、GitHubが2022年にTypeScriptを最も使用されているプログラミング言語の4位にランク付けしたことからもそれが明らかです。それ以来、TypeScriptの知名度は高まっています。.
さらに、その人気は就職機会の豊富さにも反映されており、LinkedIn には 20,000 件を超える TypeScript 関連の求人が掲載されており、Trivago や Stripe などの業界の大手企業がテクノロジー スタックを TypeScript に移行することを選択しています。.
この記事では、TypeScript を根本から探求し、開発者コミュニティでの使用が増えている理由となった TypeScript の利点を理解します。.
TypeScript と JavaScript
TypeScriptは全く新しいものではありません。JavaScript自体の限界を克服したJavaScriptのスーパーセットです。スーパーセットとして、TypeScriptは静的型付けを追加することでJavaScriptを拡張します。.
この静的型付けは、次の 2 つの一般的な方法で宣言できます。
1.型注釈
これは、変数を初めて宣言するときに、その変数とその型をすぐに指定することを意味します。次のようにします。
let name: string = "Hygraphここで、name は変数の名前であり、string はその型です。.
2. 型エイリアス
この方法では、type キーワードを使用して型を個別に定義し、後でそれを使用して変数に注釈を付けます。.
type StringType = {
name: string;
};
let name: StringType = { name: "Hygraph" };それでは、TypeScript が提供する機能のいくつかを見てみましょう。.
TypeScriptの主な機能
静的型付け
静的型付けとは、コンパイル時に変数がデータ型 (整数、文字列、ブール値など) とともに明示的に宣言され、プログラムを実行する前にシステムが型チェックを実行することを指します。.
次の動作は JavaScript では許可されていますが、TypeScript で同じことを行うと、TypeScript の型の実装によりエラーが発生します。.
let name: string = "hygraph";
name = 2000オプション入力
TypeScriptでは明示的な変数宣言が可能ですが、型を宣言せずにJavaScriptのようなコードを記述することもできます。TypeScriptは型を推測します。例えば、
let name = "Hygraph";上記では、TypeScript は変数の初期化値を介して型名が文字列 (例: "Hygraph") であると推測します。.
TypeScriptジェネリック
TypeScript ジェネリックは、型と関数をパラメーター化することで、型の安全性を損なうことなくさまざまな型で動作できる再利用可能なコンポーネントと関数を作成します。
// Generic function to return the length of an array
function getArrayLength<T>(array: T[]): number {
return array.length;
}
// Using the generic function with different types of arrays
const stringArray: string[] = ["apple", "banana", "orange"];
const numberArray: number[] = [1, 2, 3, 4, 5];
console.log(getArrayLength(stringArray)); // Output: 3
console.log(getArrayLength(numberArray)); // Output: 5ジェネリックは通常、ツリー、グラフ、キューなどのデータ型で動作する必要があるカスタム データ型を定義するのに役立ちます。.
高度な型システム
TypeScriptの型システムは、基本的な静的型付けにとどまりません。複雑な型の定義、型の操作、変数間の関係の確立、型制約の適用など、エラーのないアプリケーション開発を可能にする機能も提供します。.
最も広く使用されている高度なタイプをいくつか考えてみましょう。.
1. 組合の種類
TypeScriptにおけるUnionは、複数のデータ型を保持する変数または関数の引数を宣言することを指します。これは、実行時に値のデータ型が異なる場合に役立ちます。.
共用体型は、データ型を区切る | 記号で表されます。例:
let age = number | string;
age = 10;
age = "ten";上記のように、age変数に2つのデータ型を指定できるようになっています。これにより、型安全性を損なうことなく柔軟性が得られます。.
2. 交差点の種類
交配により、複数の既存のタイプを新しいタイプに組み合わせることで、新しいタイプを作成できます。この新しいタイプは、組み合わせたタイプの性質と機能を持ちます。.
交差は、結合する型の間に & 記号を使用して作成されます。例:
interface User {
id: number;
username: string;
email: string;
}
interface Admin {
isAdmin: boolean;
}
// A new type using intersection type
type UserAndAdmin = User & Admin;ここで、User AndAdmin タイプは UI と Admin の両方の機能を組み合わせて、両方の機能すべてを必要とするタイプを生成します。.
3. 条件型
TypeScript の条件付き型は、状態に依存する型を作成します。これにより、型のプロパティ、値、またはその他のコンテキストに基づいて変化する動的な型を定義できます。.
基本的な例を考えてみましょう。
// A conditional type to determine if a type is an array
type IsArray<T> = T extends any[] ? true : false;
// Test the conditional type with different types
type Result1 = IsArray<number>; // false
type Result2 = IsArray<string[]>; // true
type Result3 = IsArray<boolean | []>; // true条件付き型は、山括弧 (<>) で囲まれた三項演算子 (? 🙂) を使用して定義されます。これは「ジェネリック型パラメータ」と呼ばれます。これについては、この記事の後半で詳しく説明します。また、extends キーワードも使用します。extends キーワードは、型が特定の条件を満たしているかどうかを確認し、その結果に基づいて別の型を生成します。.
4. マッピングの種類
TypeScriptのマップ型を使用すると、既存の型のプロパティを変換することで新しい型を作成できます。これは、元の型のプロパティを反復処理し、各プロパティに変換を適用して新しい型を生成することで実現されます。例えば、
// type representing a user
type User = {
id: number;
username: string;
email: string;
};
// Mapped type to make all properties optional
type OptionalUser = { [P in keyof User]?: User[P] };
// New type using the mapped type
const optionalUser: OptionalUser = { id: 1 };
// Property 'email' is now optional
optionalUser.username = "john_doe";
// Property 'id' is still required
// optionalUser.email = "[email protected]"; // Error: Property 'email' is missingマッピングされた型は、{ [P in keyof Type]: NewType } という構文を使用して定義されます。ここで、Type はソース型、P はプロパティキー、NewType は変換後の型です。P はプロパティキーを反復処理し、変換を定義します。.
5. ニックネームを入力する
型エイリアスを使用すると、プリミティブ型、ユニオン型、交差型、さらにはオブジェクトリテラルや関数型といったより複雑な型を含む、既存のTypeScript型にカスタム名（エイリアス）を作成できます。型エイリアスは、以下のように、typeキーワードに続けて新しい名前を指定することで定義されます。
// type alias for a union type
type Result = "success" | "error";
// type alias for an object literal
type Point = { x: number; y: number };
// type alias for a function type
type Greeting = (name: string) => string;
// Using the type aliases
const status: Result = "success";
const origin: Point = { x: 0, y: 0 };
const greet: Greeting = (name) => Hello, ${name}!;上記のコードは、TypeScript におけるさまざまな型の型エイリアスのさまざまな使用法と、宣言後のそれらの使用法を示しています。.
オブジェクト指向プログラミング（OOP）における TypeScript
OOP は、相互作用して保守可能かつ再利用可能なコードを作成する「オブジェクト」の概念に基づくパラダイムです。.
1. TypeScriptクラス
クラスはオブジェクトを作成するためのパターンまたは設計であり、データ (プロパティ) とメソッド (関数) を定義します。.
TypeScript でクラスを実装する方法の例を次に示します。
class Organization {
private name: string;
private yearFounded: number;
constructor(name: string, yearFounded: number) {
this.name = name;
this.yearFounded = yearFounded;
}
public getDetails(): string {
return `${this.name} was founded in ${this.yearFounded}.`;
}
}
let organization = new Organization("Hygraph", 2015);
console.log(organization.name); // Error: Property 'name' is private and only accessible within class 'Organization'.
console.log(organization.getDetails()); // Output: Hygraph was founded in 2015上記のコードでは、Organizationクラスを作成し、その中にnamedとyearFoundedというプライベートプロパティを設定しました。これらのプロパティとメソッドは、「Organization」クラス内でのみアクセスおよび変更可能です。これらのプロパティとメソッドの型指定方法に注意してください。.
2. TypeScriptインターフェース
インターフェースは、実装の詳細を提供せずに、オブジェクトが持つ必要があるプロパティとメソッドをリストすることによって、オブジェクトの形状を記述します。
// Interface representing form data
interface FormData {
firstName: string;
lastName: string;
email: string;
age: number;
}
// Usage
let formData: FormData = {
firstName: "John",
lastName: "Doe",
email: "[email protected]",
age: 30
};上記の例では、フォーム データの構造を表す FormData インターフェイスを定義しました。.
次に、インターフェース定義に関連するプロパティを持つ formData オブジェクトを作成しました。.
TypeScriptの数値
TypeScript で enum で表される列挙型は、中括弧 {} で囲まれた名前付き定数のコレクションであり、各定数には数値または文字列値が関連付けられています。.
典型的な TypeScript リスト コレクションは次のようになります。
// enum for days of the week
enum DayOfWeek {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
enum HTTPStatusCodes {
OK = 200,
BadRequest = 400,
NotFound = 404,
}上記のコード ブロックは、何が起こっているかをすぐに説明し、TypeScript 列挙型の使用に意味を追加することによるセマンティックな利点を示しています。.
TypeScriptとES6
TypeScript は、ECMAScript 2015 とも呼ばれる ECMAScript 6 (ES6) の多くの機能をサポートしています。これらの機能の一部を以下に示します。
1) アロー関数：従来の関数式とは異なり、アロー関数は関数を定義するためのシンプルな構文を提供します。単一行の式に対して暗黙的な return を返し、自動的な関数連鎖も提供します。コールバック関数やイベントハンドラ関数に便利です。.
// Arrow function
const add = (x, y) => x + y;
// Traditional function expression
const add = function(x, y) {
return x + y;
};2) テンプレートアルファベット：複数行の式や文字列をコード内（中括弧（“）内）に直接埋め込むことができます。これにより、変数や式の補間など、動的な文字列を簡単に作成できます。.
const name: string = "John";
const greeting: string = `Hello, ${name}!`;ES6 にはこの記事で網羅しきれないほど多くの機能があります。詳しくは Ecma International をご覧ください。.
TypeScriptがJavaScriptよりも優れている点
TypeScript が 10 年以上前にリリースされて以来、JavaScript に対する TypeScript の利点については議論が続いています。.
このセクションでは、これらの利点のいくつかを検討します。.
- 安全タイプ: TypeScript の静的型システムは、変数、関数、オブジェクトに型注釈を適用します。これにより、エラーの早期検出が可能になり、インターフェース、クラス、モジュールを通じて保守性が向上します。.
- 開発者エクスペリエンスの向上: コンパイラがコード実行前に潜在的な型の不一致を検出するため、開発者はより自信を持ってコードを記述できるようになります。これは、JavaScriptコードベースをTypeScriptに移行する場合に特に役立ちます。.
TypeScriptを使うべき時
上で説明したトレードオフから、TypeScriptはすべてのプロジェクトに適しているわけではないと推測できます。確かにその通りかもしれませんが、なぜその判断をあなたに委ねる必要があるのでしょうか？より良い判断を下せるよう、私たちがお手伝いします。.
TypeScript を使用するのはいつが適切でしょうか?
- 大規模アプリケーション: TypeScriptは、大規模なJavaScriptコードベースのスケーラビリティ問題を解決するために開発されました。プロジェクトの規模が大きくなるにつれて、静的型付けによってエラーを早期に検出し、コードの保守性とチームメンバー間の連携を向上させることができます。.
- チームワーク: 複数の開発者がコードベースに貢献するチーム環境では、TypeScript はコーディング規則を適用し、自己文書化コードを通じてコミュニケーションを改善することで、コラボレーションを促進できます。.
- 長期プロジェクト: メンテナンスはソフトウェア開発ライフサイクルの最終段階であり、10年続く場合もあれば、1年程度で終わる場合もあります。TypeScriptは、コードの保守性、スケーラビリティ、そして将来性への配慮が重要な考慮事項となる長期プロジェクトに適しています。.
TypeScript を使用しない場合
残念ながら、TypeScript には多くの利点があるにもかかわらず、すべてのユースケースに適しているわけではありません。例えば、
- 簡単なプロジェクト: 複雑さが最小限の小規模プロジェクトの場合、静的型付けと高度なツールの利点は、TypeScript に関連する構成と学習曲線を上回らない可能性があります。.
- 古いコードベース: 既存の大規模なJavaScriptコードベースをTypeScriptに変換するのは、非常に困難な場合があります。特にプロジェクトのライフサイクルが終わりに近づいている場合や、最小限のメンテナンスしか行っていない場合、TypeScriptへの移行に必要な労力はメリットに見合わない可能性があります。.
