TypeScriptの基礎的な知識(タイプガード、インターセクション型)について学ぶ

学んだこと

オブジェクトのキー

• obj の data は props なのでここはprops: stringという意味になる

const data = "prop"
const obj: {
  "user-id": string;
  1: number;
  // ここがオブジェクトのキーになる
  [data]: string
} = {
  "user-id": "foo",
  1:1,
  [data]: "hello"
}

• データの構成

{
  "user-id": "foo",
  "1": 1,
  "prop": "hello"
}

A かつ B のように、&を用いてインターセクション型を定義する方法

• インターセクション型
  • A かつ B を表すときに使用する型

type Engineer = {
  name: string;
  role: string;
}

type Blogger = {
  name: string;
  follower: number;
}

// インターセクション型
type EngineerBlogger = Engineer & Blogger;

// インタフェースでも書くことができる
interface EngineerBlogger extends Engineer, Blogger{}

// どちらのタイプにもあるプロパティに値を設定する必要がある。
const quill: EngineerBlogger = {
  name: "Quill";
  role: "front-end";
  follower: 1000;
}

// stringとnumberだと存在しないため、never型になる
type tmp = string & number;

// 以下のユニオン型を用意する
type NumberBoolean = number | boolean;
type StringNumber = string | number;
// インターセクション型を定義すると、型はnumberになっている。
// ユニオン型のどちらにもnumberが定義されているため、numberとなる
type Mix = NumberBoolean & StringNumber;

３つの type guard で型を絞り込む方法(Narrowing)

• Narrowing
  • TS が型を絞り込む方法の名称
• TypeGuard
  • 特定の型以外を入れないようにする方法の名称

type Engineer = {
  name: string;
  role: string;
}

type Blogger = {
  name: string;
  follower: number;
}

type EngineerBlogger = Engineer & Blogger;

interface EngineerBlogger extends Engineer, Blogger{}

const quill: EngineerBlogger = {
  name: "Quill";
  role: "front-end";
  follower: 1000;
}

type tmp = string & number;
type NumberBoolean = number | boolean;
type StringNumber = string | number;
type Mix = NumberBoolean & StringNumber;

// typeof
// 型名を確認することができる
function tuUpperCase(x: string | number){
  if(typeof x === "string" ){
    return x.toUpperCase();
  }
  return "";
}

// in演算子
// オブジェクトが存在するかしないかを判断することができる
type NomadWorker = Engineer | Blogger;
function describeProfile(nomadWorker: NomadWorker){
  console.log(nomadWorker);

  if("role" in nomadWorker){
    console.log(nomadWorker.role);
  }
}

class Dog {
  speak(){
    console.log("bow-bow");
  }
}

class Bird{
  speak(){
    console.log("tweet-tweet");
  }

  fly(){
    console.log("flutter")
  }
}

// instanceof
// 特定のインスタンスから生成されたオブジェクトかどうかを判断することができる
type Pet = Dog | Bird;
function havePet(pet: Pet){
  pet.speak();
  if(pet instanceof Bird){
    pet.fly();
  }
}