0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[TypeScript] inを使いこなしたい!

Posted at

Javascriptを書いているとinと聞いて、for in構文が思いだすことが多いと思います。(自分がそうでした)

tsでinを書いているコードを何回か見つけて何となくこういう書き方があるんだなと思いつつ全然自分では書けなかったため、tsでのinの使い方を調べてみました。

1. オプショナルプロパティの存在チェック

変数の中身にオプショナルのものが含まれている場合、inで方指定をすることができます。

interface User {
  name: string;
  age?: number;
}

const user: User = { name: "Alice" };
if ("age" in user) {
  console.log(user.age); // numberとして扱える
}

2. 型の絞り込み(Type Narrowing)

以下のように、片方の型が持っている要素に対して条件式を書くこともできます。

type Animal = Bird | Dog;
interface Bird { fly: () => void; }
interface Dog { bark: () => void; }

function handleAnimal(animal: Animal) {
  if ("fly" in animal) {
    animal.fly(); // Birdとして扱える
  } else {
    animal.bark(); // Dogとして扱える
  }
}

3. 継承したプロパティの確認

クラスで継承したものにinを使うと元クラスの要素の存在確認ができます。
割と便利そう

class BaseClass {
  baseMethod() {}
}

class DerivedClass extends BaseClass {
  derivedMethod() {}
}

const instance = new DerivedClass();
console.log("baseMethod" in instance); // true

おわりに

for inの印象が強くてinは繰り返しの意味が強いと思っていましたが、inはどちらかというと条件文に近い役割をしているんですね。
よく考えたらwhileの中にもbooleanが入るので、同じような仕組みだとやっと理解しました

0
0
1

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?