2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【実務未経験】初学者が0から学ぶTypeScript②

Last updated at Posted at 2020-10-08

参考:TypeScriptの型入門, TypeScript Deep Dive 日本語版
前回:【実務未経験】初学者が0から学ぶTypeScript①
※もし私の記事に誤りがありましたら、ご教示いただけますと幸いです。
##オブジェクト型とinterface構文
interfaceという構文を使うことで、オブジェクトとプロパティが持つにも型をつけれる。

interface :接合部分、接触面、接点、仲立ち、連絡(係)、橋渡し(役)

今回は、色々な生き物の、種類(name)体長(size)オスかどうか(male)の値をプロパティとしてもつCreatureDataというオブジェクト型を作ってみました。

interface CreatureData {
  name: string;
  size: number;
  male: boolean;
}

体長100cmのオスのマグロならこんな感じ

interface CreatureData {
  name: string;
  size: number;
  male: boolean;
}
const tuna: CreatureData {
  name: "tuna",
  size: 100,
  male: true,
}

性別を持たない体長5cmのかたつむりだと・・・
(かたつむりって性別がないんだって)

interface CreatureData {
  name: string;
  size: number;
  male: boolean;
}
const snail: CreatureData {
  name: "snail",
  size: 5,
}
//定数snailにはmaleプロパティが無い為型エラー

今度はオスかメスかわからない生き物にも型をつけたいので、CreatureData2というオブジェクト型も追加してみました。

さらに最初にいたマグロと同じ体長のマグロをもう1尾発見したのですが、今度のは損傷が激しく性別が判断できませんでした。このマグロはCreatureData2型をもつ定数damageTunaとしてtunaオブジェクトを代入して扱ってみましょう。

interface CreatureData {
  name: string;
  size: number;
  male: boolean;
}

interface CreatureData2 {
  name: string;
  size: number;
}

const tuna: CreatureData {
  name: "tuna",
  size: 100,
  male: true,
}
const damageTuna: CreatureData2 = tuna;

負傷したマグロ**「定数damageTunaCreatureData2型なんだからCreatureData型の定数tunaを代入したら型エラーになるんじゃ?(かたつむりの例でダメって言ってなかった?)」**

TypeScriptは構造的部分型っていう仕組みを採用していて、この場合CreatureDataCreatureData2部分型として問題なく動作するんだって!!

代入する定数の型が、新しく宣言した定数の部分型に当たる場合はこんな使い方ができるみたい。

次回: 【実務未経験】初学者が0から学ぶTypeScript③

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?