建议

🔍 搜索词

• jsx 功能组件属性
• 属性类型
• 参数类型
• jsx 属性强制转换

✅ 可实现性检查清单

我的建议符合以下指导原则：

• 这不会对现有的 TypeScript/JavaScript 代码造成破坏性的更改
• 这不会改变现有 JavaScript 代码的运行时行为
• 这可以在不根据表达式的类型发出不同的 JS 的情况下实现
• 这不是运行时特性(例如库功能、带有 JavaScript 输出的非 ECMAScript 语法、新的 JS 语法糖等)
• 这个特性将与 TypeScript's Design Goals 的其他部分一致。

⭐ 建议

基于 #14729 的概念
在 JSX 命名空间中引入一个名为 convertProperties 的新函数(可能会更改),该函数接受一个组件并返回表示其 JSX props 的对象。

declare namespace JSX {
    // today's behavior
    function convertProperties<P>(component: (JSX.ElementClass & { new(): { props: P } }) | ((props: P) => JSX.Element)): P;
    // alternatively, if this were to supercede IntrinsicAttributes rather than just working alongside it
    function convertProperties<P>(component: (props: P) => JSX.Element): P & JSX.IntrinsicAttributes;
    function convertProperties<P, T extends { props: P }>(component: JSX.ElementClass & { new(): T }): P & JSX.IntrinsicAttributes & JSX.IntrinsicClassAttributes<T>;
}

当类型检查器看到一个组件表达式(例如 <MyComponent prop={val} /> ),它将通过在提供的组件类型上执行虚拟调用 JSX.convertProperties 并使用返回类型来确定所需属性的类型。例如：

type SignalProps<P> = { [K in keyof P]: () => P[K] };
declare namespace JSX {
    function convertProperties<P>(component: ((props: SignalProps<P>) => JSX.Element)): P;
}
type MyProps = SignalProps<{
    title: string;
    count: number;
}>;
function MyComponent({ title, count }: MyProps) {
    return <div>{title()}: {count()}</div>;
}
function App() {
    // typeof MyComponent == (props: { title: () => string, count: () => number }) => JSX.Element
    // typeof JSX.convertProperties(MyComponent) == { title: string, count: number }
    return <MyComponent title="Hello, World!" count={3} />;
}

📃 动机示例

Solid 框架与 React 非常相似，但与 React 在 useMemo 和 useEffect 中的显式依赖项数组不同，Solid 需要调用函数来检索状态值，从而允许基于上次 memo/effect 回调运行时获取的先前状态跟踪隐式依赖关系(请参阅 https://www.solidjs.com/guides/reactivity#introducing-primitives)。这与 Knockout 的可观察对象类似。
然而，当涉及到组件属性时，Solid 使用代理解引用而不是显式函数调用。这导致了一个常见的陷阱，即像在 React 中那样解构 props 对象会阻止跟踪依赖关系(请参阅 https://www.solidjs.com/guides/faq#why-do-i-lose-reactivity-when-i-destructure-props)。另一种设计可能是让 jsx 工厂函数在捆绑到 props 对象之前为每个 prop Package 一个响应式getter。
通过将属性类型在组件创建和 JSX 使用之间分开，TypeScript 将能够在新的网络框架中支持这种设计。

💻 用例

请参阅上面的内容。
另一个类似的用例可能是：

type DetailedProps<P> = {
    [K in keyof P]: {
        value: P[K];
        prevValue?: P[K];
    }
}
declare namespace JSX {
    function convertProperties<P>(component: ((props: DetailedProps<P>) => JSX.Element)): P;
}

此功能还将允许执行 JSX.IntrinsicAttributes 的相反操作。例如：

declare namespace JSX {
    function convertProperties<P>(component: ((props: P) => JSX.Element)): Omit<P, 'parent'>;
}
type PropsWithParent<T> = T & {
    parent?: JSX.Element;
};
function MyComponent({ parent }: PropsWithParent<{}>) {
    // ...
}
function App() {
    return <MyComponent />;
}