TypeScriptで型安全なコードを書くために意識していること【実体験】

// ❌ TextInputProps を全部受け取っている // このコンポーネントが本当に必要なのは crmField と field だけなのに const UrlInputFieldCmp: React.FC<TextInputProps> = (props) => { // … }; // ✅ Pick で必要なものだけに絞る // このコンポーネントが受け取れるのは crmField と field だけ const UrlInputFieldCmp: React.FC<Pick<TextInputProps, ‘crmField’ | ‘field’>> = (props) => { const { crmField, field } = props; return ( <TextInputFieldCmp crmField={crmField} field={field} keyboardType=”url” autoCapitalize=”none” autoCorrect={false} textContentType=”URL” /> ); };

// ❌ field.value が null/undefined の場合に警告が出る // TextInput の value に null を渡すとコンポーネントが警告を出す <TextInputFieldCmp value={field.value} /> // ✅ ?? 演算子でフォールバックを設定する // null または undefined の場合は空文字列にする <TextInputFieldCmp value={field.value ?? ”} />

// || との違い const value1 = 0 || ‘default’; // ‘default’（0はfalsyなので） const value2 = 0 ?? ‘default’; // 0（0はnull/undefinedではないので） // フォームの値では ?? の方が正しい // 0 という値を「入力なし」として扱いたくない場合は ?? を使う

// ❌ JSON.parseの結果はany型 const parsed = JSON.parse(meetingMinutes.data); // parsed.duration にアクセスできるが型チェックが効かない setDuration(parsed.duration); // ✅ 型アサーションで型を明示する const parsed = JSON.parse( meetingMinutes.data as string // data は string | null なので string に絞る ) as { duration?: number }; // パースした結果の型を明示 // duration は number | undefined として扱われる if (parsed.duration) { setDuration(parsed.duration); // 型チェックが効く }

// src/util/textInputField.ts // URL のバリデーション：scheme（https:// など）があるか export const isValidUrl = (value: string): boolean => { try { const url = new URL(value); return url.protocol === ‘https:’ || url.protocol === ‘http:’; } catch { return false; } }; // Email のバリデーション：@ を含むか export const isValidEmail = (value: string): boolean => { return value.includes(‘@’) && value.length > 3; }; // Phone のバリデーション：数字・ハイフン・+ のみか export const isValidPhone = (value: string): boolean => { return /^[0-9+\-\s()]*$/.test(value); };

// テストも書きやすくなる // src/util/textInputField.test.ts import { isValidUrl, isValidEmail, isValidPhone } from ‘./textInputField’; describe(‘isValidUrl’, () => { it(‘https:// から始まるURLはtrue’, () => { expect(isValidUrl(‘https://example.com’)).toBe(true); }); it(‘schemeがないURLはfalse’, () => { expect(isValidUrl(‘example.com’)).toBe(false); }); }); describe(‘isValidEmail’, () => { it(‘@を含むメールアドレスはtrue’, () => { expect(isValidEmail(‘test@example.com’)).toBe(true); }); it(‘@を含まない文字列はfalse’, () => { expect(isValidEmail(‘testexample.com’)).toBe(false); }); });