ホームページ ウェブフロントエンド jsチュートリアル インターフェイスではなくタイプを選択する理由

インターフェイスではなくタイプを選択する理由

Aug 05, 2024 pm 07:03 PM

Why to Choose Types Instead of Interfaces

TypeScript では、オブジェクトの型を定義するために型とインターフェイスの両方が使用されます。ただし、用途や機能は異なります。どちらも、開発者がコードを記述するときに変数とオブジェクトの型を制限するのに役立ち、それによってエラーが減り、コードの読みやすさが向上します。

では、なぜ型を使うのでしょうか?これについて話し合いましょう。

種類

TypeScript では、型を使用してデータの形状を定義できます。柔軟性があり、結合や交差などの作成に使用できます。

type User = {
  name: string;
  age: number;
};

type Admin = User & {
  isAdmin: boolean;
};
ログイン後にコピー

インターフェース

インターフェイスは、オブジェクトの形状を定義するもう 1 つの方法です。これは型よりも厳密であり、主にオブジェクトの形状とクラス コントラクトを定義するために使用されます。

interface User {
  name: string;
  age: number;
}

interface Admin extends User {
  isAdmin: boolean;
}
ログイン後にコピー

私がタイプを好む理由

  • ユニオン

共用体タイプでは、複数のタイプのうちの 1 つとなるタイプを定義できます。これは、関数のパラメーターと戻り値の型に便利です。ここで、ID は文字列または数値のいずれかであり、共用体型の威力を示しています。

type ID = string | number;

function getUserId(id: ID): string {
  return `User ID: ${id}`;
}
ログイン後にコピー
  • 文字列リテラル

リテラル型を使用すると、変数が取り得る正確な値を指定できます。これは、定数や構成オプションを定義する場合に非常に役立ちます。

type Direction = 'north' | 'south' | 'east' | 'west';

function move(direction: Direction) {
  console.log(`Moving ${direction}`);
}

move('north');
ログイン後にコピー
  • 条件型

タイプを使用すると、条件付きタイプの作成が可能になり、条件に基づいてタイプを選択できるようになります

type Check<T> = T extends string ? string : number;

let result1: Check<string>; // result1 is of type string
let result2: Check<number>; // result2 is of type number
ログイン後にコピー
  • 交差点

交差タイプを使用すると、複数のタイプを 1 つに結合できます。これは、複雑なタイプの合成を作成する場合に特に便利です。

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: number;
};

type EmployeeDetails = Person & Employee;

const employee: EmployeeDetails = {
  name: 'Dev',
  age: 30,
  employeeId: 12345,
};
ログイン後にコピー

タイプとインターフェイスのどちらを選択するかは、最終的には特定の使用例と個人的な好みによって決まります。ただし、それぞれの長所を理解すると、より多くの情報に基づいた意思決定を行い、より優れた TypeScript コードを作成するのに役立ちます。

以上がインターフェイスではなくタイプを選択する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles