typescript html ui,javascript – 如何使用Typescript设置Material-UI？

我已经遇到一些问题,添加Material UI到我的React项目,它是用Typescript编程的.

根据本教程,我首先先添加一个react-tab-event-plugin.

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap

// Can go away when react 1.0 release

// Check this repo:

// https://github.com/zilverline/react-tap-event-plugin

injectTapEventPlugin();

这样做,我会收到一个关于缺少默认导出的错误.

ERROR in ./src/index.tsx

(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.

添加材质UI

import getMuiTheme from 'material-ui/styles/getMuiTheme';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

抛出以下构建错误

ERROR in ./src/containers/index.tsx

(8,25): error TS2307: Cannot find module 'material-ui/styles/getMuiTheme'.

ERROR in ./src/containers/index.tsx

(9,30): error TS2307: Cannot find module 'material-ui/styles/MuiThemeProvider'.

我的Webpack Config是非常简单的,并且在添加打字之后,可以使用每个React npm模块,直到现在.

var cssnext = require('postcss-cssnext')

var postcssImport = require('postcss-import')

var ExtractTextPlugin = require('extract-text-webpack-plugin')

// noinspection JSUnresolvedVariable

module.exports = {

entry: {

app: './src/index.tsx',

lib: [

'./node_modules/react/react.js',

'./node_modules/react-dom',

'./node_modules/normalize.css/normalize.css'

]

},

output: {

path: './dist',

filename: '[name].js'

},

devtool: 'source-map',

devServer: {

contentBase: '/dist/',

inline: true,

port: 3333,

host: '0.0.0.0'

},

resolve: {

// Add `.ts` and `.tsx` as a resolvable extension.

extensions: [ '', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.html' ],

modulesDirectories: ['src', 'node_modules']

},

module: {

loaders: [

// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.

{ test: /\.ts(x?)$/, loader: 'babel-loader!ts-loader' },

{ test: /\.html$/, loader: 'file?name=[name].[ext]' },

{ test: /\.json$/, loader: 'json' },

{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') }

],

preLoaders: [

// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.

{ test: /\.js$/, loader: 'source-map-loader' }

]

/* loaders: [

{

test: /\.js$/,

exclude: /node_modules/,

loader: 'babel-loader!ts-loader',

query: {

presets: [

'es2015',

'react'

]

}

}

]*/

},

plugins: [

new ExtractTextPlugin('[name].css', {

allChunks: true

})

],

postcss: function (webpack) {

return [

postcssImport({

addDependencyTo: webpack

}),

cssnext({

browsers: 'last 2 versions, ie >= 9'

})

]

}

// When importing a module whose path matches one of the following, just

// assume a corresponding global variable exists and use that instead.

// This is important because it allows us to avoid bundling all of our

// dependencies, which allows browsers to cache those libraries between builds.

/*

externals: {

'react': 'React',

'react-dom': 'ReactDOM'

}

*/

}

打开两个,反应点击事件插件和Material-UI.

怎么了？