chap.3 Interface

インタフェースとは?

インタフェースとは、相互に定義された約束またはルールを指します.タイプスクリプトのインタフェースでは、通常、次のカテゴリの規則を定義できます.

オブジェクトの仕様(属性と属性のタイプ)

関数のパラメータ

関数のspec(パラメータ、戻りタイプなど)

配列とオブジェクトへのアクセス方法

クラス

使用方法

インタフェースはインターネットというキーワードで定義できます.
TVというインタフェースを作成します.このインタフェースはタイプを定義することができます.
tvは狙いとオフの機能がありますよね?
インタフェースとして表示する場合は、次のように表示できます.

interface TV {
  turnOn();
  turnOff();
}

次に、新しいmyTVを作成したとします.
そのテレビにも電源を入れる機能と電源を切る機能があるので、上のテレビのインタフェースをそのまま持っていきます.

このようにmytvのタイプをTVに指定すると自動で完璧!サポートされているものを確認できます.
今もう一度見てください.interfaceページを見ると、赤い線が次のように見えます.

なぜなら、turnOn()、turnOff()のデフォルトの戻りタイプが指定されていないからです.
インタフェースで定義したアトリビュートを使用しない場合(上記のように)、問題はありません.逆に、オブジェクトにアトリビュートを追加しても問題はありません.
つまり,属性数が増えても構わないし,属性の順序を守らなくても構わない.

戻り値の設定

インタフェースで指定したメソッドの戻り値は、次のように指定できます.

interface TV {
  turnOn(): boolean;
  turnOff(): void;  //반환값이 없다면 void입니다. 
}

turnOnの戻り値はboolean値として指定されているため、mytvも戻り値をboolean値に設定する必要があります.

const myTv: TV = {
  turnOn() {
    return true;
  },
  turnOff() {},
};

インタフェースでは、インプリメンテーションは独立しており、いくつかの動作を実行することのみを記述(定義)する.Javaのインタフェースみたいでしょ?

なぜインタフェースを使うのですか?

インタフェースの利点は次のとおりです.
テレビを開く関数tryTurnOnを作成し、変数tvを追加したとします.

function tryTurnOn(tv:TV){

}

でも、今はまだ関数を使う前なので、何かtvが入ってくるのか分からないでしょう?
次に、列挙変数としてTVというインタフェースのtvを示す.自動補完はIDEで以下の方法でサポートできます.

タイプスクリプトのインタフェース

従来のOOPのインタフェース(javaなど)は上記のインタフェースを定義していますが、typescriptは以下のインタフェースを定義することもできます.
横行、列、馬の板があります.

interface Cell {
  row: number;
  col: number;
  piece: Piece;
}

馬はPieceというインタフェースタイプで、Pieceインタフェースは馬の移動機能を定義しています.

interface Cell {
  row: number;
  col: number;
  piece: Piece;
}

interface Piece {
  move(from: Cell, to: Cell): boolean;
}

これなら大体どんな機能なのか分かるでしょう.
その上で、4 x 3形式のボードを作ります!

function createBoard() {
  const cells: Cell[] = [];
  for (let row = 0; row < 4; row++) {
    for (let col = 0; col < 3; col++) {
      cells.push({
        row: row,
        col: col,
			//보드판에는 말이 없을 수도 있습니다.
      });
    }
  }
	return cells;
}

黒板の上で話をしないかもしれませんが、インタフェースの上で必ず1つ置くと言っています.

オプション値は存在しない可能性があります。

この場合、?を使用してインタフェースを変更できます.

interface Cell {
  row: number;
  col: number;
  piece?: Piece;
}

?貼り付け後、属性を選択できます.

readonly(読み取り専用)

readonlyを前にしてプロパティを定義すると、プロパティの最初の作成時に値を割り当てることができず、後で値を変更できます.

interface CraftBeer {
  readonly brand: string;
}

読み取り専用スキーマ

アレイを宣言する場合は、ReadonlyArrayタイプを使用して読み取り専用アレイを作成できます.

let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error
arr = [10, 20, 30]; // error

前述したように配列をReadonlyArrayと宣言した場合、配列の内容は変更できません.宣言時にのみ値を定義できることに注意してください.
インタフェースはコンパイル時にJSに変換されて消滅するため,大量のインタフェースを記述してもコードが長すぎることはない.
強力なコードを書きましょう.

インタフェースの使用コストの例

interface SignUp {
  email: string;
  id: string;
  password: string;
}

function signUpRequest(data:SignUp){
    
}

これでSignUpで必要なデータを記述し、会員加入申請時に受け取ったパラメータにタイプを指定して入れることができますよね?
以下の自動補完機能はdomです!

+追加

関数のインタフェース

関数でパラメータのタイプと戻り値を定義する場合は、インタフェースも使用できます.

interface login {
  (username: string, password: string): boolean;
}

下に使ってもいいですよね?

let loginUser: login;
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

クラス内のインタフェース

Javaのようにタイプスクリプトでタイプルールを定義し、クラスが一定の条件を満たすことができます.

interface CraftBeer {
  beerName: string;
  nameBeer(beer: string): void;
}

class myBeer implements CraftBeer {
  beerName: string = 'Baby Guinness';
  nameBeer(b: string) {
    this.beerName = b;
  }
  constructor() {}
}

拡張インタフェース

クラスと同様に、インタフェースも拡張されます.

interface Person {
name: string;
}
interface Developer extends Person {
skill: string;
}
let frontEnd = {} as Developer;

この場合frontEndはnameとskillの属性を同時に持つのではないでしょうか.

ブレンドタイプ

JavaScriptの柔軟でダイナミックなタイププロパティに基づいて、さまざまなタイプのコンビネーションインタフェースを作成することもできます.たとえば、オブジェクトタイプを定義できますが、関数タイプです.

interface CraftBeer {
  (beer: string): string;
  brand: string;
  brew(): void;
}

function myBeer(): CraftBeer {
  let my = (function(beer: string) {}) as CraftBeer;
  my.brand = 'Beer Kitchen';
  my.brew = function() {};
  return my;
}

その他のセクションは、インタフェース|タイプスクリプトマニュアルを参照してください.