React Native中useNavigation两种TypeScript类型写法的区别

最近从JavaScript转向React Native + TypeScript，在对useNavigation钩子做类型检查时遇到两种写法，都能正常运行，但想明确它们的区别：

第一种写法：

const nav: typechecking = useNavigation()

第二种写法：

const nav = useNavigation<typechecking>()

我个人理解是第二种限制了useNavigation的返回类型，第一种是检查返回值是否符合指定类型，想知道正确解释是什么？

两种写法的核心区别 #

• 第一种：变量类型注解
  这里是给变量nav直接标注typechecking类型，TypeScript会先让useNavigation()返回它的默认类型（比如React Navigation内置的NavigationProp），再检查这个默认返回值是否可以安全赋值给typechecking类型。如果默认类型和typechecking不兼容（比如缺少必要方法），TypeScript会直接抛出赋值错误。本质是对变量的类型做事后校验。

• 第二种：泛型参数指定
  useNavigation本身是一个泛型函数，这种写法是直接给它传入泛型参数typechecking，告诉TypeScript：这次调用的useNavigation要返回typechecking类型的对象，而不是它的默认类型。这相当于提前定义了钩子的返回类型，是从源头约束导航对象的类型。

实际场景中的差异 #

• 如果typechecking和useNavigation默认返回类型不兼容，第一种写法会立刻在赋值阶段报错；第二种写法如果传入的泛型参数不符合导航对象的实际结构，可能在调用导航方法时才会暴露类型问题（不过React Navigation的泛型设计就是用来匹配路由配置，合理使用的话不会有这个问题）。
• React Navigation官方更推荐第二种写法，因为它更贴合钩子的类型设计，能更精准地约束导航对象的可用方法和路由参数，避免类型不匹配的潜在问题。

内容的提问来源于stack exchange，提问作者KingArthur