
TypeScript の小ネタです。

次のような基本的な Array の map 処理を考えてみましょう。
TypeScript のコンパイラオプションには`strictNullChecks`を入れています。

```ts
interface User {
  id: number;
  name?: string;
}

const users: User[] = [
  { id: 1, name: "aaa" },
  { id: 2 },
  { id: 3, name: "bbb" },
];

users
  .filter((user) => Boolean(user.name))
  // Object is possibly 'undefined'... why?
  .map((user) => console.log(user.name.length));
```

`User`クラスの name は Optional なので、一度`filter`関数を通過させて undefined のものを除外しています。
しかし、TypeScript のコンパイラはしつこく`Object is possibly 'undefined'`と言ってきます。

今回は、これをどうにかしたいです。

## User-Defined Type Guards を使う

このエラーを解消するためには[Type Guards](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards)を使って、コンパイラに型情報を追加で教える必要があります。

1 つめのやり方は、name が Optional ではない新しい Type を作る方法です。

```ts
...

// Userを継承した新しいTypeを作る
interface ConfirmedUser extends User {
  name: string;
}

users
  .filter((user: User): user is ConfirmedUser => Boolean(user.name))
  .map(user => console.log(user.name.length));
```

もう 1 つのやり方は、TypeScript にビルトインされている mapped-type の`Required<T>`を使います。

```ts
...

users
  .filter((user: User): user is Required<User> => Boolean(user.name))
  .map(user => console.log(user.name.length));
```

`Required<T>`を使う場合は全てのプロパティが required になるので、部分的に Optional が残る場合は、最初の`extends`で新しい Type を作るほうがいいと思います。

疑問に思ったので、ここで聞いてみた内容でした。

- [Why TypeScript compiler doesn't handle correctly nested object filtering? \- Stack Overflow](https://stackoverflow.com/questions/55337969/why-typescript-compiler-doesnt-handle-correctly-nested-object-filtering)


TypeScriptのArray.filterで'Object is possibly undefined'を消したい


[react-native-router-flux](https://github.com/aksonov/react-native-router-flux)の小ネタです。

react-native-router-flux で毎日頭を悩ませています。
うーん、なんだろう。。。初見は使いやすそうなんですが、いざ本番となるといろいろ制約があって悩ましいライブラリですね。

> Part2
> [react\-native\-router\-flux の onRight をカスタマイズする(part2) \| I am mitsuruog](https://blog.mitsuruog.info/2019/08/rnrf-customizable-onright)

今回はアプリの NavBar の右側にあるボタンをクリックした時に、次の画面に props を渡したいようなユースケースを想定しています。例えば参照画面から編集画面に移動するときなどです。
ボタンは次のイメージのような感じです。

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

この時 react-native-router-flux は`onRight`を発火するのですが、これに動的に値を渡すために少し工夫が必要でした。

## 通常の onRight の定義方法

「プロフィール」と「プロフィール編集」ページを想像してみましょう。「プロフィール」ページの編集ボタンをクリックすると「プロフィール編集」ページに移動します。この時、react-native-router-flux の`Actions`に**プロフィール ID を渡して次の画面で利用できるようにしたい**です。

次のコードは通常の`Router`設定です。
`onRight`は`Scene`と一緒に定義してあり、期待通り「プロフィール編集」しますが、プロフィール ID を値を渡すことはできません。

```ts
// AppRoute.tsx
  ...
  <Scene
    key="page_profile"
    component={Profile}
    title="プロフィール"
    onRight={() => Actions.page_profile_edit()}
    rightTitle="Edit"
  />
  <Scene
    key="page_profile_edit"
    component={ProfileEdit}
    title="プロフィール編集"
  />
  ...
```

## onRight を Component の中で定義する

`onRight`にプロフィール ID を渡すためには、「プロフィール」ページの中で`onRight`ハンドラを**上書き**して、ID を渡せるようにしなければなりません。
`onRight`は props で渡されてくる`navigation.setParams()`にて置き換えできるので、`componentWillMount`でコンポーネントが Mount された時に上書きしましょう。

```ts
// Profile.tsx
export Profile extends React.Component<ProfileProps, {}> {
  componentWillMount() {
    this.props.navigation.setParams({
      'onRight': this.onRight,
    });
  }
  private onRight = () => {
    console.log('Press onRight!!');
    // ここでActionsにプロフィールIDを渡す
    Actions.page_profile_edit({ profileId: 1 });
  }}
  ...
}
```

Router の方の`onRight`は動かないようにしておきます。

```diff
// AppRoute.tsx
  ...
  <Scene
    key="page_profile"
    component={Profile}
    title="プロフィール"
-    onRight={() => Actions.page_profile_edit()}
+    onRight={() => undefined}
    rightTitle="Edit"
  />
  ...
```

TypeScript で型付けする場合は`@types/react-navigation`の`NavigationScreenProp`を使います。

```ts
// Profile.tsx
import { NavigationScreenProp } from 'react-navigation';

interface ProfileProps {
  navigation: NavigationScreenProp<any, any>;
}

export Profile extends React.Component<ProfileProps, {}> {
  componentWillMount() {
    this.props.navigation.setParams({
      'onRight': this.onRight,
    });
  }
  ...
}
```

これで`onRight`をカスタマイズすることができました。

。。。大変。

以上


react-native-router-fluxのonRightをカスタマイズする


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


TypeScriptでジェネリクス(Generics)を理解するための簡単なチュートリアル


TypeScript の小ネタです。

TypeScript で String をキーにしてオブジェクトにアクセスする場合、次のような Type を定義します。

```ts
const user: { [key: string]: string } = { name: "mitsuruog" };

console.log(user["name"]); // => mitsuruog
```

ただ、この String でアクセスする部分をもう少し型安心にしたいですね。

String のキーのセットで Type を作成して、Index Signature に適用できると型安心にできそうです。
試しに UnionType を使ってみます。

```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" };
```

このままでは使えないようなので、Mapped Types を使ってみます。

```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" };
```

今度は、オブジェクト初期化の時に全てのキーが必要になってしまったようです。なので Index を Optional にします。

```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);
```

存在しないキーでアクセスしようとした時にコンパイラが検知するようになりました。

これで型安心になりました。

### 参考

- [Quick fix for 'unions can't be used in index signatures, use a mapped object type instead' · Issue \#24220 · Microsoft/TypeScript](https://github.com/Microsoft/TypeScript/issues/24220)
- [Index Signatures · TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html)


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)


March, 2019

TypeScriptのArray.filterで'Object is possibly undefined'を消したい

react-native-router-fluxのonRightをカスタマイズする

TypeScriptでジェネリクス(Generics)を理解するための簡単なチュートリアル

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

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