TypeScriptチートシート３（ interface）


<h1>interface</h1>
オブジェクトのみのタイプエイリアス
オブジェクトのみにしか使わないのでわかりやすい（絶対にオブジェクトを示していることがわかる）

<h2>基本</h2>
オブジェクトにしか使えない

```typescript
interface Human {
  name: string;
  age: number;
}

const human: Human = {
  name: 'masaki',
  age: 28,
};
```

<h2>オブジェクトの配列</h2>
3パターン書いたが、すべて同じオブジェクトの配列を表す

```typescript
export interface IState {
  people: {
    name: string;
    age: number;
    img: string;
    note?: string;
  }[];
}

const humans: IState['people'] = [
  {
    name: 'LeBron James',
    age: 35,
    img: 'https://cdn.nba.com/headshots/nba/latest/1040x760/2544.png',
    note: 'Allegeric to staying on the same team',
  },
  {
    name: 'Kobe Bryant',
    age: 42,
    img: 'https://fullpresscoverage.com/wp-content/uploads/2020/01/101524695-457220551.jpg',
  },
];
```

```typescript
interface people {
  name: string;
  age: number;
  img: string;
  note?: string;
}

const humans: people[] = [
  {
    name: 'LeBron James',
    age: 35,
    img: 'https://cdn.nba.com/headshots/nba/latest/1040x760/2544.png',
    note: 'Allegeric to staying on the same team',
  },
  {
    name: 'Kobe Bryant',
    age: 42,
    img: 'https://fullpresscoverage.com/wp-content/uploads/2020/01/101524695-457220551.jpg',
  },
];
```

```typescript
interface people {
  name: string;
  age: number;
  img: string;
  note?: string;
}

const humans: Array<people> = [
  {
    name: 'LeBron James',
    age: 35,
    img: 'https://cdn.nba.com/headshots/nba/latest/1040x760/2544.png',
    note: 'Allegeric to staying on the same team',
  },
  {
    name: 'Kobe Bryant',
    age: 42,
    img: 'https://fullpresscoverage.com/wp-content/uploads/2020/01/101524695-457220551.jpg',
  },
];
```

<h2>メソッドに適応</h2>

```typescript
interface Human {
  name: string;
  age: number;
  greeting(message: string): void;
}

const human: Human = {
  name: 'masaki',
  age: 28,
  greeting(message: string) {
    console.log(message);
  },
};
```

<h2>４：implements</h2>
インターフェースに存在するメンバーと同じ名前のメンバーが必ず存在している必要がある
Humanを満たしていないといけない

```typescript
interface Human {
  name: string;
  age: number;
  greeting(message: string): void;
}

class Developer implements Human {
  constructor(public name: string, public age: number) {}
  greeting(message: string) {
    console.log('hello');
  }
}
```

<h2>readonly</h2>
普通にかける
publicとprivateは書けない

```typescript
interface Human {
  readonly name: string;
  age: number;
  greeting(message: string): void;
}
```

<h2>interfaceを継承</h2>

```typescript
interface Nameable {
  name: string;
}

interface Human extends Nameable {
  age: number;
  greeting(message: string): void;
}

const human: Human = {
  name: 'masaki',
  age: 28,
  greeting(message: string) {
    console.log(message);
  },
};
```

<h2>？</h2>
あってもなくてもいい型

```typescript
interface Nameable {
  name: string;
  nickName?: string;
}

const hoge: Nameable = {
  name: 'masaki',
};
```

<h2>関数の部分型</h2>
(obj: MyObj2)=>void型の値を(obj: MyObj)=>void型の値として扱うことができる
逆にするとエラー

```typescript
interface MyObj {
  foo: string;
  bar: number;
}

interface MyObj2 {
  foo: string;
}

const a: (obj: MyObj2) => void = () => {};
const b: (obj: MyObj) => void = a;
```

引数に関しても同じことができる
引数を 1 つだけ受け取る関数は、引数を 2 つ受け取る関数として使うことが可能であるということ

```typescript
const f1: (foo: string) => void = () => {};
const f2: (foo: string, bar: number) => void = f1;
```

<h2></h2>

```typescript

```

<h2></h2>

```typescript

```