TypeScript の基礎: 初心者ガイド (✅

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

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

1. はじめに

TypeScriptとは何ですか?

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

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

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

TypeScript を使用する理由

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

実際のメリット:

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

   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 の機能は、一貫性を維持することが重要な大規模プロジェクトで威力を発揮します。

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

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

前提条件

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

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

まだ自信がない場合は、JavaScript の基本を復習してください。

---

2. 環境のセットアップ

TypeScript のインストール

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

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. インストールを確認します:

   npm install -g typescript

VS コードのセットアップ

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

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

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

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

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

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 の型システムの構成要素です。これらには、文字列、数値、ブール値などの基本的なデータ型が含まれます。使用方法を簡単に説明します:

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 (何も返さない関数):

   npm init -y

1. null および未定義:

   npm install --save-dev typescript

---

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

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

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

基本的な変数の型付け

変数が常に正しいものに設定されるように、変数の型を設定し、アプリの残りの部分が変数の内容を理解できるようにします。

   npx tsc --init

関数パラメータの入力

同様に、関数の場合、引数の型を定義したり、戻り値の型を定義したりできます。

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

戻り値の型の注釈

   npx tsc index.ts
   node index.js

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

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

   let name: string = "Alice";

---

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

基本的な構文

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

   let age: number = 25;

オプションのプロパティ

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

   let isStudent: boolean = true;

読み取り専用プロパティ

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

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

実際の例: API レスポンス

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

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

---

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

TypeScript をマスターするには練習が鍵です。このプロジェクトでは、これまでに学習した機能を活用するシンプルな 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 を完了としてマークするための関数をいくつか追加します。

   tsc --version

---

7. 次のステップ

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

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

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

以上がTypeScript の基礎: 初心者ガイド (✅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。