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

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

0 голосов
/ 29 апреля 2018

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

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

JSX разрешается через JSX Factory В настоящее время, когда 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

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

  • 1029 * расстояние *
  • ЦСИ
    • компоненты
    • 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

Изначально index.html имеет немного больше кодов, однако этот редактор не может распознать его как правильный код, поэтому я суммирую код.

1 Ответ

0 голосов
/ 04 октября 2018

Это действительно проблема. Чтобы использовать React вместе с Preact с использованием typescript, вам необходимо иметь собственные файлы объявлений (typings.d.ts).

Я не знаю точно, как это должно быть сделано. Но я хотел подобную настройку для своего проекта и нашел проект Github, который пытается решить эту проблему.

ссылка: Hotell / реагировать-преакт-набирать текст-взаимодействия

Я еще не пробовал. Но я думаю, что это поможет вам в некоторой степени.

...