如何在VSCode中查看React函数组件预定义类型的展开Props？

问题场景 #

当单独定义Props类型来声明React组件时：

type LogInScreenProps = {
  isAuthenticated: boolean
  redirectTo?: string
}

export const LogInScreen: React.FC<LogInScreenProps> = ({ isAuthenticated, redirectTo }) => { ... }

在VSCode中悬浮鼠标到LogInScreen组件上，仅会显示类型别名的引用：

(alias) const LogInScreen: FC<LogInScreenProps>
import LogInScreen

但如果将Props类型内联定义，悬浮时就能直接看到完整的Props结构：

export const LogInScreen: React.FC<{
  isAuthenticated: boolean
  redirectTo?: string
}> = ({ isAuthenticated, redirectTo }) => { ... }

悬浮显示效果：

(alias) const LogInScreen: FC<{
    isAuthenticated: boolean;
    redirectTo?: string | undefined;
}>
import LogInScreen

可行解决方案 #

方案1：利用@deprecated注释触发类型展开

给单独定义的Props类型添加/** @deprecated */注释，TypeScript会在悬浮时自动展开显示完整类型结构：

/** @deprecated */
type LogInScreenProps = {
  isAuthenticated: boolean
  redirectTo?: string
}

export const LogInScreen: React.FC<LogInScreenProps> = ({ isAuthenticated, redirectTo }) => { ... }

注：该注释仅用于触发类型展开，无需真的废弃此类型。

方案2：全局开启类型别名展开

在VSCode的settings.json中添加以下配置，让TypeScript默认展开所有类型别名的显示：

"typescript.preferences.displayExpandTypeAliases": true

此设置会影响所有类型别名的悬浮显示效果，适合希望全局查看完整类型的场景。

方案3：通过临时变量推导类型

先定义一个包含Props结构的临时变量，再通过typeof推导类型，悬浮时会自动展开结构：

const _propsTemplate = {
  isAuthenticated: false as boolean,
  redirectTo: "" as string | undefined
}

type LogInScreenProps = typeof _propsTemplate

export const LogInScreen: React.FC<LogInScreenProps> = ({ isAuthenticated, redirectTo }) => { ... }

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