TypeScript
Utilisation de TypScript avec React (JS & native)

Composant ReactJS écrit en Typescript

Vous pouvez utiliser les composants de ReactJS facilement dans TypeScript. Renommez simplement l'extension de fichier 'jsx' en 'tsx':

//helloMessage.tsx:
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

Mais pour utiliser pleinement la fonctionnalité principale de TypeScript (vérification de type statique), vous devez effectuer plusieurs opérations:

1) convertir React.createClass en une classe ES6:

//helloMessage.tsx:
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="John" />, mountNode);

Pour plus d'informations sur la conversion en ES6, cliquez ici

2) Ajouter des interfaces et des interfaces d'état:

interface Props {
    name:string;
    optionalParam?:number;
}

interface State {
  //empty in our case
}

class HelloMessage extends React.Component<Props, State> {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
// TypeScript will allow you to create without the optional parameter
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
// But it does check if you pass in an optional parameter of the wrong type
ReactDOM.render(<HelloMessage name="Sebastian" optionalParam='foo' />, mountNode);

Désormais, TypeScript affichera une erreur si le programmeur oublie de transmettre des accessoires. Ou si vous essayez de transmettre des accessoires qui ne sont pas définis dans l'interface.

Dactylographier et réagir et webpack

Installer des typescript, typings et webpack globalement

npm install -g typescript typings webpack

Installation de chargeurs et liaison de texte dactylographié

npm install --save-dev ts-loader source-map-loader npm link typescript

Lier TypeScript permet à ts-loader d'utiliser votre installation globale de TypeScript au lieu d'avoir besoin d'un document distinct pour la copie de type local.

installer des fichiers .d.ts avec typeScript 2.x

npm i @types/react --save-dev
npm i @types/react-dom --save-dev

installer des fichiers .d.ts avec le typecript 1.x

typings install --global --save dt~react
typings install --global --save dt~react-dom

fichier de configuration tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  }
}

fichier de configuration webpack.config.js

module.exports = {
    entry: "<path to entry point>",// for example ./src/helloMessage.tsx
    output: {
        filename: "<path to bundle file>", // for example ./dist/bundle.js
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            {test: /\.tsx?$/, loader: "ts-loader"}
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {test: /\.js$/, loader: "source-map-loader"}
        ]
    },

    // 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"
    },
};

enfin exécuter webpack ou webpack -w (pour le mode montre)

Remarque : React et ReactDOM sont marqués comme externes