【TypeScriptハンズオン②】男もすなるTypeScriptといふものを、女もしてみむとてするなり ~自分だけの型を作ろう！~

# この記はなに

TypeScriptを実際に触りながらTypeScriptを説く記の**第２弾**です。
TypeScriptが **しょしんなる** 方や、TypeScriptを **いとをかし** と思っている*ひと*が対象です。

この記で、**こころよし**と思った方は、LGTM✨を**何卒よしなに願い申し上げ候**。

過去と未来👇
 1. [【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり](https://qiita.com/NOMURA_keibyou38/items/8cb285900291df83957a)
 2. 【TypeScriptハンズオン②】男もすなるTypeScriptといふものを、女もしてみむとてするなり ~自分だけの型を作ろう！~ `←この記`
 3. [【TypeScriptハンズオン③】 ~webアプリとして動かそう！~](https://qiita.com/NOMURA_keibyou38/items/12d5985bc9623cd4e8f1)

@ TypeScriptをインストールしていない*ひと*はこちら👇
　 [【画像で説明】シンプルにTypeScriptを導入して使う方法](https://qiita.com/NOMURA_keibyou38/items/2cbb5971cea1ef6e83f5)
@ TypeScriptを*いとをかし*と思った*ひと*はこちら👇
　[JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事](https://qiita.com/NOMURA_keibyou38/items/06a3218de3ff480ce9de)

# ハンズオン
✅ これ以降古語は出てきません。ご安心ください
✅ VSCodeを使います

### 型の作成（Interface）
TypeScriptは、変数や関数に型を明記することで、[開発者がハッピー](https://qiita.com/atukan0930/items/e7b2f9dc70b579467de6)🤪になります。
今回は自作の型を作って🛠、ハッピー🤪になっていきます。

自分だけの型を作るには、`interface`を使います。
自分だけの型とはどういうものなのでしょうか？

例として関数の引数に、以下のようなオブジェクトを受け取りたいとします。

```typescript
const kinotsurayuki = {
  bookName: "土佐日記",
  author: "紀貫之",
  year: 866,
}
```

このオブジェクトは、`bookName`がstring型, `author`がstring型, `year`がnumber型であることがわかります。
これを明示的に型を付けたい場合は、`interface`を使って`Book`型を作ります。

```typescript
interface Book {
  bookName: string;
  author: string;
  year: number;
}
```

`interface`は以下のように、作られています。

```typescript
interface 型名 {
  名: <型>;
  名: <型>;
  名: <型>;
}
```


この`Book`型は以下のように使います。型が一致しているので、TypeScriptのエラーはありません。

```typescript
const kinotsurayuki: Book = {
  bookName: "土佐日記",
  author: "紀貫之",
  year: 866,
}
```

一方で、`Book`型の構造に違反すると、以下のように怒られます。
この場合は、`author`ではなく、`headOffice`と記述してしまいました。

```typescript
const kinokuniya: Book = {
  bookName: "紀伊國屋書店",
  headOffice: "新宿", // タイプ '{bookName： string; headOffice： string; year： number; } 'はタイプ' Book 'に割り当てることはできません。
  year: 1927
}
```

実際にVSCodeで見ると、怒られていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/b308870f-dca4-d289-cb55-28bbe985cf5e.png)

この`Book`型は引数にも利用できます。

```typescript
const bookDetails = (details: Book) => {
  console.log(`${details.bookName}の著者は${details.author}で、生まれは${details.year}です。`);
}
```

予め型を定義しておくことで、使い回しが出来ます。
そのため、頻繁に使う型については用意しておくといいかもしれませんね！

### クラスの型の作成

クラスでも型定義を利用することが出来ます。

```typescript
class Book {
  bookInfo: string;
  constructor(public bookName: string, public author: string) {
    this.bookInfo = `${bookName}の作者は${author}です。`;
  }
}
```

このように予め、型を宣言しておくことで、型の違うものが入った時に気づくことが出来ます。
問題ない例は以下です。

```typescript
const introduce = new Book("土佐日記", "紀貫之");
console.log(introduce.bookInfo); // 土佐日記の作者は紀貫之です。
```

以下は、違反しているので、エラーが出てしまいます。

```typescript
const bookPreview = new Book(897, "紀貫之"); // タイプ 'number'の引数は、タイプ 'string'のパラメーターに割り当てることができません。
```

VSCodeでも見てみましょう！エラーが出ていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/3573b6bc-f7ba-2549-bda2-19e79a63f2aa.png)
このようにClassでも問題なく型が使えます！
Classで型安全にコードを書きたい方は是非ご利用ください！

# おわりに

今回は、自作の型について紹介しました。
開発する上で自作の型を作ることは頻繁にあるので、作れるようにしておくと良いとも思います。

Next: [【TypeScriptハンズオン③】 ~webアプリとして動かそう！~](https://qiita.com/NOMURA_keibyou38/items/12d5985bc9623cd4e8f1)

# 参考文献
- https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html#compiling-your-code
- https://qiita.com/atukan0930/items/e7b2f9dc70b579467de6