typescriptの拡張子、型に関する覚書です。
目次
tsとtsxの違い
tsxはUIコンポーネントを記述するファイル。JSX (JavaScript XML) を含むファイルに使われます。ちなみに、xはxmlのxからきています。
typescriptのオプショナルプロパティ
items? の ? は TypeScript のオプショナルなプロパティを示すシンタックスです。これは、そのプロパティがオブジェクトに存在しなくても良いことを意味します。オプショナルなプロパティを持つオブジェクト型を定義すると、そのプロパティは、オブジェクトに存在してもしなくても型チェックが通ります。
type Person = {
name: string;
age?: number;
}この定義では、nameは必須のプロパティであり、ageはオプショナルなプロパティです。
以下のオブジェクトはどちらもPerson型として有効です
const person1: Person = {
name: "Alice"
};
const person2: Person = {
name: "Bob",
age: 30
};const person1: Person = {
name: "Alice"
};
const person2: Person = {
name: "Bob",
age: 30
};typescriptのインデックスシグネチャとキャストの実装方法の違い(マッピングのサンプル)
インデックスシグネチャ（Index Signature）とキャスト（Cast）の違いについてみていきます。マッピング時の利用例です。
まず、インデックスシグネチャ（Index Signature）です。
import CharaFormView1 from '../../p-templates/p-form1/view';
import CharaFormView5 from '../../p-templates/p-form5/view';
interface FormMappingsView {
[key: string]: React.ComponentType<any>;
}
const formMappingsView: FormMappingsView = {
'1': CharaFormView1,
'5': CharaFormView5,
};
export default formMappingsView;
export function getViewForm(id: string) {
return formMappingsView[id];
}- シンプルさ: コード量が少なく、シンプルで理解しやすいです。
- 柔軟性: 任意の文字列キーを使用できるため、動的なキーの使用が容易です。
- 型安全性: デメリットは型安全性は低めで、存在しないキーにアクセスすると
undefinedを返します。
次にキャスト（Cast）です。
import React from 'react';
import CharaFormView1, { CharaFormViewProps1 } from '../../p-templates/p-form1/view';
import CharaFormView5, { CharaFormViewProps5 } from '../../p-templates/p-form5/view';
// FormIdの範囲
const MIN_FORM_ID = 1;
const MAX_FORM_ID = 10;
// FormIdの型定義
export type FormId = string;
type FormMappingsView = {
[key in FormId]: React.ComponentType<any>;
}
// マッピング
const formMappingsView: FormMappingsView = {
'1': CharaFormView1 as React.ComponentType<CharaFormViewProps1>,
'5': CharaFormView5 as React.ComponentType<CharaFormViewProps5>,
};
export default formMappingsView;
// FormIdが有効な範囲内かどうかをチェックする関数
export function isValidFormId(id: string): boolean {
const parsedId = parseInt(id, 10);
return !isNaN(parsedId) && parsedId >= MIN_FORM_ID && parsedId <= MAX_FORM_ID;
}
export function getViewForm(id: string): React.ComponentType<any> | null {
if (!isValidFormId(id)) {
return null;
}
return formMappingsView[id];
}
- 型安全性: より厳密な型チェックが可能で、特定のキーのセットに限定されます。
- 拡張性と保守性: 将来的にフォームの種類が増えた場合に、型システムがより強力なサポートを提供します。
- 複雑さ: コードがやや複雑になり、理解するのに少し時間がかかる可能性があります。
マッピングに使うとき、範囲指定もできます。
プロトタイピングではインデックスシグネチャが使われる傾向がありますけど、中規模以上のプロジェクトではより安全なキャストが使われる傾向にあるようです。
ご参考になれば幸いです。
コメント