没有反应的TypeScript JSX

问题描述：

我想在TypeScript中使用JSX语法，但我不想使用React。没有反应的TypeScript JSX

我已经看到了关于SO的其他相关问题的答案，但没有任何内容是完整的或足够详细的以至于没有任何帮助。我读过手册的和JSX chapter，它没有多大帮助。我不明白语言功能本身是如何工作的。

我试过检查React声明，但它对我来说吸收太大了 - 我需要一个最小的工作示例来演示类型检查的元素，组件和属性。（它不需要工厂功能的工作实现，我最感兴趣的是声明。）

我想，最起码，是一个例子，使下面的工作，类型 - 安全：

var el = <Ping blurt="ya"></Ping>; 

var div = <div id="foo">Hello JSX! {el}</div>;

我想我至少需要申报JSX.IntrinsicElements，以及某种形式的createElement()工厂的功能，但也仅此就我：

declare module JSX { 
    interface IntrinsicElements { 
     div: flurp.VNode<HTMLDivElement>; 
    } 
} 

module flurp { 

    export interface VNode<E extends Element> { 
     id: string 
    } 

    export function createElement<T extends Element>(type: string, props?: any, ...children: (VNode<Element>|string)[]): VNode<Element> { 
     return { 
      id: props["id"] 
     }; 
    } 
} 

class Ping { 
    // ??? 
} 

var el = <Ping blurt="ya"></Ping>; 

var div = <div id="foo">Hello JSX! {el}</div>;

我编译这与tsconfig.json像：

{ 
    "compilerOptions": { 
     "target": "es5", 
     "jsx": "react", 
     "reactNamespace": "flurp" 
    } 
}

悬停在<div>元素和属性id="foo"，我可以看到，编译器理解我的内在要素的声明 - 到目前为止，那么好。

现在，要获得要编译的<Ping blurt="ya">声明，并对类型检查blurt属性，我该怎么做？应该Ping甚至是class或者它可能是function什么？

理想情况下，元素和组件应该有某种共同的祖先，所以我可以拥有一套适用于这两者的共同属性。

我正在寻找创建一些简单和轻量级的东西，可能沿着monkberry的路线，但是使用JSX语法，例如，使用组件如<If>和<For>而不是内联语句。这甚至可行吗？（是否有任何现有项目可供我参考？）

如果任何人都可以提供有关如何使用语言功能本身的最小范例，那将是一个巨大的帮助！

对不起，你罚了一个答案吗？你能举一个例子吗？ –

答

对于你有问题???，也许这有帮助。

有几个方法，你可以声明作出反应，打字稿特性：（不延长React.Component）如果你使用的是纯功能

export interface HelloProps { 
    firstName: string; 
    lastName: string; 
    middleName?: string; 
}

：

首先创建一个接口

export const Hello = (props: HelloProps) => 
    <div> 
    <h1>Hello from {props.firstName} {props.middleName} {props.lastName}.</h1> 
    </div>;

如果您扩展了React。组件，使用通用参数（第一个是属性，第二个是状态）

export class Hello extends React.Component<HelloProps, {}> (
    render() { return <div> 
     <h1>Hello from {this.props.firstName} {this.props.middleName} {this.props.lastName}.</h1> 
    </div>; 
}

没有反应的TypeScript JSX

相关推荐