Posts

背景 今回もmattさんの記事をまとめていく。 TypeScript Tip #7 概要 オブジェクト中身を順番に処理していく時には、以下のコードを用いることがある。 const myObject = { a: 1, b: 2, c: 3 } Object.keys(myObject).forEach((key) => { console.log(myObject[key]) // Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: number; b: number; c: number; }'. // No index signature with a parameter of type 'string' was found on type '{ a: number; b: number; c: number; }'.

背景 今回もmattさんの動画をまとめていく TypeScript Tip #5 概要 型推論された型に対してextendsを使用するまとめていく。 本題 実際のサンプルコードは以下。 getDeepValue関数の引数にオブジェクトを渡して、そこから型推論をさせている。 第2引数、第3引数のオブジェクトのキーを指定して、最終的なバリューを取得できるような関数を作成する。 export const getDeepValue = < Obj, FirstKey extends keyof Obj, SecondKey extends keyof Obj[FirstKey] >( obj: Obj, firstKey: FirstKey, secondKey: SecondKey ): Obj[FirstKey][SecondKey] => { return obj[firstKey][secondKey] } const obj = { foo: { a: true, b: 2 }, bar: { c: 'cool', d: 2 } } console.log(getDeepValue(obj, 'bar', 'd')) 引数の第2引数FirstKeyは型推論されたObjに制約を設けている。 FirstKey extends keyof { foo: { a: boolean; b: number; }; bar: { c: string; d: number; }; } 🔽 FirstKey extends "foo" | "bar" よって、FirstKeyはfooかbarのどちらかになる。

背景 今回もmattoさんのコードリーディングをしていく。 TypeScript Tip #3 概要 今回はTypeScriptのユーティリティをまとめたライブラリts-toolbeltについて説明していく。 注意点としては、TypeScriptバージョンが4.1以上である必要がある。 数多くのユーティリティが提供されているため、今回はMattさんの解説に絞ってまとめていく。 ts-toolbelt 本題 使い方 ライブラリの中から使用したいユーティリティをimportして使用する。 import { String, Union } from 'ts-toolbelt'; 今回はURLの操作をする時に便利なユーティリティをまとめていく。 サンプルコード import { String, Union } from 'ts-toolbelt'; const query = '/home?a=foo&b=wow' type Query = typeof query // type Query = "/home?a=foo&b=wow" type SecondQueryPart = String.Split<Query, '?'>[1] // type SecondQueryPart = "a=foo&b=wow" type QueryElements = String.Split<SecondQueryPart, '&'> // type QueryElements = ["a=foo", "b=wow"] type QueryParams = { [ QueryElement in QueryElements[number] ]: { [ key in String.

背景 今回もmattoさんのTypeScriptの動画をまとめていく 概要 下記の様なEntityの型を定義する。 type Entity = | { type: 'user' } | { type: 'post' } | { type: 'comment' } 上記の型の各オブジェクトにidを追加したい。その時のコードは以下になる。 typeに応じたidのプロパティを追加している。 type EntityWithId = | { type: 'user' userId: string } | { type: 'post' postId: string } | { type: 'comment' commentId: string } const result1: EntityWithId = { type: 'post', postId: '123' } const result2: EntityWithId = { type: 'user', userId: '123' } 今回はEntityWithIdの部分をインデックスシグネチャを利用して作成していく。 本題 実際のコードは以下になる。細かくみていく。

背景 前回のmattさんのTypeScript Tip #15が勉強になったので、最初から#1からまとめていく 概要 export const fruitCounts = { apple: 1, pear: 4, banana: 26 } 上記の様なコードがあった時に、特定のキーを取得する型エイリアスで定義すると以下になる。 type SingleFruitCount = | { apple: number } | { banana: number } | { pear: number } const singleFruitCount: SingleFruitCount = { apple: 10, } SingleFruitCountの型エイリアスを作成すれば、型定義できるが定数fruitCountsを型推論させて型エイリアスを作成する。 本題 最終的なコードは以下になる。具体的に解説していく。 type FruitCounts = typeof fruitCounts type NewSingleFruitCount = { [ K in keyof FruitCounts ]: { [ K2 in K ]: number } }[keyof FruitCounts] // type NewSingleFruitCount = { // apple: number; // } | { // pear: number; // } | { // banana: number; // } typeof fruitCountsは型推論が効いて以下の型が作成される。 type FruitCounts = { apple: number; pear: number; banana: number; } [ K in keyof FruitCounts ]のkeyof FruitCountsは型エイリアスのオブジェクトのキーのみを取得することができる。