TypeScript, React và Gulp.js - xác định phản ứng

Question

Tôi đang cố gắng tạo luồng công việc, nơi tôi có thể viết các mô-đun React bằng cách sử dụng TypeScript và biên dịch tự động sang JavaScript qua Gulp.js. Tôi đang sử dụng TypeScript 1.6.2, gulp-react và gulp-typescript.

tập tin .tsx tôi trông như thế này bây giờ:

/// <reference path="../../../../typings/react/react.d.ts" /> 
import React = __React; 
interface HelloWorldProps { 
    name: string; 
} 

var HelloMessage = React.createClass<HelloWorldProps, any>({ 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
}); 
React.render(<HelloMessage name="helloooo" />, document.getElementById('test')); 

Vấn đề của tôi là dòng này: import React = __React;

Khi tôi rời nó ra, tôi nhận được lỗi

lỗi TS2304: Không thể tìm tên 'React'.`

khi biên dịch .tsx thành .js (nhưng nó vẫn biên dịch sang JSX và tôi có thể sử dụng đầu ra). Khi tôi đặt nó vào, tôi có thể biên dịch mà không có lỗi, nhưng khi tôi cố gắng sử dụng các tập tin bên trong trình duyệt, tôi nhận được một Uncaught ReferenceError: __React is not defined, tất nhiên.

Đây là cách gulptask của tôi trông giống như:

gulp.task('gui-tsx', function() { 
    var tsResult = gulp.src(config.guiSrcPath + 'tsx/app.tsx') 
     .pipe(ts({ 
      jsx: 'react' 
     })); 
    return tsResult.js.pipe(gulp.dest(config.guiSrcPath + 'jsx')); 
}); 

Có một cách giải quyết cho việc này? Hay tôi đang thiếu thứ gì đó ở đây?

Answer 1

OK, tôi đã tìm được giải pháp. Đầu tiên cài đặt các Phản ứng định nghĩa toàn cầu qua tsd:

tsd install react-global 

này sẽ tạo ra một tập tin, react-global.d.ts, trong thư mục typings của bạn, mà bạn phải tham khảo trong bạn tập tin thành phần gốc (đường dẫn là tương đối, vì vậy điều chỉnh nó để bạn nhu cầu):

/// <reference path="../../../../typings/react/react-global.d.ts" /> 

Sau đó nó biên dịch không có lỗi.

Answer 2

nơi tôi có thể viết phản ứng module sử dụng nguyên cảo và biên dịch tự động để js qua ngụm

Rất khuyên bạn không sử dụng các module toàn cầu. Thay vào đó biên dịch với --module commonjs và nắm lấy hệ sinh thái phản ứng/webpack/nútjs.

Bạn có thể kiểm một ứng dụng ví dụ ở đây: https://github.com/basarat/tsb/tree/master