エンジニアスタンプラリー～フロントエンド編＃12

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

静的型チェッカー
TypeScriptでかっちりしていこう。

Type Checkers

TypeScript

もはや何が公式ドキュメントかわからなくなったので、React+TypeScriptでヒットしたReact - TypeScript Deep Diveを参考にした。
実際には、React+TypeScript+MobX+Webpackという感じ。

Webpackがだいぶすっきり。

webpack.config.js

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader'
      },
      {
        test: /\.scss/, // 拡張子 .scss の場合
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', // CSSをバンドルするための機能
            options: {
              url: false,
              sourceMap: enabledSourceMap,
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader', // Sassファイルの読み込みとコンパイル
            options: {
              sourceMap: enabledSourceMap
            }
          }
        ]
      }
    ]
  },

こんな感じの型を定義して、Reactのpropsに適応していく。

Types.ts

export interface _Skill {
  front: string[],
  back: string[],
  [key: string]: string[];
}

export type _addSkill = () => void
export type _changeText = (text: string) => void
export type _togglePage = (bar: string) => void
export type _updateNews = (news: string) => void

App.tsx

import * as React from 'react';
import { observer, inject } from 'mobx-react';
import Header from './components/Header/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import { _Skill, _addSkill, _changeText, _updateNews, _togglePage } from './Types';

interface Props {
  store?: Store | any
}

interface Store {
  page: string,
  news: string,
  skill: _Skill,
  inputText: string,
  addSkill: _addSkill,
  changeText: _changeText,
  updateNews: _updateNews,
  togglePage: _togglePage,
}

@inject('store')
@observer
class App extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.fetchJson = this.fetchJson.bind(this);
  }

  async componentDidMount() {~~~~~}

  render() {~~~~~~~}
}

export default App;

成果物

(型)安全第一。
もっと大規模で複雑なコードなら恩恵を感じることができたかも。
https://github.com/tonchan1216/WDR-frontend/tree/v12
https://tonchan1216.github.io/WDR-frontend/v12/