私的TypeScriptいろいろまとめ

flowがすぐ壊れて何も信用できなくなってつらかったのでTypeScript入門することにした。

webpackでとりあえずproduction用とその他でsourcemapを出し分けできるようにしたのでいろいろメモする。

筋悪い箇所があったらTwitterかはてブのコメントで頼む

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "removeComments": true,
    "strictNullChecks": false,
    "outDir": "build",
    "lib": [
      "es6",
      "es7",
      "dom"
    ]
  },
  "exclude": [
    "dist",
    "build",
    "node_modules"
  ]
}

moduleをcommonjsにしてしまったけどwebpackでの最適化の都合を考えると esModuleInterop の方がいいかも

strictNullChecks は依存で壊れがちらしいのでオフにしている…オンにしたい…

webpack.config.js

const path = require("path");
const ENV = process.env.NODE_ENV || "development";
const DEV_PORT = process.env.PORT || 4444;
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = [
  {
    entry: {
      app: ["./src/index.ts"]
    },
    output: {
      filename: "[name].bundle.js",
      chunkFilename: "[name].bundle.js",
      path: __dirname + "/dist",
      publicPath: "/"
    },
    watchOptions: {
      poll: true
    },
    devServer: {
      contentBase: "dist/",
      historyApiFallback: true,
      port: DEV_PORT
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: "ts-loader"
        }
      ]
    },
    devtool:
      process.env.NODE_ENV === "production" ? "eval" : "inline-source-map",
    plugins: [
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("production"),
        API_HOST: process.env.PROD_APIHOST
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: process.env.NODE_ENV === "production" ? false : true
      }),
      new CleanWebpackPlugin(["public"]),
      new HtmlWebpackPlugin({
        hash: true,
        template: "./src/index.template.ejs",
        inject: "body"
      })
    ]
  }
];

baseはしまりんで使っていたやつのbabel周りをts-loaderにしたのと、CSSを抜いただけ

型定義ファイルを落す方法

npmのtypesパッケージを使うのが主流らしい。以下の通りにやるとreactの型定義ファイルが手に入る

yarn add --dev @types/react

devDependenciesに入れるべきか否かの意味合いの判断が取れないのがつらい