TypeScriptの型演習 - Qiitaを解く

TypeScriptの型演習 - Qiitaをやってみる

Level 1

この章は単なる文法の確認なので飛ばす

1. 関数に型をつける

2. オブジェクトの型

3. 関数の型

4. 配列の型

Level 2

この章も文法の確認

1. ジェネリクス

2. いくつかの文字列を受け取れる関数

3. 省略可能なプロパティ

4. プロパティを一つ増やす関数

これってどっちが正解？

こっちだと思うのだがtakker.icon

code:ts

const giveId = <T extends Record<string, unknown>>(obj: T)

=> ({ ...obj, id: "id" });

これだとprimative型も含まれてしまう？

code:ts

const giveId = <T>(obj: T) => ({ ...obj, id: "id" });

2022-01-18 20:56:49 解答だとこれでいいっぽい

T=numberだとどうなるんだろう

21:06:01 何も出力されなかった

spread operatorの挙動をちゃんと調べないとだめそう

5. useState()

ちょっと複雑か。まあ簡単だけど

code:ts

declare function useState<T>(initialState: T):

T, (value: T | ((old: T) => T)) => void;

Level 3

1. 配列からMapを作る

code:ts

function array2Map<T>(list: T[], key: keyof T) {

const map = new Map<string, T>();

for (const item of list) {

map.set(itemkey, item);

}

return map;

}

2. Partial

Partial<>を実装する

この問題からMapped Typeが必要になってくる

code:ts

type Partial<T> = {K in keyof T?: TK};

再帰的にoptional propertyにしたい場合はどうすればいいんだろう？

3. イベント

interfaceは問題から簡略化してある

code:ts

interface EventPayloads {

start: {

user: string;

};

stop: {

user: string;

after: number;

};

end: {};

}

function emit<K extends keyof EventPayloads>(

eventName: K,

eventData: EventPayloadsK,

): void;

4. reducer

tagged unionを使う

5. undefinedな引数

Level 4

1. 無い場合はunknown

2. プロパティを上書きする関数

3. unionは嫌だ

4. 一部だけPartial

5. 最低一つは必要なオプションオブジェクト

6. ページを描画する関数

7. 条件を満たすキーだけを抜き出す

8. オプショナルなキーだけ抜き出す

#2022-01-18 20:39:53

#2022-01-17 23:01:11