2017-09-06から1日間の記事一覧

型強化の呪文。noImplicitAny

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でもリリースビルドする

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…

Atomを入れてTypeScriptを書く

TypeScriptの7つめ。 愛用のWebStormでTypeScriptを研究しつつ、おまけでAtomをインスコしてサンプルを作るときの清書プラットフォームとして使って見ました。 Homebrew-Cask 私はHomebrewでNodeもYarnも入れてますので、Atomも。MacOS向けGUIインストーラー…

TypeScriptでもReduxのHMR対応しておきましょう

TypeScriptの6つめ。 HMRには3段階あって、非Reactアプリ、Reactアプリと続いて最後にReact+Reduxアプリに到達します。 // /store/Store.ts import { createStore, combineReducers, applyMiddleware } from 'redux'; import { routerReducer as router, rou…

TypeScriptでもHMRを実現する

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でもJest+Enzyme

TypeScriptの4つめ。 Lintができたらテストもちゃんとやっとく。最近覚えたJestそしてEnzymeでやります。 $ yarn add jest enzyme react-test-renderer ts-jest @types/jest -D jestとenzymeを加える他に、@types/jestが必須です。必須ではないですが@types/…

TypeScriptでもLintを張る

TypeScriptの3つめ。 やはり大人の嗜みとしてLintを設定したいと思います。ES6ではEslintでAirbnbをやってました。TypeScriptでもAirbnbを張り付けときます。 $ yarn add tslint tslint-config-airbnb tslint-react tslint-loader -D 名前もそのまま、Tslint…

Webpackの設定をTypeScriptで書く

TypeScriptの2つめ。前記事の続き。 Webpack DevServerを動かしてTypeScriptで書いたReactアプリを動かしましたが、このWebpackの設定をTypeScriptで書くことも可能。Babel使ってES6で書くこともできましたので驚くことではない。 $ yarn add ts-node -D yar…

TypeScriptのReact-Webpack DevServer実行

TypeScriptのReactアプリを作るに際し、一番シンプルなのはWebpack DevServerで実行だけするというものかなと思います。NodeとYarnはすでに入ってること前提で、あとはテキストエディタ&WEBブラウザだけでOK。 $ mkdir TsReact $ cd TsReact $ yarn init $ …