Typescript中如何从React组件props解构函数及解决相关语法问题

问题1：function属性解构失败的原因 #

function是JavaScript/TypeScript的保留关键字，不能直接作为变量名使用。你在解构props时相当于尝试声明一个名为function的局部变量，这属于语法错误。
有两种解决方案：

• 优先修改Props接口的属性名，替换为非保留字的语义化命名，比如onTrigger、handleCallback等，符合React props的命名规范：

interface Props {
    day: string;
    options: string[];
    id: string;
    onTrigger: () => void;
}

export const Group = ({ day, options, id, onTrigger } : Props) => {
    // 组件逻辑
}

• 如果你必须保留function作为属性名，解构时可以对该字段重命名：

export const Group = ({ day, options, id, function: onFunction } : Props) => {
    // 后续使用onFunction调用即可
}

额外提示：React组件名必须使用大驼峰命名，你当前的小写group不符合规范，渲染时会被识别为原生HTML标签，建议改为Group。

问题2：const组件无法默认导出的原因 #

你当前写的export const group = ...属于命名导出，如果要做默认导出，不能直接在const声明前加export default，需要分开写：

// 先声明组件
const Group = ({ day, options, id, onTrigger } : Props) => {
    // 组件逻辑
}
// 再默认导出
export default Group;

如果要写匿名的默认导出也可以，但不利于调试时的组件栈识别，不推荐：

export default ({ day, options, id, onTrigger } : Props) => {
    // 组件逻辑
}

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