ホームページ > ウェブフロントエンド > jsチュートリアル > TypeScript の和集合型と交差型

TypeScript の和集合型と交差型

DDD
リリース: 2025-01-06 08:07:44
オリジナル
791 人が閲覧しました

TypeScript の和集合型と交差型

導入

JavaScript の厳密に型指定されたスーパーセットである TypeScript は、JavaScript 開発に堅牢な型チェック機能をもたらします。これらの機能は、開発者がエラーを早期に発見し、より保守しやすいコードを作成するのに役立ちます。 TypeScript の強力な機能には、Union TypesIntersection Types があります。これらの型は、複雑な型を定義する際の柔軟性と精度を提供します。これは、大規模なアプリケーションにとって非常に重要です。

この記事の目的は、TypeScript の共用体型と交差型の概念を説明することです。これらの型を組み合わせて、より表現力豊かな型定義を作成する方法を説明する例に進みます。この記事を読み終えるまでに、TypeScript プロジェクトでこれらの型を効果的に使用する方法をしっかりと理解できるはずです。

それでは、さっそく本題に入りましょう。

ケーススタディ

以下にこのミームがあります。

Union and Intersection Types in TypeScript

https://www.picturepunches.com/meme/317642

会話術には暗黙のルールがあります。女性に年齢を聞いてはいけない男性に給料を聞いてはいけない。しかし、賭け金を増やして、これをさらに興味深いものにしてみましょう。 3 番目のルールを想像してください。プログラマーに未完成のプロジェクトの数を決して尋ねない。秘密の中には、影にしておいた方がよいものもあります。年齢、収入、放棄された副業など、その答えには、聞く準備ができていないような話が含まれていることが多いからです。

OK、最初の 2 つの項目、男性と女性に焦点を当てましょう。

Dont ask 1 Dont ask 2 Should ask 1 Should ask 2
Man Salary Relationship Address Full name
Woman Age Weight Address Full name

TypeScript では、次のような型を作成できます:

type Person = {
    gender: 'man' | 'woman',
    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};
ログイン後にコピー

人物タイプに基づいてオブジェクトを作成する場合の問題

const person1: Person = {
    gender: 'man',
    dontAsk: 'weight',
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'salary',
};
ログイン後にコピー

上記の 2 つのオブジェクトはどちらも型エラーを表示しません。

この問題を解決するために Intersection タイプと Union タイプが登場しました。

ユニオンの種類

Union Type を使用すると、変数を複数の型のいずれかにすることができます。この例では:

{
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'size'
}
ログイン後にコピー

タイプ定義のこの部分では、人が次の 2 つの形状のいずれかになる可能性があると述べています。

  1. 性別が「男性」で、「給与」または「関係」のいずれかを問わないオブジェクト。
  2. 性別が「女性」であり、「体重」または「年齢」であることを尋ねないでください。

この柔軟性は、複数の形式をとる可能性のあるデータを扱うときに役立ちます。

交差点の種類

交差タイプ は、複数のタイプを 1 つに結合します。交差型の変数は、すべての構成要素型を満たさなければなりません。この例では:

& {
    address?: string,
    fullName: string
}
ログイン後にコピー

タイプ定義のこの部分では、人が以下を持たなければならないと述べています。

  • 文字列型のオプションのアドレス プロパティ。
  • 文字列型の必須の fullName プロパティ。

結合タイプと交差タイプの組み合わせ

完全な人物タイプは、和集合タイプと交差タイプの両方を組み合わせたものです:

type Person = ({
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'age'
}) & {
    address?: string,
    fullName: string
};
ログイン後にコピー

人物オブジェクトは、いずれかの共用体タイプと一致する必要があり、交差タイプで定義されたプロパティも含まれている必要があります。以下に有効な人物オブジェクトをいくつか示します:

const person1: Person = {
    gender: 'man',
    dontAsk: 'salary',
    fullName: 'John Doe'
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'weight',
    fullName: 'Jane Doe',
    address: '123 Main St'
};
ログイン後にコピー

person1 を年齢を尋ねずに定義すると、エラーが表示されます。 TypeScript のサポートが組み込まれている Visual Studio Code では、オブジェクトをホバーするとエラーが表示されます。

Union and Intersection Types in TypeScript

まとめ

TypeScript では、ユニオン型 により変数を複数の型の 1 つにすることができ、交差型 は複数の型を 1 つに結合します。これらの型を理解して使用することで、より柔軟で堅牢な TypeScript コードを作成できます。人物タイプの例は、これらの概念を組み合わせて複雑で正確なタイプ定義を作成する方法を示しています。

TypeScript を効果的に使用すると、コードの保守性が大幅に向上します。新しい開発者がチームに加わった場合、明確な型定義により、長い説明の必要性が軽減されます。チームはコードを解読する代わりに、プロジェクトのフローと目標について話し合うことに集中でき、生産性とコラボレーションが向上します。

以上がTypeScript の和集合型と交差型の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート