2017-09-06から1日間の記事一覧
www.infoq.com 上記記事をたまたま読んで目にした呪文。noImplicitAny。 Over time, they reached the point of enabling advanced compiler options, such as –noImplicitAny to prevent the compiler from inferring an any type. advancedってすごいな。…
TypeScriptの8つめ。 Productionをやります。 // webpack.config.production.ts import * as path from 'path'; import * as webpack from 'webpack'; export default { entry: './ts/index.tsx', output: { path: path.resolve('static/js'), filename: 'bu…
TypeScriptの7つめ。 愛用のWebStormでTypeScriptを研究しつつ、おまけでAtomをインスコしてサンプルを作るときの清書プラットフォームとして使って見ました。 Homebrew-Cask 私はHomebrewでNodeもYarnも入れてますので、Atomも。MacOS向けGUIインストーラー…
TypeScriptの6つめ。 HMRには3段階あって、非Reactアプリ、Reactアプリと続いて最後にReact+Reduxアプリに到達します。 // /store/Store.ts import { createStore, combineReducers, applyMiddleware } from 'redux'; import { routerReducer as router, rou…
TypeScriptの5つめ。まだまだ続きます。 $ yarn add react-hot-loader@next $ yarn add @types/webpack-env -D react-hot-loaderは3.0.0-beta.7が入りました。そして@types/webpack-envを!これが自分的には一番ヤバい。見つけるのに苦労した。 // webpack.c…
TypeScriptの4つめ。 Lintができたらテストもちゃんとやっとく。最近覚えたJestそしてEnzymeでやります。 $ yarn add jest enzyme react-test-renderer ts-jest @types/jest -D jestとenzymeを加える他に、@types/jestが必須です。必須ではないですが@types/…
TypeScriptの3つめ。 やはり大人の嗜みとしてLintを設定したいと思います。ES6ではEslintでAirbnbをやってました。TypeScriptでもAirbnbを張り付けときます。 $ yarn add tslint tslint-config-airbnb tslint-react tslint-loader -D 名前もそのまま、Tslint…
TypeScriptの2つめ。前記事の続き。 Webpack DevServerを動かしてTypeScriptで書いたReactアプリを動かしましたが、このWebpackの設定をTypeScriptで書くことも可能。Babel使ってES6で書くこともできましたので驚くことではない。 $ yarn add ts-node -D yar…
TypeScriptのReactアプリを作るに際し、一番シンプルなのはWebpack DevServerで実行だけするというものかなと思います。NodeとYarnはすでに入ってること前提で、あとはテキストエディタ&WEBブラウザだけでOK。 $ mkdir TsReact $ cd TsReact $ yarn init $ …