TypeScriptのインターフェース徹底ガイド

TypeScriptを使いこなす上で欠かせない「インターフェース」について、その概念から具体的な利用方法までを解説します。

本記事では、初心者から上級者までが理解しやすいように、インターフェースの基本的な定義から、より複雑な使用例に至るまでを詳しく説明します。

インターフェースとは

インターフェースは、TypeScriptでオブジェクトの型を定義するための強力なツールです。

クラスと同様に、プロパティやメソッドの形を定義することができますが、インターフェース自体はインスタンス化できません。

基本的なインターフェースの定義

まずは、最も基本的なインターフェースの定義から見ていきましょう。

インターフェースの基本形

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

interface User {

age: number;

}

上記のコードでは、Userというインターフェースを定義しています。

これにより、User型のオブジェクトはnameとageの二つのプロパティを持つ必要があります。

オプショナルプロパティ

すべてのプロパティが必須ではない場合、プロパティ名の後に「?」を付けることでオプショナルプロパティとして定義できます。

オプショナルプロパティの例

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

interface User {

age?: number;

}

このインターフェース定義により、ageプロパティは省略可能となります。この柔軟性により、さまざまな状況に対応するデータ構造を設計できます。

関数型のインターフェース

インターフェースを使用して関数の型を定義することも可能です。これにより、特定の関数が特定の引数と戻り値を持つことを保証できます。

関数型のインターフェース例

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

interface SearchFunc {

(source: string, subString: string): boolean;

}

let mySearch: SearchFunc;

mySearch = function(source: string, subString: string) {

return source.search(subString) !== -1;

}

 出力結果
trueまたはfalse

上記のコードでは、mySearch関数がSearchFuncインターフェースの要件を満たしていることを確認できます。これにより、関数の使用がより安全になります。

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、TypeScriptの世界が変わる

インターフェースの拡張

TypeScriptのインターフェースは他のインターフェースを拡張することができます。

これにより、複数のインターフェースを組み合わせて、より複雑な型を構築することが可能になります。

インターフェースの拡張例

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = {};
square.color = "blue";
square.sideLength = 10;

interface Shape {

color: string;

}

interface Square extends Shape {

sideLength: number;

}

let square = {};

square.color = "blue";

square.sideLength = 10;

 出力結果
{ color: "blue", sideLength: 10 }

このようにインターフェースを活用することで、TypeScriptプログラミングの柔軟性と安全性を大幅に向上させることができます。

インターフェースの取得方法

インターフェースを使用してオブジェクトからデータを取得する基本的な方法を見てみましょう。

インターフェースを使ったデータ取得

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

function getPerson(person: Person) {
    return "Name: " + person.name + ", Age: " + person.age;
}

const person = { name: "Taro", age: 25 };
console.log(getPerson(person));

interface Person {

age: number;

}

function getPerson(person: Person) {

return "Name: " + person.name + ", Age: " + person.age;

}

const person = { name: "Taro", age: 25 };

console.log(getPerson(person));

 出力結果
Name: Taro, Age: 25

この例では、Personインターフェースを定義し、このインターフェースに基づいて個人の情報を取得しています。

ループを使用したインターフェースの取得方法

複数のオブジェクトが配列に格納されている場合、ループを使用して各オブジェクトのデータを取得する方法です。

ループを使用したデータ取得

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

const people: Person[] = [
    { name: "Taro", age: 25 },
    { name: "Hanako", age: 22 }
];

people.forEach(person => {
    console.log(getPerson(person));
});

interface Person {

age: number;

}

const people: Person[] = [

{ name: "Taro", age: 25 },

{ name: "Hanako", age: 22 }

];

people.forEach(person => {

console.log(getPerson(person));

});

 出力結果
Name: Taro, Age: 25
Name: Hanako, Age: 22

このコードは、Personインターフェースを実装したオブジェクトの配列をループ処理しています。

配列とインターフェースの組み合わせ

インターフェースを使用して、特定の型を持つオブジェクトの配列を作成する方法を見ていきます。

インターフェースと配列の組み合わせ

interface Car {
    make: string;
    model: string;
    year: number;
}

const cars: Car[] = [
    { make: "Toyota", model: "Corolla", year: 2005 },
    { make: "Honda", model: "Accord", year: 2008 }
];

// カーオブジェクトの配列を処理するロジック
cars.forEach(car => {
    console.log(car.make + " " + car.model + " (" + car.year + ")");
});

interface Car {

make: string;

model: string;

year: number;

}

const cars: Car[] = [

{ make: "Toyota", model: "Corolla", year: 2005 },

{ make: "Honda", model: "Accord", year: 2008 }

];

// カーオブジェクトの配列を処理するロジック

cars.forEach(car => {

console.log(car.make + " " + car.model + " (" + car.year + ")");

});

 出力結果
Toyota Corolla (2005)
Honda Accord (2008)

このコードでは、Carインターフェースを使用して車のオブジェクトの配列を管理しています。

連想配列とインターフェースの組み合わせ

インターフェースを使用して、キーと値のペアを持つ連想配列を定義する方法です。

連想配列とインターフェースの組み合わせ

interface Dictionary {
    [key: string]: string;
}

const colors: Dictionary = {
    red: "赤",
    green: "緑",
    blue: "青"
};

console.log(colors.red); // 赤
console.log(colors.green); // 緑
console.log(colors.blue); // 青

interface Dictionary {

[key: string]: string;

}

const colors: Dictionary = {

red: "赤",

green: "緑",

blue: "青"

};

console.log(colors.red); // 赤

console.log(colors.green); // 緑

console.log(colors.blue); // 青

 出力結果
赤
緑
青

この例では、Dictionaryインターフェースを使用して、色の名前を日本語訳と対応させた連想配列を作成しています。

まとめ

今回はTypeScriptのインターフェースについて、その基本から応用的な使用方法まで詳しく解説しました。インターフェースを正しく使いこなすことで、より安全で保守が容易なコードを書くことができるようになります。

最後まで読んで頂き、ありがとうございました。少しでもお役に立てたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【TypeScript】インターフェースの使い方（定義、取得、ループ）を徹底解説！

TypeScriptのインターフェース徹底ガイド

インターフェースとは

基本的なインターフェースの定義

オプショナルプロパティ

関数型のインターフェース

インターフェースの拡張

インターフェースの取得方法

ループを使用したインターフェースの取得方法

配列とインターフェースの組み合わせ

連想配列とインターフェースの組み合わせ

まとめ

Ads Blocker Detected!!!