TypeScript中变量后冒号的含义及FC<GreetingProps>作用解析

1. 变量名后冒号的作用 #

在TypeScript中，const Greeting:FC<GreetingProps>里的冒号，是显式指定变量的类型。它告诉TypeScript编译器：这个变量的类型必须严格匹配冒号后面的类型定义，编译器会基于这个类型做后续的类型检查和推断。

简单来说，就是给变量“贴标签”，明确它的类型边界，避免类型错误。

2. FC的含义 #

FC是React.FunctionComponent的缩写，是React提供的一个泛型类型，专门用来描述React函数组件的类型：

• 它本身定义了函数组件的基本结构：一个接收props参数、返回React元素的函数
• <GreetingProps>是给这个泛型传入的类型参数，用来约束组件接收的props的结构。

在你的代码里，FC<GreetingProps>表示：
这个函数组件必须接收符合GreetingProps类型定义的props（也就是必须包含name: string属性），同时组件的返回值必须是合法的React元素。

这样TypeScript会自动帮你做两件事：

• 检查传入组件的props是否符合要求（比如漏传name、name不是字符串都会报错）
• 确保组件内部使用props时的类型安全（比如你能确定name是字符串类型）

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