TypeScript 2.8: преактировать и реагировать в одной компиляции

Question

Согласно приведенному ниже сайту, я думал, что могу использовать preact и реагировать как в одной компиляции. Но когда я пытаюсь использовать эти библиотеки вместе в одном комплименте, возникает конфликт. Я думаю, что у preact и response все еще есть глобальное пространство имен JSX, поэтому пока нельзя смешивать. Если моя конфигурация неверна, пожалуйста, дайте мне знать.

https://blogs.msdn.microsoft.com/typescript/2018/03/27/announcing-typescript-2-8/

JSX разрешается с помощью фабрики JSX. В настоящее время, когда TypeScript использует JSX, он ищет глобальное пространство имен JSX для поиска определенных типов (например, "какой тип компонента JSX?"). В TypeScript 2.8 компилятор попытается найти пространство имен JSX на основе расположения вашей фабрики JSX. Например, если вашей фабрикой JSX является React.createElement, TypeScript попытается сначала разрешить React.JSX, а затем разрешить JSX из текущей области.

Это может быть полезно при смешивании и сопоставлении разных библиотек (например, React и Preact) или разных версий конкретной библиотеки (например, React 14 и React 16), поскольку размещение пространства имен JSX в глобальной области действия может вызвать проблемы.

Вот мой тестовый проект

• ОС: Windows 10 64
• узел: 6.9.5
• нпм: 3.10.10
• tsc: 2.8.3
• Webpack: 4.6.0
• webpack-cli: 2.0.15

структура каталогов

• расстояние
• ЦСИ
  • компоненты
  • PreactUser.tsx
  • ReactUser.tsx
  • index.tsx
• index.html
• package.json
• tsconfig.json
• webpack.config.json

src / components / PreactUser.tsx (первая строка: /** @jsx h */)

import {h, Component} from 'preact';

export interface HelloWorldProps {
    name: string
}

export default class PreactUserComp extends Component<HelloWorldProps, any> 
{
    render (props: HelloWorldProps) {
        return <h1>Hello {props.name}!</h1>
    }
}

Первоначально первая строка - /** @jsx h */. Но этот редактор не может распознать его как правильный код.

src / components / ReactUser.tsx (первая строка: / ** @jsx React.createElement * /)

import * as React from "react";

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

interface Person {
    firstName: string;
    lastName: string;
}
class User implements Person {
    firstName: string;
    lastName: string;
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}
function formatName(user:User): string {
    return user.firstName + ' ' + user.lastName;
}

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

src / index.tsx (первая строка: /** @jsx h */)

import { h, render } from 'preact';
import PreactUserComp from './components/PreactUser';

render(<PreactUserComp name="Preact" />, document.querySelector('#app'));

package.json

{
    "name": "typescript-preact-react",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@types/react": "^16.3.13",
        "@types/react-dom": "^16.0.5",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "preact": "^8.2.7",
        "ts-loader": "^4.2.0",
        "typescript": "^2.8.3",
        "webpack": "^4.6.0"
    },
    "devDependencies": {
        "typescript": "^2.8.3",
        "webpack": "^4.6.0",
        "webpack-cli": "^2.0.15"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "module": "commonjs",
        "jsx": "react",
        "target": "es5"
    },
    "include": [
        "src/*.ts",
        "src/*.tsx"
    ]
}

webpack.config.js

var path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    },
    module: {
        rules: [
        {
            test: /\.tsx?$/,
            exclude: /node_modules/,
            loaders: ['ts-loader']
        }
        ]
    }
}

index.html