沒有反應的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>而不是內聯語句。這甚至可行嗎？（是否有任何現有項目可供我參考？）

如果任何人都可以提供有關如何使用語言功能本身的最小范例，那將是一個巨大的幫助！

來源

2017-01-09 mindplay.dk

對不起，你罰了一個答案嗎？你能舉一個例子嗎？ –

對於你有問題???，也許這有幫助。

有幾個方法，你可以聲明作出反應，打字稿特性：（不延長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>; 
}

來源

2017-02-24 16:23:29

沒有反應的TypeScript JSX

回答

相關問題