widening（ワイデニング）とは？
TypeScriptが変数の型を安全に広げる概念を指します
変数に代入される新しい値の型が、元の変数の型よりも柔軟である場合、TypeScriptは変数の型をwideningして型整合性を保ちます。
その結果、エラーを回避して変数に新しい型の値を代入できるようになります。
wideningは、型システムを使いやすく、柔軟にする一方で、意図しない型の変更に注意が必要
意図しない動きとならないように明示的な型注釈を追加して型をしっかりと指定しましょう〜！
wideningの簡単な説明
このように明示的に型をつけていないと自動的に型が解釈されてしまいます。
このような使い方のコードが混在していると型が分からなくなり、思わぬバグの原因となります。
明示的な型の付与が大切だということがわかります。
※あと、anyは型を付けてないのとほぼ同じなのでやめましょう
変数の初期化
// arrは(number | string)[]型として推論され、wideningが発生している
const arr = [1, 2, "three"];再代入
// xは number型
let x = 10;
// xは string型にwideningされる
x = "Hello";計算
// resultは、「１５」 number型
const result = 10 + 5;
// anotherResultは、「１０５」 string型にwideningされる
const anotherResult = 10 + "5"; 関数での型推論
const add = (a, b) => {
return a + b;
}
// number型として推論される
const result = add(10, 5);
// string型として推論される
const anotherResult = add("Hello, ", "world"); 型の指定方法
明示的な型の大切さがわかったところで、指定の仕方をおさらいしていきます。
変数の初期化
// 明示的に型を付与 ※ このような変数は分かりづらいのでやめましょう
const arr:(number | string)[] = [1, 2, "three"];再代入
よっぽどのことがない限り、再代入（letの使用）は止めましょう！
新たに宣言することでほとんど解決できると思います。
ちなみにミュータブル、イミュータブル
計算
// 明示的に付与する
const result: number = 10 + 5;
// 明示的に付与することでそもそも文字列であるとわかりやすくなる
const anotherResult: string = 10 + "5"; 関数での型推論
// 引数と戻り値の型を明示的に指定する
const add = (a: number, b: number): number => {
return a + b;
}
// エラーが発生しない
const result = add(10, 5);
// エラーが発生する
const anotherResult = add("Hello, ", "world"); as const
as const は、コードの型安全性を高め、意図しない変更を防ぐのに役立ちます
リテラル型となり型を厳密化できる
// num は 42 というリテラル型となる
const num = 42 as const;
// colors は "red" と "green" という文字列リテラル型の配列となる
const colors = ["red", "green"] as const;そのオブジェクトのプロパティはすべてリテラル型として評価されます。これにより、オブジェクトのプロパティが変更されないことが保証されます。
// personのプロパティは、すべてリテラル型となりプロパティの変更不可が保証されます。
const person = {
name: "Alice",
age: 30,
hoges: [1,2,3],
} as const;リテラル型は、| で複数指定すると使い所が広がります。
さいごに
次回は、as const、ReadOnly、as const satisfies（TypeScript 4.9から登場）について見ていきたいと思います。
もしお時間があれば、下記の記事も見てみてください
【React＆TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話
なんとなく使っているけど、.js .jsx .ts .tsxの違いが分からない～使い分けがよくわからない～を解決しよう
3chome.net
2023.07.22
【make】初心者から始めるおすすめノーコードツールの開発紹介
ノーコードで簡単に自動化やChatGPTを使ったアプリが作れるツールが登場しました！初心者向けにおすすめのmakeでアプリ開発、使い方を紹介！簡単にLINE連携もできちゃいます。Bubbleはフロントエンド、Makeは、バックエンド
3chome.net
2023.05.27
PR
コメント