VSCodeでのFlow-Typeとの闘いのある時点で、TypeScriptに切り替える必要があることに同意しました。 Flow-Typeのサポートはサードパーティのプラグインによって提供されており、まったく満足していません。 Flow-Typeの観点からファイルが無効な場合、たとえば、ファイル間のコード内の遷移は機能しなくなります。 そして、VSCodeとのミーティング後にWebStormに戻るように強制することはできません。 マイクロソフトは、いつものように、完全に中毒性があります。 VSCodeが大好き、TypeScriptを入手してください。
1年前に誰かが私にMicrosoftファンに戻ると言ったら、そのようなことを想像するのは困難でした。 しかし、さらに驚くべきことが起こります。 Ant-Designの Chinese React Kitの品質には、本当に満足しています。 そして、それを固定するためにTypeScriptで書かれていますが、 babel-plugin-importが必要です。
しかし、Create React App（CRA）に留まる方法-BabelはTypeScript（CRA-TS）の分岐点で切り取られました。 CRAの独自のバリエーションを維持するのはおかしいようです。 有望なPreact-CLI（CRAの代替として）は、Reactとの必要なレベルの互換性を提供しません。 しかし、Preact-CLIで遊んでいると、preact.config.jsがreact-app-rewiredに非常によく似ていることに気付きました。 この事実を、CRA-TSをts-loaderからawesome-typescript-loaderに変換するというアイデアと比較しました。この中で、Babelを有効にできます。 そして出来上がり！
0）create-react-appをインストールします
$ npm install -g create-react-app
1）プロジェクトを作成する
$ create-react-app cra-ts-antd --scripts-version=react-scripts-ts $ cd cra-ts-antd/
2）パッケージを追加する
$ yarn add react-app-rewired react-app-rewire-less awesome-typescript-loader babel-core babel-plugin-import babel-preset-react-app -D
3）config-overrides.jsを追加します
module.exports = function override(config, env) { const tsLoader = config.module.rules.find(conf => { return conf.loader && conf.loader.includes('ts-loader') }) tsLoader.loader = require.resolve('awesome-typescript-loader') tsLoader.query = { useBabel: true, } const tsLintLoader = config.module.rules.find(conf => { return conf.loader && conf.loader.includes('tslint-loader') }) tsLintLoader.options = tsLintLoader.options || {} // FIXED Warning: The 'no-use-before-declare' rule requires type infomation. tsLintLoader.options.typeCheck = true const rewireLess = require('react-app-rewire-less') config = rewireLess(config, env) const path = require('path') // For import with absolute path config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules) return config }
4）package.jsonを変更します。 コードはreact-app-rewiredラッパーを接続します
"scripts": { - "start": "react-scripts-ts start", - "build": "react-scripts-ts build", + "start": "BROWSER=none react-app-rewired start --scripts-version react-scripts-ts", + "build": "react-app-rewired build --scripts-version react-scripts-ts", }
5）tsconfig.jsonを変更します。 コードには、特に絶対インポートの設定が含まれます
{ "compilerOptions": { + "allowSyntheticDefaultImports": true, + "baseUrl": ".", + "paths": { + "*": ["*", "src/*"] + }, - "jsx": "react", + "jsx": "preserve", }, "exclude": [ + "config-overrides.js", ] }
6）.babelrcを追加します。 コードは必要なプリセットを割り当て、 babel-plugin-importを接続します
{ "presets": ["react-app"], "plugins": [ ["import", { "libraryName": "antd", "style": false }] ] }
7）antdを追加します。 固定バージョン 次のバージョン2.12.3でエラーが検出されました
$ yarn add antd@2.12.2
8）src / resources / main.lessを追加します。 コードは変数をオーバーライドします
@import "~antd/dist/antd.less"; // import official less entry file @primary-color: #1DA57A;
9）...そして、index.tsxで接続します。 srcからの絶対パスインポート
+ import 'resources/main.less';
10）App.tsxを変更する
import * as React from 'react'; import './App.css'; + import { Button } from 'antd'; const logo = require('./logo.svg'); class App extends React.Component<{}, {}> { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit `src/App.tsx` and save to reload. </p> + <Button type="primary">Test</Button> </div> ); } } export default App;