見出し画像

【ワンピースで覚えるTypeScript】第20回 リテラル型(JavaScript学習者向け)

今回はTypeScriptのリテラル型についてです。

wideningするリテラル型とそうでないリテラル型があるので、違いをよく理解しましょう!


type MainChara = "luffy";
//文字列のリテラル型("luffy"型)
const luffy: MainChara = "luffy";
//const nami: MainChara = "nami";
//MainChara型には"luffy"しか入れられない

const bounty = 1000;
//変数bountyは1000型

//テンプレートリテラル型
type Word = `${string}に俺はなる`;

function Say(): Word {
   return "海賊王に俺はなる";
}
/*function Say1(): Word {
    return "俺はなる";
}*/
//特定の形であることをチェックできる

//ユニオン型のリテラル
function GetCaptain(group: "ブリキング" | "ハート"){
    return group == "ブリキング" ? "ワポル" : "ロー";
}
console.log(GetCaptain("ブリキング"));
console.log(GetCaptain("ハート"));

//リテラル型のwidening
//①letで宣言された変数に代入されたとき
const luffy1 = "luffy";
let luffy2 = "luffy";
//変数の方が"luffy"ではなくstring
luffy2 = "ルフィ";
//luffy2 = 1;

let luffy3: string | number = "luffy";
luffy3 = "ルフィ";
luffy3 = 1;

//②オブジェクトリテラルの中
const luffy4 = {
    name: "ルフィ",
    age: 19
}
//let同様あとから書き換え可能だから
luffy4.name = "海賊王";

//wideningされるリテラル型
//wideningされないリテラル型
//=>型推論で推論されたかどうか

const luffy5 = "luffy";
//型推論された"luffy"型
const luffy6: "luffy" = "luffy";
//明示的に書いた"luffy"型

let luffy_5 = luffy5;
//string型
let luffy_6 = luffy6;
//"luffy"型

この記事が気に入ったらサポートをしてみませんか?