仕事ですぐに使えるTypeScript その３

TypeScript 仕事ですぐに使えるTypeScript

目的

学習の記録と学びになった部分をアウトプットするため。

期限

対象書籍の読了・内容理解が8月中に完了していること。

対象

今回の対象は「変数」。

future-architect.github.io

著作権者：フューチャー株式会社（Future Corporation）様

変数

三行サマリ

  • 変数宣言では必ずconstを使用する。letを使用しなければならない場面でもconstで宣言できないかを考える。
  • TypeScriptでは、「AでもBでも良いという柔軟な型定義」や「値も型システムで扱う」こと、またその両方ができる。
  • varで変数宣言をすると、定義前であってもundefinedでエラーにはならない。（そもそももうvarを使うべきじゃない）

三種類の宣言構文

型が登場する場面は主に3つ。

  • 変数（プロパティを含む）
  • 関数の引数
  • 関数の返り値

この章では変数について触れる。

  • 変数宣言にはconst, let, varがあるが、基本的にはconstを使うべき。letを使わなければならない時であっても、なるべくconstを使用するように検討すべき。
  • 変わる必要ばないものは「もう変わらない」と宣言することで、状態の数が減ってコードの複雑さが減り、理解しやすくなる。（下記記事参照）

qiita.com

let name;
if (mode === "slack") {
    name = "小型犬";
} else if (mode === "twitter") {
    name = "小動物";
}

// 三項演算子を使えばconstにもできる

const name = mode === "slack" ? "小型犬" : "小動物"

変数の型定義

  • 変数の宣言は基本的に型推論を使用すれば良い。（明示的に示したい場合は記載する）
  • 変数宣言をする際に、型定義を行わない場合はany型となる。
let address; // <- any型
let phone: number; // <- number型

より柔軟な型定義

  • TypeScriptは、静的メモリ配置までの面倒は見ておらず、型システムがプログラミングのサポートまでしか行っていないため、柔軟な型システムを持っている。
  • 「AでもBでも良いという柔軟な型定義」、「値も型システムで扱うことができる」。

「AでもBでも良いという柔軟な型定義」

let birthYear: number | string

「値も型システムで扱うことができる」

let food: "トマト" | "きゅうり";
let likeNumber: 2 | 10 | 14;

また、その二つも合わせることも可能。

let birthYear: number | "平成" | "令和";

変数の巻き上げ

// varは定義前に呼び出されるとundefinedになる
function hoge() {
  console.log(`確認： ${v}`);
  var v = "fuga";
  // undefinedが入っている変数がある扱いになり、エラーならず
}
hoge();

//  let or constを使用した場合
function hoge() {
  console.log(`確認： ${v}`);
  let v = "fuga";
  // 変数宣言より前ではエラーになる
  // error TS2448: Block-scoped variable 'v' used before its declaration.
}
hoge();