TypeScript泛型函数赋值的变量声明方式及最佳实践问询

一、泛型函数调用的变量声明方式：是否遗漏、适用场景与最佳实践 #

你提到的三种方式之外，还有第四种场景：既不指定变量类型，也不传入泛型函数的类型参数，示例如下：

const book = getSomething();

这种情况的行为取决于泛型函数的定义：如果函数有默认泛型参数（比如function getSomething<T = unknown>(): T {...}），则会使用默认类型；如果没有默认参数，TypeScript会尝试通过函数内部逻辑、传入参数（如果有）或上下文推断T，否则会推断为unknown（严格模式下）或any。

四种方式的适用场景 #

• 显式指定变量类型，函数不传入泛型：const book: Book = getSomething();
  适合当变量类型明确，且TypeScript能通过变量类型反向推断泛型函数的T时使用。但如果函数的泛型有复杂约束，或者反向推断无法匹配T的约束，会导致编译错误。
• 不指定变量类型，函数传入泛型：const anotherBook = getSomething<Book>();
  这是最通用的写法，直接明确泛型函数的返回类型，变量类型由函数返回值自动推断，代码简洁且类型明确，适配绝大多数场景。
• 同时指定变量类型和泛型函数类型：const thirdBook: Book = getSomething<Book>();
  本质是冗余写法，除非你需要强制校验函数返回类型与变量类型的一致性（如果两者不匹配会直接报错），否则完全没必要，反而增加代码量。
• 都不指定：const book = getSomething();
  仅在泛型函数有合适的默认泛型参数，或TypeScript能通过上下文自动推断出T时适用，否则会得到unknown或any，不推荐在严格类型检查中使用。

最佳实践 #

优先选择不指定变量类型，函数传入泛型的写法：通过泛型函数传入类型参数，让变量自动推断类型。这种写法兼顾简洁性与类型安全性，避免冗余代码。如果变量需要是某个更具体的子类型（比如Book的子类），而泛型函数返回父类型，再考虑使用显式指定变量类型的方式；第三种和第四种尽量避免，除非有特殊的校验或默认类型需求。

二、React useState两种写法的非语法差异 #

两种写法分别是：

// 写法1：通过useState泛型指定状态类型
const [fourthBook, setFourthBook] = useState<Book>(new Book(...));

// 写法2：显式指定元组类型
const [fifthBook, setFifthBook]: [Book, React.Dispatch<React.SetStateAction<Book>>] = useState(new Book(...));

除了语法便捷性，两者的非语法差异主要有：

1. 类型依赖方式不同
   • 写法1依赖React内置的useState泛型定义自动推断setter类型，完全贴合React的类型设计。如果未来React更新useState的返回类型（比如调整setter的参数约束），代码会自动适配。
   • 写法2是手动硬编码元组类型，相当于脱离了React的泛型推断逻辑。如果React的类型定义发生变更，你的代码需要手动修改元组类型才能兼容。
2. 处理可选状态的灵活性不同
   • 写法1可以轻松处理可选状态（比如useState<Book | null>(null)），只需要修改泛型参数即可，setter类型会自动更新为Dispatch<SetStateAction<Book | null>>。
   • 写法2需要同时修改元组的两个类型（[Book | null, Dispatch<SetStateAction<Book | null>>]），繁琐且容易出错。
3. 类型校验的报错位置不同
   • 写法1中，如果初始值的类型与泛型参数不兼容，TypeScript会直接在useState调用处报错，提示初始值不符合指定类型。
   • 写法2中，错误会出现在变量声明处，因为元组类型与useState返回值不匹配，但实际校验逻辑和写法1一致。

三、指定状态类型时自动推断setter类型（不使用any） #

如果你想显式指定状态变量fifthBook的类型，同时让TypeScript自动推断setFifthBook的类型，其实写法1已经满足需求：通过useState<Book>(...)指定泛型参数后，fifthBook的类型自动为Book，setFifthBook的类型会由React的泛型定义自动推断为Dispatch<SetStateAction<Book>>，不需要手动指定。

如果在某些复杂场景下，你必须在变量声明处显式指定fifthBook的类型（比如状态初始值是子类，你需要将其约束为父类型Book），可以用类型断言实现：

const [fifthBook, setFifthBook] = useState(new SubBook(...)) as [Book, typeof setFifthBook];

这里typeof setFifthBook会让TypeScript自动推断setter的类型，而fifthBook被断言为Book类型，避免了手动硬编码setter的类型。

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