React TypeScript函数与组件声明疑问：为何部分写法报错

一、自定义Hook的泛型写法问题 #

正确写法 #

// 箭头函数写法：泛型参数放在函数参数列表前，逗号用于避免与JSX标签混淆（.tsx文件中需注意）
export const useDebounce = <T,>(val: T): T => {
    const [debouncedValue, setDebouncedValue] = useState<T>(val)
    return debouncedValue;
};

// 函数声明写法：泛型参数直接跟在函数名后
export function useDebounce<T>(val: T): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(val)
    return debouncedValue;
}

错误写法 #

export const useDebounce<T,> = (val: T): T => {
    const [debouncedValue, setDebouncedValue] = useState<T>(val)
    return debouncedValue;
};

错误原因解析 #

TypeScript语法规则明确：泛型参数属于函数本身，不能直接附加在变量声明的标识符后。

• 错误写法将<T,>放在变量名useDebounce后，不符合TS语法逻辑，解析器会抛出'(' expected.的语法错误。
• 语法错误导致TS无法正确推断函数类型，变量useDebounce被隐式标记为any，对应提示"Variable 'useDebounce' implicitly has an 'any' type."。
• 泛型参数位置错误，TS无法识别其为函数的泛型参数，函数体内使用T时会被当作未定义变量，抛出"Cannot find name 'T'."的错误。

注意：正确箭头函数写法中的<T,>（带逗号）是为了在.tsx文件中避免与JSX的<>标签混淆，.ts文件中也可写成<T>。

二、函数组件的类型标注问题 #

正确写法 #

export const SearchComponentDebounce: React.FC = () => {
    return <div></div>
}

错误写法 #

export const SearchComponentDebounce = (): React.FC => {
    return <div></div>
}

错误原因解析 #

React.FC（Function Component）是类型别名，表示接受props参数并返回React元素的函数：

• 正确写法：直接将变量SearchComponentDebounce的类型标注为React.FC，赋值的箭头函数返回<div />（ReactElement），完全符合React.FC的类型要求。
• 错误写法：把箭头函数的返回值类型标注为React.FC，但函数实际返回的是React元素，而React.FC是函数类型，两者类型不匹配，因此抛出错误：

  Type 'Element' is not assignable to type 'FC<{}>'.
    Type 'ReactElement<any, any>' provides no match for the signature '(props: {}): ReactNode | Promise<ReactNode>'.
  

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