TypeScriptの基礎的な知識(TypeScriptで扱う型2)について学ぶ

学んだこと

Literal 型

• 決まった値しか代入出来ない
  • const で変数を定義したときと同じ

// 変数名: 値
// この場合はエラーとなる
// 設定した値が代入されない場合エラーになる。
const apple: "apple" = "book";
console.log(apple);

// この場合は、s,m,lだけ入る変数になる
let value: "s" | "m" | "l"

type エイリアス

• 型の別名をつける

// type 変数 = 値
type Value = "s" | "m" | "l";
const value1 : Value = "s"

関数に型を適応

• 各引数、戻り値に型を適応できる

// function 関数名(引数名: 型名, ...)
function add(num: number, num1: number):number {
  return num + num1;
}

// 戻り値void型の関数も存在する
function func(): void {
  console.log("aaa")
}

特定の関数のみ代入できる変数

function add(num: number, num1: number): number {
  return num + num1;
}

// 変数の型に引数・戻り値の型を設定する。
// 引数・戻り値の型が一致する関数を入れることができる
const func: (n1: number, n2: number) => number = add;

Callback 関数の型

• Callback の戻り値が void がそうでない場合で挙動が異なる
  • void の場合
    • 戻り値が void になるため、そもそも戻り値の値の型制限がない
    • すなわち、値の型自体チェックされない
  • その他の場合
    • 戻り値の値の型チェックが入るため厳しくなる。

// Callbackの戻り値がvoidになっている
function doubleAndHandle(num: number, cb: (num: number) => void): void {
  // cbの戻り値はvoidになっている
  const doubleNum = cb(num * 2);
  console.log(doubleNum);
}

doubleAndHandle(21, (doubleNum) => {
  return doubleNum;
});

unknown 型

• any と違い、違う型に代入するとエラーになる

let unknownInput: unknown;
let anyInput: any;
let text: string;

unknownInput = "hello";
unknownInput = 21;
unknownInput = true;
// ここでエラーになる
// textはstring、unknownInputはboolean型の値が入っている為
text = unknownInput;

text = anyInput;

if (typeof unknownInput === "string") {
  text = unknownInput;
}