TypeScript の小ネタです。
TypeScript で String をキーにしてオブジェクトにアクセスする場合、次のような Type を定義します。
<pre><code class="hljs language-ts">const user: { [key: string]: string } = { name: "mitsuruog" };

console.log(user["name"]); // => mitsuruog
</code></pre>
ただ、この String でアクセスする部分をもう少し型安心にしたいですね。
String のキーのセットで Type を作成して、Index Signature に適用できると型安心にできそうです。
試しに UnionType を使ってみます。
<pre><code class="hljs language-ts">type Index = "name" | "address";

// Error: index signature parameter type cannot be a union type. Consider using a mapped object type instead.
const user: { [key: Index]: string } = { name: "mitsuruog" };
</code></pre>
このままでは使えないようなので、Mapped Types を使ってみます。
<pre><code class="hljs language-ts">type Index = "name" | "address";

// Error: Property 'address' is missing in type '{ name: string; }' but required in type '{ name: string; address: string; }'.
const user: { [key in Index]: string } = { name: "mitsuruog" };
</code></pre>
今度は、オブジェクト初期化の時に全てのキーが必要になってしまったようです。なので Index を Optional にします。
<pre><code class="hljs language-ts">type Index = "name" | "address";

const user: { [key in Index]?: string } = { name: "mitsuruog" };

console.log(object2.name);

// Error: Property 'password' does not exist on type '{ name?: string; address?: string; }'.
console.log(object2.password);
</code></pre>
存在しないキーでアクセスしようとした時にコンパイラが検知するようになりました。
これで型安心になりました。
<h3 id="参考">参考</h3>
<ul>
<li><a href="https://github.com/Microsoft/TypeScript/issues/24220">Quick fix for 'unions can't be used in index signatures, use a mapped object type instead' · Issue #24220 · Microsoft/TypeScript</a></li>
<li><a href="https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html">Index Signatures · TypeScript Deep Dive</a></li>
</ul>

TypeScriptのIndex Signature"{[key:string]:string}"で特定の文字だけのIndexを扱う


まぁ、よくある development/statging/production の定数切り替えです。

いくつかライブラリを選定したのですが、最終的に[react-native-config](https://github.com/luggit/react-native-config)を使うことにしました。理由は NativeModule を使っていて、双方で定数を共有したいからです。

NativeModule を使っていなければ[react-native-dotenv](https://github.com/zetachang/react-native-dotenv)でも大丈夫だと思います。

導入にあたり Native 側にも設定が必要だったので、設定するにあたりある程度の困難はあると思っていたのですが、結構大変だったのでその辺りを中心に紹介します。

## 基本的な導入方法

公式ドキュメントにもあるとおり、`npm install`して`react-native link`をすると導入自体は終わります。

```sh
npm install --save react-native-config
react-native link react-native-config
```

設定ファイルの記述方法や基本的な環境の切り替えからなどは、[dotenv](https://github.com/motdotla/dotenv)と同じなので、使ったことがある人はそれほど苦労しないはず。

次のような`.env`ファイルを準備します。

```txt
API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh
```

react-native 側では次のように取得します。

```js
import Config from "react-native-config";

Config.API_URL; // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY; // 'abcdefgh'
```

Native 側については設定がもう少し必要ですが、公式ドキュメントの内容にしたがってやってみるといいと思います。
で、ここまでが良く見かける記述。Google で検索すると良く出てくるのでサラッと流します。

NativeModule を使っている場合は、さらにここからドキュメントにない設定が必要です。ここからが本番です。

## トラブルシュート

自分が遭遇したトラブルについて残しておきます。

### Android 側で BuildConfig が見つからない

Android 側で定数を受け取るサンプルで良くあるのが、`MainApplication.java`などの**アプリの PackageName と同じパッケージ**だけでやっている場合。
これだと NativeModule を使っているケースでトラブルになります。

PackageName が`jp.sample.mitsuruog`だったとして、NativeModule を`jp.sample.mitsuruog.custom.hoge`など異なるパッケージに置いたとします。

```java
package jp.sample.mitsuruog.custom.hoge;

  ...

  public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL); // error: cannot find symbol
  }
```

`BuildConfig`は PackageName と同じパッケージに生成されるので、package をインポートする必要があります。

```diff
package jp.sample.mitsuruog.custom.hoge;

+ import jp.sample.mitsuruog.BuildConfig;

  ...

  public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL); // 'https://myapi.com'
  }
```

- [React Native Android Build Error MainActivity.java:29: error: cannot find symbol](https://stackoverflow.com/a/35912176/1855830)

### swift で使うための設定

swift で使いたいですが。。。残念ながら、公式やほどんどのサンプルが Objective-c で実装されているものです。

swift で使うためには、まず Bridge ファイルに react-native-config の Header を登録します。

```diff
// Bridging-Header.h
#import "React/RCTBridgeModule.h"
+ #import "ReactNativeConfig/ReactNativeConfig.h"
```

swift では次のように使います。

```swift
import ReactNativeConfig

...

あとで足すからちょっと待って
```

### xcode でビルドでエラー

xcode 上でのエラーが消えたので、実機で試そうかと思ってビルドしたらエラー。`ReactNativeConfig`が見つからない。

...え？

原因は`react-native link`がなんらかの理由で**正しく react-native-config を設定できていない**ためでした。

まず、xcode のプロジェクトビューの`Libraries`グループの中に`ReactNativeConfig.xcodeproj`があることを確認します。もしなければ、次の手順にしたがって手動でリンクを直してください。

- [Linking Libraries · React Native](https://facebook.github.io/react-native/docs/linking-libraries-ios.html)

プロジェクトの「Build Settings > Header Search Paths」には`$(SRCROOT)/../node_modules/react-native-config/ios`を追加します。

{% img https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-config1.png 550 %}

- ['GeneratedDotEnv.m' file not found](https://github.com/luggit/react-native-config/issues/187#issuecomment-368769123)
- ['ReactNativeConfig\.h' file not found](https://github.com/luggit/react-native-config/issues/81)

## まとめ

日本語や英語の react-native-config についての記事は、どれもここまで踏み込んだ内容ではなかったので、導入は少し面倒でした。
導入した結果、複数の環境で定数を分けることができたので結果には満足しています。

が。。。

react-native の外部ライブラリの設定周り、こんなに不安定でいいのか！？

> このブログは iOS 側で複数の環境を構築する手順が載っていてわかりやすいです。
>
> - [Managing Configuration in React Native – Differential – Medium](https://medium.com/differential/managing-configuration-in-react-native-cd2dfb5e6f7b)


react-nativeで環境ごとに定数を切り替える(react-native-config)

TypeScript を使っていると頻繁に見かけるジェネリクス(以下、Generics)。
別の言語などで同様の概念を経験したことがある人であれば理解するのに苦労しないと思うのですが、最初はやはり難しい概念だと思います。

先日同僚に Generics を使ったユーティリティの作成をおねがいしたのですが、これが良い Generics のユースケースだと思ったので、チュートリアルっぽくしてみました。

## お題

次のように配列に対して値をマージするユーティリティ関数(`merge`)を作成してください。

```ts
merge(array, newValue);
```

渡される`array`には次のような構造の`User`と`Company`の 2 つのクラスがあり、それぞれ`id`プロパティを持っています。

```ts
class User {
 id: number;
 firstName: string;
}

class Company {
 id: number;
 name: string;
}
```

id が一致するものがあれば置き換え、なければ追加してください。

## ひとまず User クラスの merge 関数を作る

いきなり Generics を使うのはハードルが高いので、ひとまず User クラス用の merge 関数を作成しましょう。

User の配列と User の値を受け取って、両者をマージして新しい User の配列を返せばいいので、ひとまず User クラス用の merge 関数の interface を考えると、次のようになります。

```ts
function merge(array: User[], newValue: User): User[] {
 // ここに中身を書く
}
```

実装の方法はいくつかありますが、ここではシンプルに`findIndex`で最初に一致したもののみ値を置き換えるようにします。

```ts
function merge(array: User[], newValue: User): User[] {
 const index = array.findIndex((item) => item.id === newValue.id);
 if (index === -1) {
 return [...array, newValue];
 } else {
 return [...array.slice(0, index), newValue, ...array.slice(index + 1)];
 }
}
```

`merge`関数は次のように正しく動作します。

```ts
const array = [
 { id: 1, firstName: "Taro" },
 { id: 2, firstName: "Hanako" },
];

// => [{ id: 1, firstName: 'Mitsuru'}, { id: 2, firstName: 'Hanako' }]
console.log(merge(array, { id: 1, firstName: "Mitsuru" }));

// => [{ id: 1, firstName: 'Taro'}, { id: 2, firstName: 'Hanako' }, { id: 3, firstName: 'Ayumu' }]
console.log(merge(array, { id: 3, firstName: "Ayumu" }));
```

上の`merge`関数を`Company`クラスでも使えるようにするためにはどうすればいいでしょうか？
複製して関数の型定義を`Company[]`にしますか？もし扱う予定の型クラスが 100 あった場合どうしましょう。。。

ここで登場するのが**Generics**です。

## merge 関数で Generics を使う

Generics とは**型を抽象化したもの**です。
今回の例では`User`と`Company`とそれと他の何かのクラスも含めたものです。名前は`T`クラスとしましょう。

> 慣例で`T`を使うことが多い気がします。

早速、上の関数の interface を Generics に置き換えてみましょう。

```ts
function merge<T>(array: T[], newValue: T): T[] {
 // merge処理の中身
}
```

これで merge 関数は「**なにかのクラス(`T`)**の配列と**なにかのクラス(`T`)**の値を受け取って、両者をマージして新しい**なにかのクラス(`T`)**の配列を返す」関数になりました。

しかし、このままでは TypeScript のコンパイラがエラーになるはずです。

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

「Property 'id' does not exist on type 'T'.」

当然ですね。merge 関数の中では渡されるクラスに`id`があることを前提にしていますが、`T`には`id`がありません。

「`T`には`id`がある」という制約を入れる必要があります。

## Generics に制約を入れる

「`T`には`id`がある」という制約を入れるためには、まず「`id`がある」という型を定義する必要があります。

```ts
{
 id: number;
}
```

これを`T`の制約とするには`extends`を使って、次のように「`T`は`{ id: number}`を継承している」という関係を作ります。

```ts
T extends { id: number }
```

TypeScript は「**Structural typing(構造型型付け)**」と呼ばれる、構造が同じであれば同じ型とみなす方式を取っているので、このような柔軟な型宣言が可能です。

では、最終形のコードがこちらです。

```ts
function merge<T extends { id: number }>(array: T[], newValue: T): T[] {
 const index = array.findIndex((item) => item.id === newValue.id);
 if (index === -1) {
 return [...array, newValue];
 } else {
 return [...array.slice(0, index), newValue, ...array.slice(index + 1)];
 }
}
```

使い方は次のようになります。

```ts
const userArray = [
 { id: 1, firstName: "Taro" },
 { id: 2, firstName: "Hanako" },
];

// => [{ id: 1, firstName: 'Mitsuru'}, { id: 2, firstName: 'Hanako' }]
console.log(merge(array, { id: 1, firstName: "Mitsuru" }));

// => [{ id: 1, firstName: 'Taro'}, { id: 2, firstName: 'Hanako' }, { id: 3, firstName: 'Ayumu' }]
console.log(merge(array, { id: 3, firstName: "Ayumu" }));

const companyArray = [
 { id: 1, name: "TOYOTA" },
 { id: 2, name: "SONY" },
];

// => [{ id: 1, name: 'NISSAN' }, { id: 2, name: 'SONY' }]
console.log(merge(companyArray, { id: 1, name: "NISSAN" }));

// => [{ id: 1, name: 'TOYOTA' }, { id: 2, name: 'SONY' }, { id: 3, name: 'NTT' }]
console.log(merge(companyArray, { id: 3, name: "NTT" }));
```

最近の TypeScript は型推論が優れているので通常は`merge`関数に型情報を渡す必要はありませんが、型推論ができずコンパイルエラーが出るような場合は次のように型情報を渡してください。

```ts
merge<User>(userArray, { id: 1, firstName: "Mitsuru" });
```

## まとめ

簡単なジェネリクス(Generics)を理解するためのチュートリアルでした。いかがだったでしょうか？
これから理解する人にはこれくらいの内容がちょうどいいと思います。

Generics についてはもっと踏み込むと面白いですし、ライブラリの型定義ではよく見かけるので、知っておいて損はないはずです。