TypeScript JSX без ответа

Question

Я хотел бы использовать синтаксис JSX в TypeScript, но я не хочу использовать React.

Я видел ответы на другие связанные вопросы здесь, но ничего не было полным или достаточно подробным, чтобы оказать какую-либо помощь. Я прочитал и справочник 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>, а не встроенные операторы. Это возможно? (Есть ли какой-либо существующий проект по этим строкам, на который я могу ознакомиться?)

Пожалуйста, если кто-нибудь может предоставить рабочий минимальный пример использования самой языковой функции, это будет огромной помощью!

Answer 1

По вопросу, где у вас есть ???, возможно, это помогает.

Есть несколько способов, вы можете объявить Реагировать свойства в машинописном:

Сначала создайте интерфейс:

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

Если вы используете чистую функцию (не распространяющие React.Component)

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>; 
}