TypeScriptの型の練習
typescriptconst obj = {
s: "foo",
f: () => "bar"
}
const get1 = (key: keyof typeof obj) => {
return obj[key]
}
// const get1: (key: "s" | "f") => string | (() => string)
const get2 = (key: keyof typeof obj) => {
const value = obj[key]
if (typeof value === "string") {
return value
} else {
return () => value()
}
}
// const get2: (key: "s" | "f") => string | (() => string)tsfunction get4<Key extends keyof typeof obj>(key: Key): typeof obj[Key] {
return obj[key];
}
// ERROR
// function get5<Key extends keyof typeof obj>(key: Key): typeof obj[Key] extends string ? string : () => string {
// return obj[key];
// }
function get6<Key extends keyof typeof obj>(key: Key): any {
const value = obj[key]
if (typeof value === "string") {
return value
} else {
return () => value() // ERROR
// This expression is not callable.
// Not all constituents of type 'string | (() => string)' are callable.
// Type 'string' has no call signatures.
}
} key get2
keyof typeof obj === "s" | "f" なので (parameter) key: "s" | "f" get4
(parameter) key: Key extends "s" | "f" const value = obj[key] get2
const value: string | (() => string) get6
tsconst value: {
s: string;
f: () => string;
}[Key]要するに元ネタのコードでは余計なextendsのせいでkeyの型が
"s" | "f" だとわからなくなっており、その結果
obj[key] も string | (() => string) だとわからなくなっている string | (() => string) ならUnion TypeなのでType Guardsが使えるがget6の方は複雑な型なのでそれができない(可能だが現時点のTSがサポートしてない)
なのでelse節のvalueが
() => string であることがわからず Type 'string' has no call signatures になる---
const x = get2("f") // const x: string | (() => string) うーん、そりゃそうか、関数が呼ばれる前にobjが書き換わる可能性があるからな
tsconst x2 = get7("s") // const x2: string
const x3 = get7("f") // const x3: () => stringこういう挙動が欲しい場合、
tsfunction get7(key: "s"): string;
function get7(key: "f"): (() => string);
function get7(key: "s" | "f"): (string | (() => string)) {
const value = obj[key]
if (typeof value === "string") {
return value
} else if (typeof value === "function") {
return () => value()
}
}となるか
Related Pages
- →shuhari×eugene_t._gendlin×非論理的段階としての現象学×martin_heidegger×dwell-think×枠を壊す×伝統とは火を守ることであり、灰を崇拝することではない×型→
- →TypeScript×sentry×react.forwardref×無意識に例外を握りつぶしてた×any消し祭りのゴミ片付け×requireしたものはanyになる×クラスのインスタンスをspreadしてもメソッドは複製されない→
- →regroup×pregroup-done-2019×2020 年、 React 軸で学ぶべき技術×TypeScript×react×webpack×visual_studio_code×styled-components×reactmodal×ipadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiphoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×okr問題×regroup2019→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]