技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

TypeScriptのInterfaceについて

TypeScriptのInterfaceについて

interfaceは、オブジェクト・関数・クラスの構造を決めるためのもの。

サンプルコード

// 関数の型を定義することも可能
interface addFunc {
  (num1: number, num2: number): number;
}
let addFunc: addFunc;
addFunc = (n1: number, n2: number) => {
  return n1 + n2;
}
interface Nameable {
  //nullableな値には?をつける
  name?: string;
  nickName?: string;
}
const nameable: Nameable = {
  name: 'Quill',
  nickName: 'Quilla'
}
// interfaceを継承する場合はextendsを利用する(Nameableを継承する)
// extendsを使うとinterfaceからinterfaceへ継承できます。
interface Human extends Nameable {
  age: number;
  greeting(message: string): void;
}

// implementsを使用すれば、クラスに対してinterfaceの条件適用が可能になる
class Developer implements Human {
  // constructor メソッドは、 class で作成されたオブジェクトの生成と初期化のための特殊なメソッド
  constructor(public age: number, public experience: number, public name?: string) {
  }
  greeting(message: string) {
    console.log(message);
  }
}

const user: Human = new Developer(38, 3);

const tmpDeveloper = {
  name: 'Quill',
  age: 38,
  experience: 3,
  greeting(message: string) {
    console.log(message);
  }
}

if (user.name) {
  user.name.toUpperCase()
}
console.log(user.name);

参考

Typescriptのinterfaceの使い方 - Qiita

インターフェース - TypeScript Deep Dive 日本語版