では、先ほどの 一括ラップ関数テンプレート を TypeScript版に書き換え、型安全にオブジェクト返却ができるようにします。
チーム開発や大型プロジェクトでも安心です。
1. TypeScript版 wrapArrayToObject
// 元関数が返す配列の型をジェネリクスで指定
function wrapArrayToObject<T extends any[], K extends string>(
fn: (...args: any[]) => T,
keys: K[]
): (...args: Parameters<typeof fn>) => { [P in keyof T & keyof K]: T[P] } {
return (...args: any[]) => {
const arr = fn(...args);
if (!Array.isArray(arr)) {
throw new Error("元関数が配列を返していません");
}
const obj: any = {};
keys.forEach((key, index) => {
obj[key] = arr[index];
});
return obj;
};
}
2. 元の配列返却関数（TypeScript用サンプル）
function calcStats(values: number[]): [number, number, number, number] {
const sum = values.reduce((a, b) => a + b, 0);
const avg = sum / values.length;
const max = Math.max(...values);
const min = Math.min(...values);
return [sum, avg, max, min];
}
function getUserScores(user: { math: number; english: number; science: number }): [number, number, number, number] {
const { math, english, science } = user;
const total = math + english + science;
return [math, english, science, total];
}
function getPosition(element: { offsetLeft: number; offsetTop: number }): [number, number] {
return [element.offsetLeft, element.offsetTop];
}
3. 一括ラップ（設定リスト＋型安全）
type WrappedFunction<T extends any[]> = (...args: any[]) => { [key: string]: any };
const functionsToWrap: { fn: WrappedFunction<any>; keys: string[]; name: string }[] = [
{ fn: calcStats, keys: ["sum", "avg", "max", "min"], name: "calcStatsObj" },
{ fn: getUserScores, keys: ["math", "english", "science", "total"], name: "getUserScoresObj" },
{ fn: getPosition, keys: ["x", "y"], name: "getPositionObj" }
];
const wrappedFunctions: { [key: string]: WrappedFunction<any> } = {};
functionsToWrap.forEach(({ fn, keys, name }) => {
wrappedFunctions[name] = wrapArrayToObject(fn, keys);
});
4. 呼び出し例（型安全で補完が効く）
const stats = wrappedFunctions.calcStatsObj([10, 20, 30]);
console.log(stats.sum, stats.avg, stats.max, stats.min); // 60 20 30 10
const user = { math: 80, english: 70, science: 90 };
const scores = wrappedFunctions.getUserScoresObj(user);
console.log(scores.math, scores.english, scores.science, scores.total); // 80 70 90 240
const element = { offsetLeft: 50, offsetTop: 100 };
const pos = wrappedFunctions.getPositionObj(element);
console.log(pos.x, pos.y); // 50 100
✅ TypeScriptにすると：
- 分割代入や補完が効く
- 型ミスをコンパイル時に検出可能
- チーム開発・大規模プロジェクト向き
💡 応用ポイント
- APIレスポンスに直接組み込む場合も型安全にできる：
interface ApiResponse<T> {
success: boolean;
data: T;
errors: string[];
}
const apiResponse: ApiResponse<typeof stats> = {
success: true,
data: stats,
errors: []
};
- 既存の配列返却関数を一括でオブジェクト返却化しても、型情報がそのまま残るので、チーム全体で安全にリファクタリング可能。
