TypeScriptを息を吸う如く書けるようになりたい【基礎①】

TypeScriptではさまざまな型の定義方法があります。
この記事ではTypeScriptにおける型定義を学習記録としてライトにまとめたものです。

独自の持論すぎるのでそれは違うだろう！って感じた人は頭の中から消し去ってください！

TypeScriptが何か？などの概要は割愛させていただきたいと思います。
TypeScriptについて概要が知りたい方は過去の記事をご覧いただければと思います。

また、もっと詳しく書いてある記事を読みたい方は下記の記事をご覧ください！

【この記事をオススメしたい人】
・TypeScriptを学習している人
・TypeScriptの型定義の熟練度を上げたい人！

Union型の注意点

定義する順番によってエラーになることがあります。

let union: number | string = 3;
union.toUppercase();

上記のようにunionに文字列が入っていない状態で文字列に対して利用できるメソッドを利用するとエラーになります。
当然と言えば当然ですが…。

Literal型

typeScriptはconstで定義することでliteral型となります！

// literal型で定義される
const test = 'test';

// string型で定義される
let test = 'test';

Enum型(列挙型)とUnion・Literal型

Enum型を利用した型定義は、Union型とLiteral型のを組み合わせても同じような定義ができます。
また、typeエイリアスを使うことでUnion型とLiteral型のを組み合わせはスッキリさせることができます！

// Enum型での定義
enum DrinkSize {
  SMALL = 'SMALL',
  MEDIUM = 'MEDIUM',
  LARGE = 'LARGE',
}

// Union型とLiteral型の組み合わせ
const drink: {
  size: 'small' | 'medium' | 'large';
} = {
  size: 'small',
}

// typeエイリアスを使う
type DrinkSizes = 'small' | 'medium' | 'large';
const drink: {
  size: DrinkSizes;
} = {
  size: 'small',
};

enum型で定義するとオブジェクトなのでDrinkSize.SMALLで呼び出すことができます。

enum型の定義は基本的に大文字、今回DrinkSizeとした名前の部分はパスカルケースを利用するのが一般的です！

ケースバイケースだと思いますが、数が少ない場合Enum型で定義すると少し冗長な感じがするのでUnion・Literal型の組み合わせで定義するというのも良いという意見もあります。

個人的にはチームで統一する方がいいかな…と思ったりもしますが、どちらがいいんでしょうね…
ここに関しては知見がないので勉強ですね…。

【補足】emau型で｀=`の右側を指定しなかった場合

下記のように=の右側を記述しなかった場合は自動で数値がセットされます。

enum DrinkSize {
  SMALL,
  MEDIUM,
  LARGE,
}

MEDIUMに数値をセットした場合は、次に定義したものは＋1されてセットされます。

enum DrinkSize {
  SMALL,
  MEDIUM = 100,
  LARGE,
}

日本語文字を右側に指定するよりも、何も指定せずに数値として扱われた方がメモリの節約にになるとされているので特にこだわりたい部分がない場合は=の右側を指定しない方が良いと思われます。

関数の戻り値にも型定義する

基本的には関数の返り値にも方を定義して予期せぬ値が返ってきてもエラーが出るようにしておいた方がいいかと思います。

返り値の型定義は画像のフォーカスされた箇所に指定します。

型が指定してあると下記の画像のようにnumber型以外が返されようとした場合にエラーを出してくれます！

戻り値がない関数の型定義にundefind型は基本使わない。void型を使う

関数はvoid型で定義してもundefindを返します。

ならundefined型にしちゃえばいいのでは？と考えます。
ただ、undefined型を利用するにはreturnが必須になります。

// voide型
function sum(): void {
  console.log('test');
}

// undefined型
function sum(): undefined {
  console.log('test');
  return;
}

なので戻り値がない関数を定義する時はvoid型が一般的です。