typescriptパターン集

インポート先のメソッド名が重複している場合、as XXXX　で名称を変更できる

import {ChangeTool as FooChangeTool } from "path/to/use";

Take

最大値/ 最小値を求めるのにreduceを使う方式

const group = [
{index:1, anyParam...},
{index:2, anyParam... },
]
// 最大値
const maximunIndex =  groups.reduce((a, b) => a.index > b.index ? a : b);
const maximunIndex =  groups.reduce((a, b) => Math.max(a,b));
最小値
const minimunIndex =  groups.reduce((a, b) => a.index < b.index ? a : b);
const maximunIndex =  groups.reduce((a, b) => Math.min(a,b));

Take

配列を基準に連想配列のソートを行う

const jyunban = ['りんご', 'みかん', 'いちじく', 'なし', 'かき'];
const group = [
  { id: 1, fruit: 'いちじく' },
  { id: 2, fruit: 'かき' },
  { id: 3, fruit: 'みかん' },
  { id: 4, fruit: 'なし' },
  { id: 5, fruit: 'りんご' },
];
const result = group.sort((a, b) =>
  return jyunban.indexOf(a.fruit) - jyunban.indexOf(b.fruit);
})

Take

文字列のパターン

文字列の分岐処理

`${DEFAULT_TEXT}${!eventId ? `\id: ${eventId}` : ``}`;

Take

ジェネリックのパターン

特定のプロパティを除外した型

type BasePizza = {source: string, cheese: string, meet: string, vegetable:string }
type Margherita<T> = Omit<Basepizza, "meet">;

特定のプロパティを追加した型

type HotPizza<T> = T &
  BasePizza & {
    spice: string;
  };
type hotMargherita = HotPizza<Margherita>

Take

filterの結果からundefinedを取り除くパターン

引数名 is 型の型の部分をユーザ定義タイプガードでundefinedを取り除く指定をする(Exclude<T,U>)

const items: (string | number | undefined)[] = ['a', undefined, 'b', undefined, 'c']

const stringOrNumbers: (string | number)[] = items.filter(
    (item): item is Exclude<typeof item, undefined> => item !== undefined
)

引数名 is 型でfilterの結果を定義する

const items: (string | number | undefined)[] = ['a', undefined, 'b', undefined, 'c']

const stringItems = items.filter((item): item is string => typeof item == 'string')

参照元：https://qiita.com/suin/items/cda9af4f4f1c53c05c6f

flatMapを使う

const items: (string | number | undefined)[] = ['a', undefined, 'b', undefined, 'c']
const filteredArray = items.flatMap(number => number ?? []) //undefinedを除去する処理
//const filteredArray = items.map(number => number ?? []).flat()と同じ
//array.map(): number[][]、array.map().flat(): number[]となり、mapの戻り値が元の型に依存しないためundefinedを削除できる

参照元：https://qiita.com/ssc-syuinoue/items/108959e8cb8edcc342d1

Take

promise.allメモ

const { data } = await api.GetUser(instanceUid);
const { data } = await api.GetCart(instanceUid);

↑をpromise.allにしたい時

// user, cart で各APIの戻り値を格納(APIの記載の順番どおり)
// 分割代入時に変数名の指定
const [{ data:  user }, { data: cart }] = await Promise.all([
  // 内部でawait しない
  api.GetUser(instanceUid),
  api.GetCart(instanceUid)
]);

Take

オブジェクトの特定のプロパティの値を変更したい

const foo = {
 A: [{id: 0 , name: "apple",select: true },{id: 1 , name: "AMAOU",select: true }],
 B: [{id: 2 , name: "banana",select: true}],
 c: [{id: 4 , name: "cherry",select: true}],
}

↑のオブジェクトのselectの値だけを変更したい

Object.keys(spy).map(item => {
  return spy[item].forEach(g => {
     g.select = false;
  })
console.log(foo)
/*  {
 A: [{id: 0 , name: "apple",select: false },{id: 1 , name: "AMAOU",select: false }],
 B: [{id: 2 , name: "banana",select: false}],
 c: [{id: 4 , name: "cherry",select: false}],
}
*/

このスクラップは2022/08/17にクローズされました