【TypeScript 3.7】nullish coalescing opearatorとは(読み方)

nullishcoalescing.md

TypeScript 3.7 nullish coalescing opearatorとは

私について

nullish coalescing opearatorの読み方

• ヌリッシュコアレシングオペレーター

下記はTypeScript Playgroundの What's Newにあるものの少しの日本語訳とそれをもとに試してみたことです

// The nullish coalescing operator is an alternative to ||
// which returns the right-side expression if the left-side
// is null or undefined.

// nullish coalescing opearator は もし左がnull か undefinedなら 右 を返す || の代替です

// In contrast, || uses falsy checks, meaning an empty
// string or the number 0 would be considered false.
// 対象的に || のfalsyチェックを使うと空文字 `""` や number `0` がfalseとされます

// A good example for this feature is dealing with partial

// objects which have defaults when a key isn't passed in.

それらのfalsyな値とnull undefinedを分けたい場合使う

試してみる

type Option = {
    name?: string // null or undefined
    age?: number
}
function getConfig(option: Option) {
    return option.name ?? "no name" // ""で渡ってきた場合falsyだが""(空文字)が返る
}

// function getConfig(option: Option) {
//     return option.name || "no name" // 短絡評価の場合 "noname"が返る
// }

let config = { // nullにすると...
    name: "", // このname のkey valueを削除すると "no name"が返る
    age: 20
}

const result = getConfig(config);
console.log("result", result)
// result no name

let config2 = {
    age: 0
}

function getConfig2(option: Option) {
    return option.age ?? "no age" // 0 が返る
}

// function getConfig2(option: Option) {
//     return option.age || "no age" // "no age"が返る(0はfalseと評価されるため)
// }

const result2 = getConfig2(config2)
console.log("result2", result2)

続き

interface AppConfiguration {
  // Default: "(no name)"; empty string IS valid
  name:  string;

  // Default: -1; 0 is valid
  items:  number;

  // Default: true
  active: boolean;
}

function updateApp(config: Partial<AppConfiguration>) {
  // With null-coalescing operator
  config.name = config.name ?? "(no name)";
  config.items = config.items ?? -1;
  config.active = config.active ?? true;

  // Current solution
  config.name = typeof config.name === "string" ? config.name : "(no name)";
  config.items = typeof config.items === "number" ? config.items : -1;
  config.active = typeof config.active === "boolean" ? config.active : true;

  // Using || operator which could give bad data
  config.name = config.name || "(no name)"; // does not allow for "" input
  config.items = config.items || -1; // does not allow for 0 input
  config.active = config.active || true; // really bad, always true
}

// You can read more about nullish coalescing in the 3.7 blog post:
//
// https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/

kenmori