8
5

More than 3 years have passed since last update.

SEO的に弱いTypescriptの!や?を使った演算子のまとめ

Last updated at Posted at 2020-03-12

はじめに

低級なプログラミング言語をメインで使っているのですが、たまにJavascript/Typescriptを書くことがあり、
先人の書いたコードの??!!の意味がわからなくてググろうとするもなかなか検索に引っかからないため、
自分への備忘録としてまとめました。

キーワード:疑問符、感嘆符、ハテナ、ビックリマーク

Null条件演算子 ?.

ex. ある変数entityがundefinedではないときにはentityのメソッドを実行し、undefinedの時は何もしないような場合


// 単純に書くと
let entity: Entity | undefined

if (entity != null) {
    entity.Do()
}

// Null条件演算子を使うと一行で書ける
entity?.Do()

Null条件演算子を使った場合にその変数がNullだったらそのままnullを返してくれます。

Null合体演算子 ??

ex. ある変数entityがundefinedではないときにはentity自体を返して、undefinedの時は規定の値を返す場合


// 単純に書くと
let entity: Entity | undefined

if(entity == null)){
    return "This is undefined";
}else{
    return entity;
}

// Null合体演算子を使うと一行で書ける
return entity ?? "This is undefined"

二重否定の論理演算子 !!

ex. ある変数entityがundefinedかどうかを判定する場合


// 単純に書くと
let entity: Entity | undefined

if (typeof entity === "undefined") {
    // Do something
}

// 二重否定を使うとシンプルに書ける
if (!! entity) {
   // Do something
|

どういうことが起こっているかというと、


let entity: undefined

! entity // => true
!! entity // => !true = false となっている

非nullアサーション演算子 !.

TypeScriptコンパイラが自動的にその式を推論できない場合に、式がnullでもundefinedもないことを宣言できるらしい。


// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
    // Throw exception if e is null or invalid entity
}

function processEntity(e?: Entity) {
    validateEntity(e);
    let a = e.name;  // TS ERROR: e may be null.
    let b = e!.name;  // OKAY. We are asserting that e is non-null.
}

フローとしてはnullはありえないけど、コンパイラがそれを判定できないので、Nullはありえないことをコンパイラに教えてあげるみたい。

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5