## はじめに
型定義では主にTypeとInterfaceが使われますが、どっちを使うのがいいのか、２つの違いについて調べたので書いていきます。

## 参考
サバイバルTypeScriptを参考にしたので、よければこちらもご覧ください。
[サバイバルTypeScript](https://typescriptbook.jp/reference/object-oriented/interface/interface-vs-type-alias)

## ２つの違いについて
まずは２つの違いについて書いていきます。
### Type(型エイリアス)
・継承不可(ただし、&を使えば似たようなことができる)
・継承による上書きができる。
・同名の型定義はできない。
・MappedTypesが使えない。


### Interface
・継承可能
・継承による上書きができない。
・同名の型が定義できる。
・MappedTypesが使えない。

### 継承について
Interfaceは以下のように、型エイリアスを継承できる。
![img](/mosaic-code.jpg)
しかし、Typeは継承ができないが、その代わりに&を使えば、似たようなものはできる。
![img](/mosaic-code.jpg)

### 継承による上書きについて
 継承時のパラメータの上書きは、Interfaceはできますが、Typeはできないです。

Interfaceの継承
![img](/mosaic-code.jpg)
Typeの継承
![img](/mosaic-code.jpg)

### 同名の型定義について
Interfaceは定義できますが、Typeはできません。

Interfaceは定義できますが、指定した型が違うとエラーになってしまいます.
エラーの理由は、最初はsameNameSameTypeIsAllowedの型をnumberに指定したのに、次に再定義したときはstring型で定義しているためです。
![img](/mosaic-code.jpg)
Typeは同名のものを定義した時点でエラーになります。
![img](/mosaic-code.jpg)

### MappedTypesについて
これについての説明は省きます。以下のページで詳しく説明されています。
https://typescriptbook.jp/reference/type-reuse/mapped-types

## 使い分けについて
これについては明確な正解はないそうです、、、
それぞれのメリット、デメリットを理解した上で
プロジェクトや所属するチームのルールに則るしかないようです。
個人的には、Typeのほうが安全かなと思っています。
理由としては、同名の定義ができないので、誤って同じ名前で宣言をしてしまってもエラーが出るので、バグに繋がることを防げるからです。



## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)

[cv:issue_marketplace_engineer]

## はじめに
型定義では主にTypeとInterfaceが使われますが、どっちを使うのがいいのか、２つの違いについて調べたので書いていきます。

## 参考
サバイバルTypeScriptを参考にしたので、よければこちらもご覧ください。
[サバイバルTypeScript](https://typescriptbook.jp/reference/object-oriented/interface/interface-vs-type-alias)

## ２つの違いについて
まずは２つの違いについて書いていきます。
### Type(型エイリアス)
・継承不可(ただし、&を使えば似たようなことができる)
・継承による上書きができる。
・同名の型定義はできない。
・MappedTypesが使えない。


### Interface
・継承可能
・継承による上書きができない。
・同名の型が定義できる。
・MappedTypesが使えない。

### 継承について
Interfaceは以下のように、型エイリアスを継承できる。
```
interface Animal {
  name: string;
}
type Creature = {
  dna: string;
};
interface Dog extends Animal, Creature {
  dogType: string;
}
```
しかし、Typeは継承ができないが、その代わりに&を使えば、似たようなものはできる。
```
type Animal = {
  name: string;
};
type Creature = {
  dna: string;
};
type Dog = Animal &
  Creature & {
    dogType: string;
  };
```

### 継承による上書きについて
 継承時のパラメータの上書きは、Interfaceはできますが、Typeはできないです。

Interfaceの継承
```
interface Animal {
  name: any;
  price: {
    yen: number;
  };
  legCount: number;
}
 
interface Dog extends Animal {
  name: string;
  price: {
    yen: number;
    dollar: number;
  };
}
 
// 最終的なDogの定義
// nameの型とpriceの中身が書き換えられ、dollerも追加されています。
interface Dog {
  name: string;
  price: {
    yen: number;
    dollar: number;
  };
  legCount: number;
}
```
Typeの継承
```
type Animal = {
  name: number;
  price: {
    yen: number;
    dollar: number;
  };
};
 
type Dog = Animal & {
  name: string;
  price: {
    yen: number;
    euro: number;
  };
};
 
// 最終的なDogの定義
type Dog = {
  name: never; // 同じ名前のパラメータを定義すると、never型になる。エラーにはならない。
  price: {
    yen: number;
    dollar: number;
    euro: number;
  };
};
```

### 同名の型定義について
Interfaceは定義できますが、Typeはできません。

Interfaceは定義できますが、指定した型が違うとエラーになってしまいます.
エラーの理由は、最初はsameNameSameTypeIsAllowedの型をnumberに指定したのに、次に再定義したときはstring型で定義しているためです。
```
interface SameNameInterfaceIsAllowed {
  myField: string;
  sameNameSameTypeIsAllowed: number;
  sameNameDifferentTypeIsNotAllowed: string;
}
 
interface SameNameInterfaceIsAllowed {
  newField: string;
  sameNameSameTypeIsAllowed: number;
}
 
interface SameNameInterfaceIsAllowed {
  sameNameDifferentTypeIsNotAllowed: number;
// エラー↓
Subsequent property declarations must have the same type.  Property 
'sameNameDifferentTypeIsNotAllowed' must be of type 'string', but here has type 'number'.
}
```
Typeは同名のものを定義した時点でエラーになります。
```
type SameNameTypeWillError = {
// エラー↓
Duplicate identifier 'SameNameTypeWillError'.
  message: string;
};
type SameNameTypeWillError = {
// エラー↓
Duplicate identifier 'SameNameTypeWillError'.
```

### MappedTypesについて
これについての説明は省きます。以下のページで詳しく説明されています。
https://typescriptbook.jp/reference/type-reuse/mapped-types

## 使い分けについて
これについては明確な正解はないそうです、、、
それぞれのメリット、デメリットを理解した上で
プロジェクトや所属するチームのルールに則るしかないようです。
個人的には、Typeのほうが安全かなと思っています。
理由としては、同名の定義ができないので、誤って同じ名前で宣言をしてしまってもエラーが出るので、バグに繋がることを防げるからです。



## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

参考

続きを読むには単価診断を受けてください 30秒