TypeScript - タイプ: 初心者ガイド

こんにちは、将来のプログラミングスーパースター！今日は、TypeScriptの类型の魅力あふれる世界に飛び込みます。これまでに一行もコードを書いたことがないとしても心配しないでください。このエキサイティングな旅でのあなたの親切なガイドとして、私はここにいます。このチュートリアルが終わるまでに、あなたがどれだけ学んだか驚かれることでしょう。それでは、始めましょう！

TypeScriptの类型とは？

深淵には飛び込む前に、まず类型とは何か、そしてなぜそれが重要かについて話しましょう。类型は、私たちがデータに貼るラベルと考えてください。クローゼットをシャツ、パンツ、靴の異なるセクションに整理するように、类型はコードを整理し、メタファー的にはソックスをシャツの引き出しに入れるのを防ぐ役割を果たします。

TypeScriptは、オプションの静的typingを追加したJavaScriptのスーパーセットです。これは、TypeScriptに私たちがどのようなデータを扱っているかを正確に伝えることができる意味で、コードが実行される前にエラーをキャッチする助け becomes. まるで、あなたの肩に乘った親切な友達が、間違ったことをする前に潜在的なミスを指摘してくれるようなものです。

任何类型: TypeScriptのワイルドカード

TypeScriptで最も柔軟な类型から始めましょう：any。これはトランプのジョーカーのように、何にでもなれます！

let myVariable: any = 42;
myVariable = "Hello, World!";
myVariable = true;

この例では、myVariableは数値、文字列、ブール値のいずれでもできます。非常に柔軟ですが、力には責任が伴います。anyを頻繁に使うとTypeScriptの目的を台無くすので、控えめに使ってください！

ビルトイン类型: TypeScriptの基本構成要素

TypeScriptには、私たちのほとんどのニーズをカバーするいくつかのビルトイン类型があります。それ们を一つずつ見ていきましょう：

1. 数値

let age: number = 30;
let price: number = 9.99;

TypeScriptの数値は整数でも浮動小数点値でもできます。他の言語のように異なる数値の类型を心配する必要はありません！

2. 文字列

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

文字列は单引用符、双引用符、バッククォートのいずれで定義できます。バッククォートを使うと、${}を使って式を埋め込むことができます。

3. ブール

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

ブール値はシンプルで、trueかfalseのいずれかです。コードの「はい/いいえ」の質問と考えます。

4. 配列

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

配列は同じ类型の複数の値を保持できます。角括弧を使ったり、Array<T>の構文を使ったりして定義できます。

5. タプル

let person: [string, number] = ["Alice", 30];

タプルは固定長の要素を持つ配列で、各要素は異なる类型を持つことができます。それは、各アイテムに特定の区画がある小さな、整理された箱のようです。

6. 種別

enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;

種別は名前付き定数のセットを定義するためのものです。固定されたオプションを表現するのに適しています。

7. ヴォイド

function logMessage(message: string): void {
console.log(message);
}

ヴォイドは関数が何も返さないことを示すために使われます。手紙を送るが返信を期待しないようなものです。

8. ヌルと未定義

let notDefined: undefined = undefined;
let empty: null = null;

これらの类型は値が存在しないことを表します。箱が故意に空（null）またはまだ埋められていない（undefined）のようです。

以下に、私たちがカバーしたビルトイン类型のまとめ表を示します：

类型	説明	例
number	数値（整数または浮動小数点）	let age: number = 30;
string	テキストデータ	let name: string = "Alice";
boolean	trueまたはfalseの値	let isStudent: boolean = true;
array	同じ类型の値のコレクション	let numbers: number[] = [1, 2, 3];
tuple	指定された类型の固定長配列	let person: [string, number] = ["Alice", 30];
enum	名前付き定数のセット	enum Color { Red, Green, Blue }
void	関数が何も返さない	function logMessage(message: string): void { ... }
null	任意のオブジェクト値の不在	let empty: null = null;
undefined	値が割り当てられていない変数	let notDefined: undefined = undefined;

ユーザー定義类型: 自分だけのツールを作成する

ビルトイン类型をカバーした現在、カスタム类型を作成する方法について話しましょう。これはTypeScriptが本当に輝く部分です！

1. インターフェース

インターフェースはオブジェクトの構造を定義します。これはオブジェクトの青写真のようなものです。

interface Person {
name: string;
age: number;
greet(): void;
}

let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

この例では、Personインターフェースを定義し、この構造に従ったオブジェクトを作成しています。これは、人々が同じ情報を提供する必要があるフォームを作成するようなものです。

2. クラス

クラスは再利用可能なコンポーネントを作成する方法です。これは、クッキーカッターのように、一度形を決めてからいくつでもクッキー（オブジェクト）を作れるものです。

class Student {
name: string;
grade: number;

constructor(name: string, grade: number) {
this.name = name;
this.grade = grade;
}

study() {
console.log(`${this.name} is studying hard!`);
}
}

let bob = new Student("Bob", 10);
bob.study(); // 出力: "Bob is studying hard!"

ここでは、Studentクラスを作成し、プロパティ（nameとgrade）とメソッド（study）を持たせています。このクラスを使っていくつも学生を作成できます。

3. タイプエイリアス

类型エイリアスは新しい名前を类型に与えるものです。複雑な类型を作成したり、既存の类型により意味のある名前を与えたりするのに便利です。

type Point = {
x: number;
y: number;
};

let center: Point = { x: 0, y: 0 };

この例では、2D空間内の点を表すPoint类型を作成しています。関連するプロパティをグループ化するシンプルな方法です。

4. ユニオン类型

ユニオン类型は、値が複数の类型のいずれかを持つことができます。これは、「これはこのかあれのどちらか」と言うようなものです。

type Result = number | string;

function getResult(value: boolean): Result {
return value ? "Success" : 404;
}

ここで、Resultは数値または文字列のいずれか olabilir. 条件に応じて値が異なる場合にこれは便利です。

5. インターセクション类型

インターセクション类型は、複数の类型を一つの类型に結合します。これは、「これはこれであり、そしてあれである」と言うようなものです。

interface Colorful {
color: string;
}

interface Circle {
radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
color: "red",
radius: 5
};

この例では、ColorfulCircleはColorfulであり、Circleでもあります。それは、colorとradiusの両方を持つ必要があります。

そして、それで終わりです！TypeScriptの类型の基本をカバーしました。anyからビルトイン类型、ユーザー定義类型に至るまで。TypeScriptの类型は、あなたのコードをよりクリーンで信頼性の高いものにし、エラーを問題になる前にキャッチする助け becomes.

あなたがTypeScriptの旅を続ける中で、これらの类型をさまざまな方法で試してみてください。異なる方法で組み合わせて、間違ったことを恐れずに失敗してみてください。それで学びます！間もなく、あなたはプロのようにタイピングし、強力なコードを作成するようになるでしょう。

ハッピーコーディング、そしてあなたの类型が常に強力であることを祈っています！

Credits: Image by storyset