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
• 其他测试可能会发现这个