上級者向け：TypeScriptでString Union型をString Array型に変換する高度なテクニック
2024-04-02
TypeScriptにおけるString Union型からString Array型への変換
split メソッド
文字列をカンマなどの区切り文字で分割して、String Array型に変換できます。
const str: string = "a,b,c";
const arr: string[] = str.split(",");
console.log(arr); // ["a", "b", "c"]
map 関数
String Union型の各要素を個別に文字列に変換し、String Array型に変換できます。
const str: string | string[] = "a,b,c";
const arr: string[] = (typeof str === "string")
? str.split(",")
: str;
console.log(arr); // ["a", "b", "c"]
テンプレートリテラル
const str: string | string[] = "a,b,c";
const arr: string[] = `${str}`.split(",");
console.log(arr); // ["a", "b", "c"]
型ガード
const str: string | string[] = "a,b,c";
const arr: string[] = (typeof str === "string") ? str.split(",") : [];
console.log(arr); // ["a", "b", "c"]
ライブラリ
fp-ts などのライブラリを使用すれば、より簡潔にString Union型からString Array型への変換を行うことができます。
import { split } from "fp-ts/string";
const str: string | string[] = "a,b,c";
const arr: string[] = split(",")(str);
console.log(arr); // ["a", "b", "c"]
これらの方法の中から、状況に応じて最適な方法を選択してください。
補足
- String Union型とは、複数の文字列型が合わさった型です。
- String Array型とは、文字列の配列型です。
split メソッド
const str: string = "a,b,c";
const arr: string[] = str.split(",");
console.log(arr); // ["a", "b", "c"]
map 関数
const str: string | string[] = "a,b,c";
const arr: string[] = (typeof str === "string")
? str.split(",")
: str;
console.log(arr); // ["a", "b", "c"]
テンプレートリテラル
const str: string | string[] = "a,b,c";
const arr: string[] = `${str}`.split(",");
console.log(arr); // ["a", "b", "c"]
型ガード
const str: string | string[] = "a,b,c";
const arr: string[] = (typeof str === "string") ? str.split(",") : [];
console.log(arr); // ["a", "b", "c"]
ライブラリ
import { split } from "fp-ts/string";
const str: string | string[] = "a,b,c";
const arr: string[] = split(",")(str);
console.log(arr); // ["a", "b", "c"]
String Union型からString Array型への変換方法
const str: string | string[] = "a,b,c";
const arr: string[] = (typeof str === "string")
? str.split(",").reduce((acc, cur) => [...acc, cur], [])
: str;
console.log(arr); // ["a", "b", "c"]
filter 関数と concat メソッド
filter 関数を使用して空文字列を除外した後に、concat メソッドを使用してString Array型に変換できます。
const str: string | string[] = "a,,b,c";
const arr: string[] = (typeof str === "string")
? str.split(",").filter(Boolean).concat([])
: str;
console.log(arr); // ["a", "b", "c"]
flatMap 関数を使用して、String Union型の各要素を分割し、1つの配列に結合できます。
const str: string | string[] = "a,b,c";
const arr: string[] = (typeof str === "string")
? str.split(",").flatMap((s) => [s])
: str;
console.log(arr); // ["a", "b", "c"]
const str: string | string[] = "a,b,c";
const arr: string[] = [...(typeof str === "string" ? str.split(",") : str)];
console.log(arr); // ["a", "b", "c"]
typescript
