TypeScript は、オプションの靜的型システムを JavaScript に追加する JavaScript のスーパーセットです。 JavaScript 開発者であれば、最近 TypeScript についてよく聞いたことがあるかもしれません。しかし、それは一體何なのでしょうか？なぜそれを気にする必要があるのでしょうか？そして、それをプロジェクトで効果的に使い始めるにはどうすればよいでしょうか?

この記事では、TypeScript を簡単な言葉で説明し、TypeScript がなぜ強(qiáng)力なのか、そしてなぜ TypeScript が次の JavaScript プロジェクトにとって理想的なツールであるのかを理解できるようにします。

TypeScript とは何ですか?

TypeScript の核心は、型を備えた JavaScript です。 TypeScript は、靜的型付けレイヤーを追加することで JavaScript を強(qiáng)化します。これは、コードが実行される前であっても、開発中に潛在的なエラーを検出するのに役立ちます。

でも心配しないでください。TypeScript は依然として JavaScript です。有効な JavaScript コードはすべて、有効な TypeScript コードでもあります。 TypeScript は、開発ワークフローを改善し、コードをより堅(jiān)牢にし、バグを防ぐための追加ツールを提供するだけです。

なぜ TypeScript を選ぶのですか?

「TypeScript が型を備えた単なる JavaScript なら、なぜ JavaScript に固執(zhí)しないのですか?」と疑問に思うかもしれません。その答えは セキュリティ と 開発者のエクスペリエンス にあります。

1. 靜的型指定によるエラーの削減

   TypeScript は、型を強(qiáng)制することでエラーを早期に検出するのに役立ちます。 JavaScript では、予期しないデータ型が原因でバグが発生することがよくあります (たとえば、數(shù)値に対して文字列メソッドを呼び出そうとした場合など)。 TypeScript は、コードを?qū)g行する前にこの種のエラーを検出します。

2. より良いツールとオートコンプリート

   TypeScript は、より優(yōu)れたオートコンプリート、より正確な型チェック、およびより簡単なリファクタリングを提供します。 IDE は、開発をスピードアップするために、より賢明な提案やエラー メッセージを提供します。

3. 大規(guī)模プロジェクト用の保守性コード

   JavaScript プロジェクトが成長するにつれて、動(dòng)的型付けを使用して大規(guī)模なコード ベースを管理することがますます困難になります。 TypeScript を使用すると、コードをより適切に整理できるため、長期的な保守が容易になります。

4. JavaScript 開発者は簡単に學(xué)ぶことができます

   TypeScript は、JavaScript 開発者が簡単に學(xué)習(xí)できるように設(shè)計(jì)されています。まったく新しい言語を?qū)Wぶ必要はありません。必要に応じて型を追加するだけです。既存の JavaScript コードベース內(nèi)で TypeScript を段階的に使用できます。

JavaScript 開発者向けの TypeScript の重要な概念

JavaScript に慣れている場合は、TypeScript に非常に親しみを感じるでしょうが、いくつかの重要な違いがあります。 TypeScript の基本的な概念をいくつか見てみましょう:

1. タイプ: TypeScript のコア

JavaScript と TypeScript の最大の違いの 1 つは、型システムです。 JavaScript では、型は動(dòng)的です。つまり、変數(shù)は実行時(shí)に型を変更できます。

let message = "Hello, world!";
message = 42;  // 沒有錯(cuò)誤，即使類型已更改

TypeScript では変數(shù)の型を明示的に定義でき、コンパイラは変數(shù)に割り當(dāng)てられた値がその型と一致することを確認(rèn)します。

let message: string = "Hello, world!";
message = 42;  // 錯(cuò)誤：類型“number”無法分配給類型“string”

TypeScript の一般的な型には次のものがあります:

• string – テキスト文字列の場合。
• number – 數(shù)値 (整數(shù)および浮動(dòng)小數(shù)點(diǎn)數(shù)) の場合。
• boolean – true または false の値。
• object – 配列やオブジェクトなどの複雑なデータ型の場合。
• any – 任意の型に使用され、型チェックを効果的に無効にします (慎重に使用してください)。

2. インターフェース: オブジェクトの形狀を記述します

TypeScript は、インターフェイス を使用してオブジェクトの形狀を記述します。これにより、オブジェクトのプロパティやタイプなど、オブジェクトが従う必要がある構(gòu)造を定義できます。

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

const person: Person = {
  name: "Alice",
  age: 25
};

インターフェイスは、すべてのユーザー オブジェクトに名前 (文字列) と年齢 (數(shù)値) があることを確認(rèn)するなど、オブジェクトが特定の構(gòu)造に従っていることを確認(rèn)する場合に便利です。

3. 型付き関數(shù)

TypeScript では、関數(shù)のパラメーターと戻り値の型を指定できるため、コードがより予測可能になり、デバッグが容易になります。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet("Alice");  // 正確
greet(42);  // 錯(cuò)誤：類型“number”的參數(shù)無法分配給類型“string”的參數(shù)

オプションのパラメーター、デフォルト値、殘りのパラメーターを含む関數(shù)タイプを定義することもできます。

function sum(a: number, b: number = 0): number {
  return a + b;
}

console.log(sum(5)); // 5
console.log(sum(5, 3)); // 8

4. 共用體型: 複數(shù)の型を処理します

JavaScript では、変數(shù)は複數(shù)のタイプの數(shù)値を保持できますが、TypeScript では、Union 型 を使用してこの柔軟性をより明示的に表現(xiàn)できます。

たとえば、文字列または數(shù)値を保持できる変數(shù)を定義できます。

let value: string | number;

value = "Hello";
value = 42;

共用體型は、文字列または null を返す関數(shù)など、複數(shù)の形式を取ることができる値がある場合に便利です。

5. クラスと継承

TypeScript は、JavaScript (ES6) と同様に、クラスや継承などのオブジェクト指向プログラミング (OOP) の概念をサポートしていますが、タイプ セーフが追加されています。

class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak();  // 輸出：Buddy barks.

TypeScript では、クラスのプロパティとメソッドの型を指定して、コードをより予測しやすくし、クラスのインスタンスが期待される構(gòu)造に確実に準(zhǔn)拠するようにすることができます。

6. ジェネリック: 柔軟で再利用可能なコードの作成

ジェネリックを使用すると、任意の型で動(dòng)作しながらも型の安全性を維持する関數(shù)、クラス、インターフェイスを作成できます。型ごとに個(gè)別の関數(shù)を作成する代わりに、複數(shù)の型に対して機(jī)能する 1 つの関數(shù)を作成できます。

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

console.log(identity("Hello"));  // 類型為string
console.log(identity(42));  // 類型為number

ジェネリックは、複數(shù)の型を処理する必要があるライブラリやユーティリティなど、再利用可能なコンポーネントや関數(shù)を作成する場合に特に役立ちます。

TypeScript を始めましょう

基本的な概念は理解できたので、既存の JavaScript プロジェクトで TypeScript をどのように使い始めればよいでしょうか?

1. TypeScript のインストール npm 経由で TypeScript をインストールできます:

npm install -g typescript

2. TypeScript 構(gòu)成ファイルを作成する TypeScript は構(gòu)成ファイル (tsconfig.json) を使用してコンパイラ オプションとプロジェクトの構(gòu)造を指定します。

次のコマンドを?qū)g行してこのファイルを生成できます:

let message = "Hello, world!";
message = 42;  // 沒有錯(cuò)誤，即使類型已更改

3. .ts ファイルの作成 TypeScript コードは、通常、.ts 拡張子の付いたファイルに記述されます。 TypeScript コンパイラー (tsc) は、.ts ファイルを標(biāo)準(zhǔn)の JavaScript ファイルにコンパイルできます。

let message: string = "Hello, world!";
message = 42;  // 錯(cuò)誤：類型“number”無法分配給類型“string”

4. コードをコンパイルして実行する TypeScript コードを作成した後、次のコマンドを?qū)g行して JavaScript にコンパイルできます。

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

const person: Person = {
  name: "Alice",
  age: 25
};

これにより、ブラウザまたは Node.js で実行できる JavaScript ファイルが生成されます。

概要

TypeScript は、JavaScript 開発をより効率的、安全かつスケーラブルにする強(qiáng)力なツールです。 JavaScript の動(dòng)的な性質(zhì)に合わせた型を?qū)毪?、靜的分析と優(yōu)れたツールを提供することで、エラーを減らし、開発者のエクスペリエンスを向上させることができます。

すでに JavaScript に精通している場合、TypeScript は簡単に習(xí)得できるため、既存のコード ベースに徐々に採用できます。タイプ セーフ、より優(yōu)れたデバッグ、より保守しやすいコードといった追加の利點(diǎn)により、小規(guī)模プロジェクトと大規(guī)模プロジェクトの両方にとって貴重な投資となります。

TypeScript でプログラミングを楽しんでください! ?

以上がJavaScript 開発者のための TypeScript の概要の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。