Runtime Types in TypeScript

Transcript

1. Runtime Types in TypeScript
2. Type Checking • either statically – compiler – static analyzer • or at runtime
3. Type Checking by TypeScript • either statically – compiler – static analyzer • or at runtime
4. Type Checking by Java • either statically – compiler – static analyzer • or at runtime
5. TypeScript vs. Java // TypeScript var s = value as string // Java var s = (String) value;
6. const postJson = async (path: string, body: any) => { const response = await fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }) return await response.json() } const response = await postJson(...) response. // no code completion
7. const postJson = async (path: string, body: any) => { const response = await fetch(path, { ... }) return await response.json() } type SignInResponse = { token: string } const response = await postJson(...) as SignInResponse response. // code completion works
8. const postJson = async <T>(...): Promise<T> => { const response = await fetch(path, { ... }) return await response.json() } type SignInResponse = { token: string } const response = await postJson<SignInResponse>(...) response. // code completion works & it looks FANCY
9. const postJson = async (...): Promise<unknown> => { const response = await fetch(path, { ... }) return await response.json() } type SignInResponse = { token: string } const response = await postJson(...) if ( typeof response === 'object' && response !== null && 'token' in response && typeof response.token === 'string' ) { ... }
10. function hasOwnProperty< X extends {}, Y extends PropertyKey >(obj: X, prop: Y): obj is X & Record<Y, unknown> { return obj.hasOwnProperty(prop) }
11. if ( typeof response === 'object' && response !== null && hasOwnProperty(response, 'token') && typeof response.token === 'string' ) { response. // code completion works }
12. type SignInResponse = { token: string } if ( typeof response === 'object' && response !== null && hasOwnProperty(response, 'token') && typeof response.token === 'string' ) { response. // code completion works }
13. Type World Runtime World
14. Reflection
15. Reflection https://github.com/microsoft/TypeScript/issues/3628
16. Type World Runtime World
17. typeof operator
18. Runtime Type Design type RunTimeType<T> = (input: unknown) => input is T const stringType = (input: unknown): input is string => { return typeof input === 'string' }
19. Runtime Type Design type RunTimeType<T> = (input: unknown) => asserts input is T const stringType = (input: unknown): asserts input is string => { if (typeof input !== 'string') throw new Error() }
20. Runtime Type Design type RunTimeType<T> = (input: unknown) => | { ok: true, value: T } | { ok: false, reason: string } const stringType = (input: unknown) => { return typeof input === 'string' ? { ok: true, value: input } : { ok: false, reason: "not a string" } }
21. Runtime Type Design type RunTimeType<T> = (input: unknown) => T // or throw Error in case of failure const stringType = (input: unknown) => { if (typeof input !== 'string') throw new Error(...) return input }
22. Minimal Implementation const string = (input: unknown) => { if (typeof input !== 'string') throw new Error() return input }
23. Minimal Implementation const number = (input: unknown) => { if (typeof input !== 'number') throw new Error() return input }
24. Minimal Implementation const literal = <V>(value: V): Type<V> => { return (input: unknown) => { if (input !== value) throw new Error() return value } }
25. Minimal Implementation const array = <T>(inner: RunTimeType<T>) => { return (input: unknown): T[] => { if (!Array.isArray(input)) throw new Error() return input.map(v => inner(v)) } }
26. Minimal Implementation const object = <T extends Record<string, RunTimeType<any>>>(inner: T) => { return (input: unknown): { [P in keyof T]: ReturnType<T[P]> } => { if (input === null || typeof input !== 'object') throw new Error() const out: { [P in keyof T]: ReturnType<T[P]> } = {} as any for (const k in inner) { out[k] = inner[k]((input as any)[k]) } return out } }
27. Usage const ArticleType = object({ id: number, title: string, category: object({ id: number, name: string, }), tags: array(object({ id: number, label: string, })), })
28. Usage const ResponseRuntimeType = object({ token: string }) type ResponseStaticType = { token: string }
29. Usage const ResponseRuntimeType = object({ token: string }) type ResponseStaticType = ReturnType<typeof ResponseRuntimeType>
30. Usage const SignInResponse = object({ token: string }) type SignInResponse = ReturnType<typeof SignInResponse>
31. const postJson = async (...): Promise<unknown> => { const response = await fetch(path, { ... }) return await response.json() } const SignInResponse = object({ token: string }) const response = SignInResponse(await postJson(...)) response. // code completion works & it looks FANCY
32. New Power Level const IsDivisibleBySeven = (input: unknown) => { const n = number(input) if (n % 7 !== 0) throw new Error() return n }
33. Existing Implementations • https://github.com/gcanti/io-ts • https://github.com/colinhacks/zod • https://github.com/pelotom/runtypes • ...and many more, unfortunatelly • https://www.typescriptneedstypes.com/
34. Jan Tvrdík @contember