Visual studio 在VisualStudioMVC5项目中使用ReactJS和TypeScript_Visual Studio_Reactjs_Typescript

Visual studio 在VisualStudioMVC5项目中使用ReactJS和TypeScript

visual-studio reactjs typescript

Visual studio 在VisualStudioMVC5项目中使用ReactJS和TypeScript,visual-studio,reactjs,typescript,Visual Studio,Reactjs,Typescript,我正在尝试构建一个最小的工作示例，以便在Visual Studio 2015中使用ReactJS和TypeScript 在阅读了大部分教程后，我发现它们都不起作用，也没有一个是针对我的需求的我想以.tsx文件的形式编写组件，使其具有类型安全性，并重用已编写的现有类、定义和接口这些文件应转换为.jsx，以便在cshtml中使用React.render（，document.getElementById（“content”）根据我的项目配置，我要么得到要求不是函数的错误，要么得到somecomp

我正在尝试构建一个最小的工作示例，以便在Visual Studio 2015中使用

ReactJS

和

TypeScript

在阅读了大部分教程后，我发现它们都不起作用，也没有一个是针对我的需求的

我想以

.tsx

文件的形式编写组件，使其具有类型安全性，并重用已编写的现有类、定义和接口

这些文件应转换为

.jsx

，以便在cshtml中使用

React.render（，document.getElementById（“content”）

根据我的项目配置，我要么得到要求不是函数的错误，要么得到somecomponent.tsx中意外的tok<

稍后，还可以从ReactJS.NET使用服务器端渲染来改善性能/用户体验

有没有我缺少的教程描述了如何从头开始使用TypeScript、ReactJS、Visual Studio 2015、MVC5

以下是我的项目属性的

TypeScript Build

选项卡中的设置：

<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>React</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

我的App.ts：

import * as ReactDOM from "react-dom";
import {render} from "./Components/SomeComponent";

render("some name", document.getElementById("content"));

将其转换为App.js：

"use strict";
var SomeComponent_1 = require("./Components/SomeComponent");
SomeComponent_1.render("some name", document.getElementById("content"));
//# sourceMappingURL=App.js.map

Index.cshtml只是：

<body>
    <div>
        <div id="content"></div>
    </div>
    <script src="~/Scripts/App.js"></script>
</body>

此设置有效（我不使用VS，但您可以理解）：

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "module": "commonjs"
    }
}

（您可以选择不同的模块系统）

第页

import { render } from "./main";
render("how are you?", document.getElementById("content"));

main.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Prompt } from "./prompt";

class HelloWorld extends React.Component<{ prompt: string }, void> {
    render() {
        return <div>Hello world><Prompt value={ this.props.prompt } /></div>;
    }
}

export function render(prompt: string, mount: HTMLElement) {
    ReactDOM.render(<HelloWorld prompt={ prompt }/>, mount);
}

编译成

.js

文件的

.tsx

文件也可以与

React.render

一起使用，无需将它们编译成

.jsx

，但这是可能的。请包括您的

tsconfig.json

和您导入的代码。@NitzanTomer在编译成

.js

时，我最后得到一个错误，告诉我

require

不是函数。@NitzanTomer我没有tsconfig.json，因为设置存储在

.csproj

文件中。将把这些部分添加到我的问题中使用

import React=require（“React”）

和

import*as React from“React”

之间的区别是什么？

import*as X from Y

是新的

es6

表单。

import X=require（Y）

正在使用

export=

。在这种情况下，您可以同时使用这两种方法，但我建议使用第一种（

import*…

）。现在我得到的错误是

require未定义。我已经通过添加问题文件的文件内容更新了我的问题，因为我看不到我缺少什么。在“/Components/SomeComponent”的第import{render}行抛出错误
您正在使用CommonJS
进行编译，但您是否正在使用加载js文件？目前我正在尝试使用webpack。但这最终导致未定义React。
import { render } from "./main";
render("how are you?", document.getElementById("content"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Prompt } from "./prompt";

class HelloWorld extends React.Component<{ prompt: string }, void> {
    render() {
        return <div>Hello world><Prompt value={ this.props.prompt } /></div>;
    }
}

export function render(prompt: string, mount: HTMLElement) {
    ReactDOM.render(<HelloWorld prompt={ prompt }/>, mount);
}

import * as React from "react";

export class Prompt extends React.Component<{ value: string }, void> {
    render() {
        return <span>{ this.props.value }</span>;
    }
}

npm install --save react react-dom @types/react @types/react-dom