[TypeScript] なぜ型ガードが効かないのでしょう？

Question

不明な点

以下のfilterByTerm関数内のif文でstringの型ガードが効いて
matchメソッドも使えると考えているのですが、実際はエラーになり
型はインターフェイスでの定義のままの ’string | number ’ となっていて
matchメソッドが無いというエラーが発生しています
これは何が原因なのでしょうか？

interface Link {
  description?: string
  id?: number
  url: string
  [index: string]: string | number | undefined
}

function filterByTerm(
  input: Array<Link>,
  searchTerm: string,
  lookupKey: string = 'url'
): Array<Link> {
  if (!searchTerm) throw Error('searchTerm cannot be empty')
  if (!input.length) throw Error('input cannot be empty')
  const regex = new RegExp(searchTerm, 'i')
  return input.filter(function(arrayElement) {
    if (typeof arrayElement[lookupKey] === 'string') {
      return arrayElement[lookupKey]!.match(regex) // <-Error
    }
  })
}

let res = filterByTerm(
  [{ url: 'string1' }, { url: 'string2' }, { url: 'string3' }],
  'string3'
)
console.log(res)

プロパティ 'match' は型 'string | number' に存在しません。
  プロパティ 'match' は型 'number' に存在しません。ts(2339)

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "declaration": true,
    "sourceMap": false,
    "outDir": "./dist/js/" /* Redirect output structure to the directory. */,
    "rootDir": "./src/",
    "lib": ["es6", "dom", "es2018", "es2015.iterable","scripthost"],
    "downlevelIteration": true,
    "baseUrl": "./",
    "typeRoots": [
      "node_modules/@types",
      "types/index"],
    "strictFunctionTypes": false,
  },
}

環境

VS Code 1.41.1
WebPack 4.41.5
typescript 3.7.4
ts-loader 6.2.1
eslint 6.8.0

Answer 1

1つ考えられることとして、arrayElement[lookupKey]という値は一定だと保証されていません。

文法的に、getterで「あるときはstring、あるときはnumberを返す」ようなプロパティを作れてしまう以上、typeof arrayElement[lookupKey] === 'string'をチェックした次の行でarrayElement[lookupKey]がまだ文字列であることは保証されません。

いったん変数に受ければ値は固定しますので、それをチェックすればいいでしょう。

  return input.filter(function(arrayElement) {
    const value = arrayElement[lookupKey]
    if (typeof value === 'string') {
      return value.match(regex)
    }
  })

Comments

[TOMIYASU_chan]

ありがとうございます。そういったやり方があるのですね・・・if節内の式の評価後のブロック内でもまだ未確定という部分がセマンティクスとしてちょっと不明な感じがしますが、テクニックとしてゲッタからみという観点で他でも役立つと思います。

Answer 2

https://github.com/microsoft/TypeScript/issues/28081

が(おそらくは)質問の通りのissueで、

Turns out this was just missing. It is super simple to add since it's the same code as property access. I just need to make sure performance is OK.

からの、

Update: The PR is trivial and performance is, as expected, bad for probably-uncommon adversarial code. We need to discuss in the design meeting whether to take this change.

というコメントで閉じられています。

敵対的なコードでパフォーマンス問題があって採用されない(採用するためには設計会議で議論する必要がある)ということのようです。

Comments

[TOMIYASU_chan]

コメントに気がつくのがおそくなりすみません、また、情報ありがとうございます。こんなissueが立ってたのですね。インデックスシグナチャとドット記法との間で以下のようなことまで話されてるとは知りませんでした
> We are working in Google internal TS to forbid using the prop access on index signature objects. by Rado Kirov
とりあえず、今は以下のようににしています
``` TypeScript
return (arrayElement[lookupKey]! as string).match(regex)
```

Answer 3

Union 型の値に対しては、共通のプロパティにしかアクセスできません。

If we have a value that has a union type, we can only access members that are common to all types in the union.

https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types

match は string と number の共通のプロパティではないです。
こちらに記載のいずれかの方法で、match を呼び出せるかチェックする必要があります。

Comments

[TOMIYASU_chan]

ありがとうございます。確かに共用型の場合、共通のものにしかアクセスできないということなのですが、示していただいたハンドブックの例にもありますように、型ガードされたスコープ内では独自のプロパティーにアクセスできていますね。

// Both calls to 'swim' and 'fly' are now okay.
if (isFish(pet)) {
pet.swim();
}
else {
pet.fly();
}

型ガード後にはStringのメソッドにアクセスできると思っていましたので、なぜ、まだarrayElement[lookupKey]が共用型のままなのかという部分で疑問です
このハンドブックのページありますサンプルで
stringの型ガード後のmatchメソッドをコールしても問題はありません

function padLeft(value: string, padding: string | number) {
if (typeof padding === 'number') {
return Array(padding + 1).join(' ') + value
}
if (typeof padding === 'string') {
return padding.match(/.*/) // matchの呼び出し
}
throw new Error(`Expected string or number, got '${padding}'.`)
}
}