TypeScriptの基本的な型まとめ(初めての学習)

はじめに

受講生の約6割が次に学びたいと高注目のTypeScript。
今回はそのTypeScriptの基本的な型を学習したので、アウトプットとして紹介します。
参考は 【はむ式】ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門

基本的な型

TypeScriptの醍醐味である型定義を18種類解説していきます。

boolean型

boolean.ts

let isFinished: boolean = true;

trueかfalse関する型定義。
１や人の名前などはエラーとなる。

number型

number.ts

let year: number = 1987;
let age: number = 0x2b;

どちらもnumber型として定義されている。

string型

string.ts

let name: string = "Hum";

人名など文字に関する型定義。

array型

array.ts

let numbers: number[] = [1,2,3];
let strings: string[] = [John, Emy, Mike];

numberの配列であれば、number[]
stringの配列であれば、string[]

array.ts

let numbers: number[][] = [
[1,2,3],
[4,5,6]
];

二次元配列の場合は[ ]がひとつ増える。

array.ts

let Hairetsu: (string | number | boolean)[] = [John, 1, false];

型が複数ある場合はこのように全て書く。(共有体型(union型))

tuple型

tuple.ts

let profile: [string, number] = ["Ham", 32];

共有体型(union型)でも定義は可能だが、順序まで確立して定義する場合はこのようにtuple型で制約を明確にする。
そのため、[32,"Ham"]で書いた場合はエラーとなる。

any型

any.ts

let url: string = "https://udemy~";
axios.get(url).then(function(response) {
 interface Article {
  id: number;
  title: string;
  description: string;
}
 let data: Article[];
 data = response.data
 console.log(data)
)}

型の推論が出来ていない場合は、any型が使われる。
TypeScriptはapiサーバーから帰ってくるデータの型を認識することはできない。
そのため、interfaceで型の定義をする。(いかにanyを使用しない方法を考える必要がある)

void型

void.ts

function returnNothing (): void {
 console.log("i dont return anything");
}

console.log(returnNothing());

何もデータが存在しない時に使用する。

null型　undefined型

null.ts

let absence: null = null;
let data: undefined = undefined;

実際の現場では単体で使うことはあまり見かけない。

never型

never.ts

function error(message: string): never {
  throw new Error(message);
}

try {
  let result = error(test)
  console.log({ result })
}
catch(error) {
  console.log({ error })
}

returnの実行がない(例外が発生)場合、neverを使用する。
void型はreturnされる値がないことであるが、一方never型はreturnされない場合である。

object型

object.ts

let profile1: object = { name: "Tom" };
let profile1: { name: string } = { name: "Tom" };

profile1でも型定義は可能だが比較的に緩めである。一方、profile2の定義方法だとプロパティにも型定義が可能であるため、厳密な型定義ができる。

型エイリアス(Type Aliases)

aliases.ts

const examples1 = {
  name: "Hum",
  age: "11"
}

type profile = {
  name: string;
  age: number;
}

const example2: profile {
  name: "Mike",
  age: "22"
}

type example2 = typeof example1;

型エイリアスのメリットは先に型定義すれば、後で流用することができる。
構造が同じである場合、type profileをexample2に活用できる。
type example2 ~の行では、example1の型定義を流用しているため間違いが起こりづらい。

interface

interface.ts

type ObjectType = {
  name: string;
  age: number;
};
interface ObjectInterface {
  name: string;
  age: number;
}
let Object: ObjectType = {
  name: "Hum",
  age: 32
};

型エイリアスのObjectTypeからinterfaceのObjectInterfaceに変更可能。

型安全とは

boolean.ts

let isFinished: boolean = true;
isFinished = 1;
=>　エラー

普通のJavaScriptではコンパイルや型検査などがなく、実行時でのエラーも発生しません。
この不要な型の混入を防ぐ役割を型安全という。

unknown型

unknown.ts

const kansu = (): number => 43;

let numberAny: any = kansu();
let numberUnknown: unknown = kansu();

let sumAny = numberAny + 10;

unknown型は型として不明であるため、足し算するとエラーが発生する。
型が分からない時になんとなくanyを使うのではなく、unknown型を用いてからその後型ガードで定義する。

交差型(intersection型)

intersection.ts

type Pitcher1 = {
 throwingSpeed: number;
}

type Batter1 = {
 battingAverage: number;
}

const Daimajin: Pither1 = {
 throwingSpeed: 154
}

const Ochiai: Batter1 = {
 battingAverage: 0.367
}

type TwoWayPlayer = Pitcher1 & Batter1;

const Ohatani: TwoWayPlayer = {
 throwingSpeed: 165,
 battingAverage: 0.286
}

愚直にTwoWayPlayerの中身にPitcher1とBatter1をそのまま書くこともできるが、Pitcher1 & Batter1と書くことで同じような型定義することができる。

共有体型(union型)

union.ts

let value: string | number = 1;
value = "foo";

型定義を複数個持たせることができる。

literal型

literal.ts

let dayOfTheWeek: "日" | "月" | "火" | "水" | "木" | "金" | "土" = "日";
dayOfTheWeek = "月";

string型でも可能であるが、さらに特定の定義幅にする場合はこのような定義をすることができる。

列挙型(enum型)

enum.ts

enum Months {
 January,
 February,
 March,
 April,
 May,
 June,
 July,
 August,
 September,
 October,
 November,
 December
}

Months.January

enum Colors {
 Red = "#FF0000",
 White = "#FFFFFF"
}

enum型を使うと、コード量を少なくして連番を付与することができる。また、自分自身でも数値を付与することもできる、

おわり

まだまだ未熟ですがアドバイスや間違いのご指摘があればよろしくお願い致します。