JavaScript 開発者のための TypeScript の概要-jsチュートリアル-php.cn

Introduction to TypeScript for JavaScript Developers

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

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

TypeScript とは何ですか?

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

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

なぜ TypeScript を選ぶのですか?

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

静的型指定によるエラーの削減

TypeScript は、型を強制することでエラーを早期に検出するのに役立ちます。 JavaScript では、予期しないデータ型が原因でバグが発生することがよくあります (たとえば、数値に対して文字列メソッドを呼び出そうとした場合など)。 TypeScript は、コードを実行する前にこの種のエラーを検出します。
より良いツールとオートコンプリート

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

JavaScript プロジェクトが成長するにつれて、動的型付けを使用して大規模なコードベースを管理することがますます困難になります。 TypeScript を使用すると、コードをより適切に整理できるため、長期的な保守が容易になります。
JavaScript 開発者は簡単に学ぶことができます

TypeScript は、JavaScript 開発者が簡単に学習できるように設計されています。まったく新しい言語を学ぶ必要はありません。必要に応じて型を追加するだけです。既存の JavaScript コードベース内で TypeScript を段階的に使用できます。

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

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

1. タイプ: TypeScript のコア

JavaScript と TypeScript の最大の違いの 1 つは、型システムです。 JavaScript では、型は動的です。つまり、変数は実行時に型を変更できます。

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

ログイン後にコピー

TypeScript では変数の型を明示的に定義でき、コンパイラは変数に割り当てられた値がその型と一致することを確認します。

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

ログイン後にコピー

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

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

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

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

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

ログイン後にコピー

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

3. 型付き関数

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

<code class="language-typescript">function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet("Alice");  // 正确
greet(42);  // 错误：类型“number”的参数无法分配给类型“string”的参数</code>

ログイン後にコピー

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

<code class="language-typescript">function sum(a: number, b: number = 0): number {
  return a + b;
}

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

ログイン後にコピー

4. 共用体型: 複数の型を処理します

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

たとえば、文字列または数値を保持できる変数を定義できます。

<code class="language-typescript">let value: string | number;

value = "Hello";
value = 42;</code>

ログイン後にコピー

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

5. クラスと継承

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

<code class="language-typescript">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.</code>

ログイン後にコピー

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

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

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

<code class="language-typescript">function identity<T>(arg: T): T {
  return arg;
}

console.log(identity("Hello"));  // 类型为string
console.log(identity(42));  // 类型为number</code>

ログイン後にコピー

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

TypeScript を始めましょう

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

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

<code class="language-bash">npm install -g typescript</code>

ログイン後にコピー

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

次のコマンドを実行してこのファイルを生成できます:

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

ログイン後にコピー

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

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

ログイン後にコピー

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

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

ログイン後にコピー

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

概要

TypeScript は、JavaScript 開発をより効率的、安全かつスケーラブルにする強力なツールです。 JavaScript の動的な性質に合わせた型を導入し、静的分析と優れたツールを提供することで、エラーを減らし、開発者のエクスペリエンスを向上させることができます。

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

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

以上がJavaScript 開発者のための TypeScript の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。