TypeScript は開発者の間で終わりのない議論を引き起こしました。これを JavaScript の自由に対する官僚的な障害と見る人もいますが、ゆるく型付けされたコードの溝に光を燈すものとして歓迎する人もいます。好むと好まざるにかかわらず、TypeScript は今後も存続します。一度理解すれば、それがプロジェクトにとって負(fù)擔(dān)ではなく祝福であることがわかるかもしれません。

このシリーズでは、TypeScript について詳しく説明し、基本といくつかのトリックやトラブルシューティングのヒントを取り上げます。

1. はじめに

TypeScriptとは何ですか?

TypeScript は、プレーンな JavaScript にコンパイルされる、靜的に型付けされた JavaScript のスーパーセットです。簡単に言うと、エラーを早期に発見し、より優(yōu)れた、より保守しやすいコードを作成するのに役立つ追加機能を備えた JavaScript です。

TypeScript は、提出前にあなたの作品を再チェックしてくれるフレンドリーなアシスタントだと考えてください。これにより次のことが可能になります:

• デプロイ後ではなく、コーディング中にエラーを見つけます。
• 読みやすく理解しやすいコードを作成します。
• 物事がどのように接続されているかを見失わずにプロジェクトを拡張します。

TypeScript を使用する理由

実踐してみましょう。 JavaScript がすでに動作しているのに、なぜ TypeScript を気にする必要があるのでしょうか?

実際のメリット:

1. エラーを早期に検出: 関數(shù)に間違ったデータ型を渡すなど、よくある落とし穴を回避します。

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. オートコンプリートとドキュメント: 最新のエディター (VS Code など) は、入力時に豊富なオートコンプリートの提案とドキュメントを提供します。

2. コードのスケーラビリティ: TypeScript の機能は、一貫性を維持することが重要な大規(guī)模プロジェクトで威力を発揮します。

3. チーム コラボレーションの向上: 明確なタイプにより、チーム メンバーが一目でコードを理解しやすくなります。

TypeScript は、より大規(guī)模なアプリを計畫する場合に特に役立つことがわかりました。どのような種類のデータを扱うのか、関數(shù)がどのようなデータを取得/返すのかを理解します。

前提條件

本題に入る前に、JavaScript の基本的な知識があることを確認(rèn)してください。以下についてよく知っておく必要があります:

• 変數(shù)とデータ型 (let、const、string、number など)
• 機能
• 配列とオブジェクト

まだ自信がない場合は、JavaScript の基本を復(fù)習(xí)してください。

---

2. 環(huán)境のセットアップ

TypeScript のインストール

TypeScript は、使用を開始するためにインストールが必要なツールです。わずか數(shù)ステップで、TypeScript でコーディングを開始できる環(huán)境を準(zhǔn)備できます。その方法は次のとおりです:

TypeScript の使用を開始するには、Node.js をインストールする必要があります。それを入手したら:

1. TypeScript をグローバルにインストールします。

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. インストールを確認(rèn)します:

   npm install -g typescript

VS コードのセットアップ

VS Code は、TypeScript 開発で最も人気のあるエディターの 1 つです。コーディングをより簡単かつ効率的にするためのさまざまな機能と拡張機能が提供されます。設(shè)定してみましょう:

VS Code は、TypeScript 開発者にとって頼りになるエディターです。設(shè)定方法は次のとおりです:

1. VS Code のインストール: ここからダウンロードします
2. 次の便利な拡張機能を追加します。
   • ESLint: TypeScript コードの lint チェック用。
   • よりきれい: 一貫したコードの書式設(shè)定用。
   • TypeScript Hero: 生産性の向上のため。

初めての TypeScript プロジェクトの作成

TypeScript を?qū)Wぶ最良の方法は、実踐してみることです。このセクションでは、ファイルの作成からコードの実行まで、最初のプロジェクトのセットアップについて説明します。

1. プロジェクト用に新しいフォルダーを作成し、そのフォルダーに移動します。

   tsc --version

1. 新しいプロジェクトを初期化します。

   mkdir typescript-starter
   cd typescript-starter

1. TypeScript を追加:

   npm init -y

1. tsconfig.json ファイルを作成します。

   npm install --save-dev typescript

1. 最初の TypeScript ファイルを作成します。

   npx tsc --init

1. コンパイルして実行します:

   echo "console.log('Hello, TypeScript!');" > index.ts

これで、最初の TypeScript プログラムを作成してコンパイルしました!

---

3. 基本タイプの概要

TypeScript の威力はその型システムにあります。いくつかの基本的なタイプを見てみましょう:

プリミティブ型

プリミティブ型は、TypeScript の型システムの構(gòu)成要素です。これらには、文字列、數(shù)値、ブール値などの基本的なデータ型が含まれます。使用方法を簡単に説明します:

1. 文字列:

   npx tsc index.ts
   node index.js

1. 番號:

   let name: string = "Alice";

1. ブール値:

   let age: number = 25;

高度なタイプ

TypeScript は、プリミティブに加えて、配列、タプル、any や不明などの特殊な型などのより複雑な型をサポートしています。これらのタイプにより、安全性を維持しながらコードが柔軟になります。

1. 配列:

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. タプル:

   npm install -g typescript

1. 任意 (慎重に使用してください):

   tsc --version

1. 不明 (どれよりも安全):

   mkdir typescript-starter
   cd typescript-starter

1. void (何も返さない関數(shù)):

   npm init -y

1. null および未定義:

   npm install --save-dev typescript

---

4. 型アノテーションを使用した最初のステップ

TypeScript の型注釈を使用すると、開発者は変數(shù)、パラメーター、または関數(shù)の戻り値の型を指定できます。これにより、コードが定義された構(gòu)造に確実に準(zhǔn)拠し、開発中のエラーを見つけやすくなり、プロジェクト全體で一貫性を維持できます。

通常どおりコードを作成する際に、統(tǒng)合できる以下の機能に注意してください

基本的な変數(shù)の型付け

変數(shù)が常に正しいものに設(shè)定されるように、変數(shù)の型を設(shè)定し、アプリの殘りの部分が変數(shù)の內(nèi)容を理解できるようにします。

   npx tsc --init

関數(shù)パラメータの入力

同様に、関數(shù)の場合、引數(shù)の型を定義したり、戻り値の型を定義したりできます。

   echo "console.log('Hello, TypeScript!');" > index.ts

戻り値の型の注釈

   npx tsc index.ts
   node index.js

実踐例: ユーザープロファイル

TypeScript を使用すると、獨自の型を宣言してコードをより適切に構(gòu)造化し、ルールを適用できます。型またはインターフェイスを使用すると、オブジェクト、関數(shù)、さらには共用體のカスタム型を定義できます。これにより、コードがより堅牢になるだけでなく、大規(guī)模なプロジェクトでの読みやすさと一貫性も向上します。

   let name: string = "Alice";

---

5. インターフェースのクイックスタート

基本的な構(gòu)文

TypeScript のインターフェイスはオブジェクトの構(gòu)造を定義し、オブジェクトが特定のプロパティと型を持つようにします。このセクションでは、それらを作成して使用する方法を説明します:

   let age: number = 25;

オプションのプロパティ

オブジェクト內(nèi)のすべてのプロパティが必要なわけではない場合があります。 TypeScript を使用すると、インターフェイスでオプションのプロパティを定義して、このようなケースを適切に処理できます。

   let isStudent: boolean = true;

読み取り専用プロパティ

読み取り専用プロパティは、特定の値を設(shè)定後に変更できないようにしたい場合に便利です。インターフェースでそれらを使用する方法は次のとおりです:

   let scores: number[] = [90, 85, 88];

実際の例: API レスポンス

インターフェイスを使用して API 応答を入力すると、サーバーからのデータを安全かつ効果的に処理できます。実際の例を次に示します:

   let user: [string, number] = ["Alice", 25];

---

6. 実踐プロジェクト: シンプルな ToDo リストの作成

TypeScript をマスターするには練習(xí)が鍵です。このプロジェクトでは、これまでに學(xué)習(xí)した機能を活用するシンプルな ToDo リスト アプリケーションを作成します。

1. Todo タイプを作成します。

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Todo の単純な配列を作成します。

   npm install -g typescript

1. Todo を追加し、Todo を完了としてマークするための関數(shù)をいくつか追加します。

   tsc --version

---

7. 次のステップ

今回はここまでです。このチュートリアルを楽しんでいただければ幸いです。私は、TypeScript の便利な機能とユースケースをさらに深く掘り下げる追加のチュートリアルに取り組む予定です。

• 次回の予定: TypeScript 関數(shù)と高度な型について詳しく説明します。
• リソース:
  • TypeScript ドキュメント
  • オンラインで TypeScript を練習(xí)するための CodeSandbox。
• チャレンジ: ブログ投稿の TypeScript インターフェイスを作成し、それを使用してブログ投稿のリストの型チェックを行います。

また次回お會いしましょう！

以上がTypeScript の基礎(chǔ): 初心者ガイド (?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。