TypeScript 是一种由微软开发的 JavaScript 超集，它为 JavaScript 增加了静态类型检查、类、接口、泛型等特性，使得代码更加健壮、可维护、可扩展。但是在使用 TypeScript 进行开发过程中，我们也会遇到一些常见的坑。本文将介绍一些常见的坑，并提供解决方案和示例代码。
坑一：类型兼容性
TypeScript 的类型兼容性是基于结构子类型的，即只要两个类型的成员结构兼容，那么它们就是兼容的。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --------- --- - ----- ------- ---- ------- ------- ----- - --- ------- ------ - - ----- ------ ---- - -- --- ---- --- - - ----- -------- ---- -- ----- -- -- ------------------- -- ------ - ---- -- -- --- - ------- -- -----展开代码
在上面的例子中，Animal 和 Cat 都有 name 和 age 属性，因此它们是兼容的。但是 Cat 还有一个 meow 方法，因此它不能赋值给 Animal，反过来也是不行的。
解决方案：
如果你想让 Cat 能够赋值给 Animal，可以使用类型断言：
animal = cat as Animal; // OK
或者使用类型兼容性更加严格的接口继承：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --------- --- ------- ------ - ------- ----- - --- ------- ------ - - ----- ------ ---- - -- --- ---- --- - - ----- -------- ---- -- ----- -- -- ------------------- -- ------ - ---- -- -- --- - ------- -- -----展开代码
坑二：类型推断
TypeScript 的类型推断可以让我们省略类型注解，但是有时候它可能会出现一些奇怪的行为。例如：
let x = 3; x = 'hello'; // Error
在上面的例子中，我们没有给 x 指定类型，TypeScript 会根据它的初始值推断出它的类型为 number。但是当我们试图将一个字符串赋值给它时，就会出现类型错误。
解决方案：
给 x 显式指定类型：
let x: number = 3; x = 'hello'; // Error
坑三：类型守卫
TypeScript 的类型守卫可以让我们在运行时判断一个变量的类型，并在正确的分支中使用它。例如：
-- -------------------- ---- ------- --------- ---- - ------ ----- - --------- ---- - ------- ----- - -------- -------------- ---- - ---- - -- --- - --- --- - -------------- -- ---- ---------- ----- - ---------- - ---- -- ---- ---------- ----- - ----------- - ---- - -- ------ --- -- --- - ---- -- -展开代码
在上面的例子中，我们使用 instanceof 运算符判断 pet 的类型，并在正确的分支中使用它。但是当 pet 的类型是联合类型时，TypeScript 无法自动推断出正确的类型，需要手动进行类型断言：
-- -------------------- ---- ------- --- --- - -------------- -- ----- -- ---------- - ---- -- ------------ - ---- -- ----- -- ----------- - ---- -- ------------- - ---- - -- ------ --- -- --- - ---- -- -展开代码
这样做非常麻烦，并且容易出错。
解决方案：
使用自定义类型守卫：
-- -------------------- ---- ------- -------- ----------- ---- - ------ --- -- ---- - ------ ---- -- --------- --- ---------- - -------- ----------- ---- - ------ --- -- ---- - ------ ---- -- ---------- --- ---------- - --- --- - -------------- -- ------------- - ---------- - ---- -- ------------- - ----------- - ---- - -- ------ --- -- --- - ---- -- -展开代码
这样做可以让代码更加清晰、健壮、可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1b221a941bf71343937a0
