
（完全に自分用のメモです。）

TypeScript+React+Redux を使うときに気に入って使っている[typesafe-actions](https://github.com/piotrwitek/typesafe-actions)。
意外なところでハマりポイントがありました。

## Reducer で Action の型情報が見れない

よくある Reducer。

```typescript
export const weatherReducer = (
  state: WeatherState = initialState,
  action: Action
): WeatherState => {
  switch (action.type) {
    case getType(actions.weatherSetAction):
      return Object.assign({}, state, { weather: new Weather(action.payload) });

    case getType(actions.weatherErrorAction):
      console.error(action.payload.message);
      return state;

    default:
      return state;
  }
};
```

ところが`action.payload`の型情報が正しく取れていません。なぜだろう。。。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/typesafe-actions1.png)

エラーの内容はこちら。

```txt
TS2339:
Property 'payload' does not exist on type 
'{ type: string; payload: { lat: number; lng: number; }; } | 
 { type: string; payload: Response; } | 
 { type: "@@weather/ERROR"; payload: Error; } | 
 { type: "@@map/READY"; }'.
  Property 'payload' does not exist on type '{ type: "@@map/READY"; }'.
```

Action の型定義は一見良さそうなので、最初は何が原因かわかりませんでした。

> (追記: 2019/01/23)
> というか型定義良くない。`type: string`になっている。Blog 用にエラーを整形したら気づいた。エラーメッセージもっと冷静に読まないと。

## ActionType に動的な文字列を使ってはいけない

原因はこれでした。ActionType を`PREFIX`を使ったテンプレート文字列で定義している部分。

```typescript
// constants.ts
const PREFIX = "@MyApp";
export const MAP_READY = `${PREFIX}/READY`;
export const WEATHER_GET = `${PREFIX}/GET`;
export const WEATHER_SET = `${PREFIX}/SET`;
export const WEATHER_ERROR = `${PREFIX}/ERROR`;
```

公式ドキュメントにも書いてありました。

- [typesafe-actions: The Actions](https://github.com/piotrwitek/typesafe-actions#--the-actions)

> PRO-TIP: string constants limitation in TypeScript
> ...

TypeScript には文字列の定義に関する制限事項があってだね。テンプレート文字列などで動的に文字列を組み立てた場合、型情報が全部`string`になってしまって、reducer の case の中の型情報が壊れるよ。（超訳）

```typescript
// Example file: './constants.ts'

// WARNING: Incorrect usage
export const ADD = prefix + 'ADD'; // => string
export const ADD = `${prefix}/ADD`; // => string
export default {
   ADD: '@prefix/ADD', // => string
}

// Correct usage
export const ADD = '@prefix/ADD'; // => '@prefix/ADD'
export const TOGGLE = '@prefix/TOGGLE'; // => '@prefix/TOGGLE'
```

（公式ドキュメントから抜粋）

という訳で、正しいやり方は普通に文字列だけで ActionType 定義すればいいだけでした。

```typescript
// constants.ts
export const MAP_READY = "@MyApp/READY";
export const WEATHER_GET = "@MyApp/GET";
export const WEATHER_SET = "@MyApp/SET";
export const WEATHER_ERROR = "@MyApp/ERROR";
```

なるほど、TypeScript の制限。
勉強になりました。


typesafe-actionsのActionTypeに動的な文字列を使ってはいけない


（完全に自分用のメモです。）

いくつか翻訳のプロジェクトを GitHub 持っているのですが、更新が年単位の間隔が開くことも珍しくないので、自分のために作業のワークフローを残しておこう。

- Airbnb の JavaScript スタイルガイド
  - <https://github.com/mitsuruog/javascript-style-guide>
- Clean Code For JavaScript
  - <https://github.com/mitsuruog/clean-code-javascript>

## アップデートのワークフロー

## 1. 翻訳する本家のコミットのスナップショットを記録する

まず、翻訳する本家のコミットのスナップショットを記録します。

本家のコミットは翻訳用のリポジトリに`upstream`と言う名前でリモートリポジトリを追加します。

```sh
git remote add upstream <リポジトリURL>
```

> `upstream`が慣例のような気がする。

結局のところ、文書のフォーマットが Markdown なので、オリジナル文書と翻訳したものが混在してしまいます。うまく Diff を取ることが難しいため、オリジナル文書の差分を手動でコピーして、翻訳を追加していきます。

## 2. 以前のスナップショットとの差分を抽出する

 さて、前回の  作業から数ヶ月が経ちました。やっと重い腰をあげて翻訳をアップデートするとします。

 翻訳用のリポジトリの`upstream`と、本家の差分を抽出します。

これは GitHub 上の GUI で作業できるので、 翻訳用のリポジトリ「New pull request」画面に移動して「compare accoss forks」の画面へ移動します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/translations1.png)

ここで本家から翻訳用のリポジトリの`upstream`へ pull request を作ります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/translations2.png)

(左側に翻訳用リポジトリ。右側に本家です。)

> 実際の pull request:
>
> - <https://github.com/mitsuruog/clean-code-javascript/pull/4>

これでファイルの差分がわかるので、地道に  文書をアップデートしていきます。ちなみにここでマージした`upstream`が次回アップデートするためのスナップショットです。

## まとめ

以上が簡単なワークフローのまとめでした。

スクリプトとか組めばもっと格好のいい形になるのかもしれませんが、それほど頻繁にやる作業ではないので、これくらいゆるい感じがちょうどいいのです。


January, 2019

typesafe-actionsのActionTypeに動的な文字列を使ってはいけない

翻訳プロジェクトのアップデートワークフロー