TypeScriptのインターフェイスの概要

投稿日: 2022-04-20 2022-10-07
タグ: TypeScript

TypeScriptは、値のきめ細かい型チェックを定義できるようにすることで、値との契約を維持するのに役立ちます。インターフェイスは、それを実現するためのTypeScriptの主要なメカニズムです。

たとえば、2人のユーザーを定義する次のコードがあるとします。

const user1 = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: '[email protected]'
}

const user2 = {
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: '[email protected]'
}

ユーザーオブジェクトが指定された型定義を尊重するようにコントラクトを確立しましょう。

interface User {
  id: number;
  firstName: string;
  lastName: string;
  proUser: boolean;
  email: string;
}

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: '[email protected]'
}

const user2: User = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: '[email protected]'
}

ここで、プロパティが欠落している、追加のプロパティがある、または間違ったタイプのプロパティを持つ User オブジェクトを定義しようとすると、TypeScriptコンパイラは文句を言い、ユーザー定義の何が問題なのかを正確に教えてくれます。

エルビス演算子（？）を使用して、インターフェイスにオプションのプロパティを定義できます。

interface User {
  id: number;
  firstName: string;
  lastName: string;
  proUser: boolean;
  email: string;
  avatar?: string;
}

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: '[email protected]'
}

const user2: User = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: '[email protected]',
  avatar: 'https://something/my-face.jpg'
}

user1 にアバター値を指定する必要がなく、TypeScriptが文句を言わないことに注意してください。

インターフェイスは独自のファイルで定義してから、ES6モジュール構文でインポートできます。

import { User } from '../interfaces/user';

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: '[email protected]'
}

// ...

getdocs

13036