TypeScriptでDate型にstring型が入る

概要

TypeScriptは型が定義されているから定義された型以外の値が入ったらエラーになるはず。と勘違いしてました。
静的型付け言語のためコンパイル時や開発エディタ上では型チェックがされるけど、実行時はJavaScriptに変換されるので動的型付けとなる。

何があったかというと

Date型を渡して表示するカレンダーの共通コンポーネントがありました。
画面間で遷移する際に今日日付をパラメータに設定して、遷移先の画面で表示したかったです。
パラメータにnew Date()を設定してら表示されると思ったのに表示されませんでした。

原因

TypeScript上はDate型と設定されているが、実態はstring型でDate型のフォーマット(例）Wed Oct 18 2023 09:27:36 GMT+0900 (GMT+09:00))では共通コンポーネントが受け付けていなかった。
サーバではDateTime型で渡されたプロパティがクライアントでは"YYYYY/MM/DD HHss"でフォーマットされたstring型で扱われていた。

勘違いポイント

• TypeScriptの型チェックはコンパイルまたはコーディング中での話であること
• サーバからDateTime型でクライアントに渡してもDate型になるわけではない

対応

パラメータの定義を以下のようなstringを許容するようにし、共通コンポーネントが対応しているフォーマットにした

hoge: Date | string | null = ''

検討事項

本当は実態と定義が絶対にズレないようにギッチギチにした方がベターな気もした。でも、これは共通コンポーネント側でData型に対応するべきか。
クライアント側で絶対にズレないように頑張る労力に対するメリットがちょっと薄い。引数で渡される側で、型チェック・変換をケアする方がよさそう

参考