JavaScript 檢查與 Typescript

Question

我的反應 js 應用程序中有下一個代碼：

interface Input {
  name: string;
  type?: 'email' | 'text';
}

const Input = ({type}: Input) => {

return <input type={type}/>
}

該組件只能接收類型email和text 。 如果用戶將添加作為道具number ，那么編譯器將在編譯時拋出錯誤。 前任：

<Input type="number"/>

Type '"password"' is not assignable to type '"text" | "email". 

，但同時我們無論如何都可以輸入：

<Input type="number"/>

即使出現此錯誤並抑制錯誤。
問題：我應該像我的情況一樣只使用 typescript 來限制type道具，還是應該使用 javascript 來排除type為number的情況？

Answer 1

這是安全性、速度和您自己的開發時間之間的權衡。 您需要根據您的用例來決定：這是一個判斷問題，而不是通用最佳實踐。 盡管運行時檢查會使您的代碼在運行時測試時更安全、更完整，但對於您是唯一用戶且您使用次數有限的組件而言，它可能不會提供太多價值。

我可以在這里看到任何一種情況； 您需要根據您對收益和成本的理解來做出決定。

即使 TypeScript 不太可能出錯，也是添加額外防御檢查的好時機：

• 在大量使用any 、隱式或顯式的遷移代碼庫中
• 在有外部用戶或大量內部用戶的大型代碼庫中
• 風險很高的地方：組件很關鍵，否則誤用會在以后引入細微的錯誤
• 在組件初始化或每個應用程序很少發生的情況下，額外檢查的開銷可以忽略不計
• 對於經常動態或用戶提供的值，如value
• 其他地方的自動化測試很難，或者不太可能捕捉到這個

相反，在這些情況下，運行時防御檢查可能有點矯枉過正：

• TypeScript 的使用是地方性的：不太可能有人會覆蓋類型檢查
• 在小型代碼庫中，您可能是唯一一個調用它的人
• 在低風險環境中，要么是因為行為顯然是錯誤的，要么是后果很小
• 在緊密的內部循環或運行時檢查在性能方面會很昂貴的地方
• 對於不太可能由用戶提供的值，如type
• 其他測試可能會發現這個