TSLab【第6回 TypeScript勉強会】オブジェクトの型定義

TSLab
  • URLをコピーしました!

こんにちは!RYOTAです!

ご覧いただきありがとうございます!

当記事はTSLab勉強会(定例会)のレポート記事になります!

目次

はじめに

私が運営しているTSLabの第6回定例会の実施ログとなります。

今回のテーマはオブジェクトの型定義です!

第5回の内容は下記の記事にまとめていますので気になる方はあわせてご覧くださいませ。

あわせて読みたい
TSLab【第5回 TypeScript勉強会】関数型の制御! こんにちは!RYOTAです! 当記事をご覧いただきありがとうございます! 当記事はTSLab勉強会(定例会)のレポート記事になります! 【はじめに】 私が運営しているTSLabの...

ディスカッション内容

マッピング モディファイア

下記の例のように既存の型情報から、同じプロパティを持つ新しい型を生成することが可能。

この例だと[K in keyof Type]で引数の型をmapのように展開して一つづつプロパティを取り出しています。

その際に-readonly (頭に “-” )を付ける事でreadonlyを打ち消してプロパティがミュータブルな型を作成しています。

// プロパティが readonly の型を作成
type ReadonlyUser = {
  readonly id: string
  readonly name: string
}

// 型のプロパティを抽出して新しい型情報を生成する
type CancelReadonly<Type> = {
  // -を付ける事でreadonlyを打ち消せる!!!
  -readonly [K in keyof Type]: Type[K]
}

type UnlockedAccount = CancelReadonly<ReadonlyUser>
// type UnlockedAccount = {
//  id: string;
//  name: string;
// }

-readonlyは使う機会が少ないかもしれませんが、既存の型から新しい型を作成するのは使えると表現の幅が広がるので是非覚えておきたい内容ですね!

readonlyを使うメリット

今回の勉強会で一番タメになったのがこのreadonlyの挙動です。

例えば下記のような変数を定義して実際に使用する箇所(下記で言うとconsoleで呼んでるところ)をホバーするとそれぞれのプロパティと型情報が表示されます。

const tests = {
  hoge: 'hoge',
  fuga: true,
}

console.log(tests)
// const tests: {
//     hoge: string;
//     fuga: boolean;
// }

ですが、下記のようにreadonlyにすると型情報だけでなく実際の値を見る事が可能です。

const tests = {
  hoge: 'hoge',
  fuga: true,
} as const

console.log(tests)
// const tests: {
//     readonly hoge: "hoge";
//     readonly fuga: true;
// }

これ地味に便利!

アプリケーション全体で使う値や定数はreadonlyにしておいた方が開発効率が上がりそう???

インデックス シグネチャ

プロパティに好きな値を入れられて、かつ共通の型で縛りたい時にこの記述の仕方ができます。

下記はプロパティに好きな数値型を入れられて、値には文字列型を入れられる型を生成します。

interface IndexNumberStrings {
  [index: number]: string;
}

(これ…使うシーンあるか…??)

型の結合

これはめちゃめちゃ使う構文ですね。

型1と型2を結合して新しい型を生成する方法になります。

interface Hoge {
  hoge: string
}

interface Fuga {
  fuga: number
}

type HogeFuga = Hoge & Fuga
// HogeFuga = {
//   hoge: string,
//   fuga: number
// }

下記はtypeとinterfaceの違いになります。

// interface
interface C extends A, B {}

// type
type C = A & B

Tuple型

配列の要素の位置とその型を縛ることができるのがtuple型になります。

type tupleType = [string, number, boolean]

const testArray: tupleType = ['test', 1, true]

const testFunc = (test: tupleType) => {
  console.log(test[0])
  // 0: string
  console.log(test[1])
  // 1: number
  console.log(test[2])
  // 2: boolean
}

上記のように要素ごとに型を縛る事で、要素にアクセスした時にその要素の型を特定する事が可能です。

さいごに

今回はTSを実務で使っているメンバーが多かったので、上記の内容をサクッと触れてライブラリの情報交換などをガッツリ触れる会になりました(笑)

次回は速度感を上げていかないとですね!

以上!最後までご覧くださりありがとうございました!

一緒にTypeScriptを学びたい方はぜひ下記のアカウントからご連絡ください!

TSLab

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次