Help us understand the problem. What is going on with this article?

エンジニアスタンプラリー~フロントエンド編#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[],

}

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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした