javascript - traductor - typescript example

¿Cómo configurar la IU de material para reaccionar con Typescript?

Question

He corrido algunos problemas para agregar UI material a mi proyecto React, que está programado con Typescript.

De acuerdo con el tutorial, comienzo agregando el react-tab-event-plugin primero.

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();

Al hacer esto, aparece un error sobre la exportación predeterminada faltante.

ERROR in ./src/index.tsx
(4,8): error TS1192: Module ''''react-tap-event-plugin'''' has no default export.

Agregar interfaz de usuario de material

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

Lanza el siguiente error de compilación

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''.

Mi configuración de Webpack es bastante fácil y funcionó con cada modulo de React npm cuando agregué los typings, hasta ahora.

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''
   }
   */
}

Se instalaron Typing para ambos, react-tap-event-plugin y Material-UI.

¿Qué pasa?

Answer 1

1. Descargar Material-UI
2. Extraer a cualquier carpeta
3. Abrir Command Prompt y Establecer ruta a /examples/webpack-example
4. Ejecute el npm install en cmd

Nota n. ° 1: antes de hacer esto, debe instalar el nodo js en su sistema

Para empresas, necesita configurar el servidor proxy también

npm config set proxy http://proxy.company.com:8080 

npm config set https-proxy http://proxy.company.com:8080

Para obtener ayuda, consulte esto ¿Hay alguna manera de hacer que npm install (el comando) funcione detrás del proxy?

5. Luego, ejecute npm start para que ejecute el servidor en localhost:3000

Nota n. ° 2: también cambiará su número de puerto en webpack-dev-server.config.js en la carpeta raíz

Espero que esto ayude. Si tiene algún problema con la instalación, comente aquí

Answer 2

Tu comentario ya señaló el problema central. Las cifras no están actualizadas, o en otras palabras: completamente desactivadas.

Para abreviar, parece que la estructura de material-ui ha cambiado y todo es camelcase (en lugar de guiones) y en la raíz, no la carpeta de la lib ahora.

Para solucionarlo, abra su archivo material-ui/index.d.ts y comience a cambiar todo, desde

declare module ''material-ui/lib/text-field'' {

a

declare module ''material-ui/TextField'' {

Si no está seguro, consulte la carpeta node_modules/material-ui para ver la estructura del archivo. El nombre del módulo ambiente debe coincidir con la estructura del archivo subyacente.

Esto probablemente no solucionará todos tus problemas, pero podría ser un comienzo.

Answer 3

@ types / material-ui ahora está disponible y se exporta desde su fuente DefinitelyTyped .

npm install @types/material-ui --save-dev

npm install @types/react-tap-event-plugin --save-dev

Luego, puede hacer lo siguiente:

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

// Needed for onTouchTap
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

A continuación, use la IU material de esta manera:

import * as React from ''react'';
import getMuiTheme from ''material-ui/styles/getMuiTheme'';
import {MuiThemeProvider, lightBaseTheme} from "material-ui/styles";

const lightMuiTheme = getMuiTheme(lightBaseTheme);

class Root extends React.Component<any, any> {
  render() {
    return (
      <MuiThemeProvider muiTheme={lightMuiTheme}>
        <MyComponent/>
      </MuiThemeProvider>
    )
  }
}

MyComponent consumiría UI material como se define en los documentos:

import RaisedButton from ''material-ui/RaisedButton'';

const MyComponent = (props:MyComponentProps) => {
  return (
      <RaisedButton label="Default" />
  )
}

export default MyComponent;

08/08/2016: respuesta actualizada debido al cambio de estado del paquete.

2017-01-03: Agregar ref. a @types / qvazzler