T3 Stack and TypeScript ecosystem

Transcript

1. T3 Λࢧ͑ΔTypeScript by @Quramy #techfeed_experts_night 2023.1.18
2. T3 Λࢧ͑ΔTypeScript by @Quramy #techfeed_experts_night 2023.1.18 ͷΤίγεςϜ
3. About me - Twitter / GitHub: @Quramy - Web Developer (Node.js / Ruby on Rails ͷׂ߹͕ߴΊ) - Techfeed Expert (TypeScript)
4. T3 Stack - 2022 ೥ ʹެ։͞Εͨ Web ΞϓϦέʔγϣϯ։ൃελοΫ - Backend / Frontend ૒ํΛ TypeScript Ͱهड़͢ΔલఏͷϥΠϒϥϦߏ ੒ - https://github.com/t3-oss/create-t3-app
7. T3 Axiom: Typesafety is not optional The stated goal of Create T3 App is to provide the quickest way to start a new full-stack, typesafe web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of Create T3 App is a decision that should be made in a different project. https://create.t3.gg/en/introduction#typesafety-isnt-optional
8. Typesafe ͱ͸ʁ - "Typesafe" ͸ͲͷΑ͏ͳঢ়ଶΛࢦ͢ͷͩΖ͏͔ - ʮ҆શੑʯ͕ίϯςΩετʹΑͬͯఆٛͷҟͳΔ༻ޠ - e.g. نఆ͞Εͨશͯͷܕʹ͍ͭͯະఆٛಈ࡞͕ଘࡏ͠ͳ͍͜ͱΛ Typesafe ͱݺͿͳΒ͹ɺ JavaScript ͸ܕʹ͍ͭͯ҆શͳݴޠ
9. Typesafe ͱ͸ʁ - Question: ࣍ͷ TypeScript ίʔυ͸ TypesafeͰ͔͢ʁ - TypeScript Ͱ͋ͬͯ΋҆શͱ͸ݶΒͳ͍ - API Ϩεϙϯεͷܕ͕ any, fetch URL ΍ύϥϝʔλ෇༩ํ๏ - զʑʹͱͬͯͷ Typesafe : ΞϓϦέʔγϣϯʹޡΓ͕ࠞೖ͢ΔՄೳੑ͕੩తʹۃখԽ͞Ε͍ͯΔঢ়ଶ const product = await fetch(`/api/products/1234`).then(res => res.json())
10. The unknown - TypeScript͕༧ଌͣ͠Β͍ྖҬ - JavaScriptҎ֎ͷΤίγεςϜͱͷ࿈ܞ - e.g. API req/res, database access, CSS / HTML template, etc... - ೗ԿʹunknownΛݮΒ͔͕͢DX޲্ͷ伴 https://speakerdeck.com/quramy/extends-developer-experience?slide=13 ΑΓ࠶ܝ
11. How T3 tackle unknown Browser JS Node.js Internet Rendering Engine Database tRPC Prisma TSX (React)
12. tRPC - TypeScript ʹΑΔ Remote Procedure Call Λ࣮ݱ͢ΔϥΠϒϥϦ - ϑϧελοΫ TypeScript ։ൃʹಛԽ GraphQL ΍ Open API ͕ݴޠඇґଘͰ͋Δ఺ʹ͓͍ͯɺੑ࣭͕ҟͳΔ - Zod ΤίγεςϜͷҰͭ - T3 ( Next.js ) Ͱ࢖͏৔߹: react-query ΛϥϯλΠϜʹ༻͍Δ
13. export const ProductDetail = () => { const { data, isFetching } = trpc.productDetail.useQuery({ id: "1234" }) if (isFetching || !data) return <div>Loading...</div> return ( <div> Product name: {data.name} </div> ) } Browser JS Node.js const getContext = () => ({ prisma }) const { router, procedure } = initTRPC.context<typeof getContext>().create() const productDetail = procedure .input(z.object({ id: z.string() })) .query(async ({ ctx: { prisma }, input: { id } }) => { const result = await prisma.product.findUnique({ where: { id } }) return { id: result.id, name: result.name, price: result.price, } }) export const appRouter = router({ productDetail, }) export type AppRouter = typeof appRouter Internet Inference Inference
14. tRPC ʹ͓͚Δ Typesafe - ϓϩγʔδϟ (= ؔ਺) ͷίʔυ͔ΒΫϥΠΞϯτܕఆٛΛਪ࿦͢Δ Zod ΋಺෦ DSL ͱͯ͠ར༻͞Ε͍ͯΔ - Mapped types / Conditional types Λ༻͍ͨܕਪ࿦ https://github.com/trpc/trpc/blob/b18b8134eb666e2c88fe3c245ebf78e7c9817859/packages/server/src/ core/types.ts#L53-L66
15. Prisma - 2019 ೥ࠒʹొ৔ͨ͠ TypeScript ( Node.js ) ༻ͷ ORM ※ લ਎Ͱ͋ΔGraphQLϕʔεͷ Prisma v1 ͱ͸ผ෺ͱଊ͑ͯΑ͍ - Typesafe ͳΫΤϦͷهड़͕Մೳ - ֤छRDB ( MySQL / PostgreSQL / SQLite / SQLServer) ʹରԠ - ϚΠάϨʔγϣϯ༻ͷ CLI ΋෇ଐ͢Δ - ϥϯλΠϜͰಈ࡞͢ΔΫΤϦΤϯδϯ͸ Rust ੡
16. const productDetail = procedure .input(z.object({ id: z.string() })) .query(async ({ ctx: { prisma }, input: { id } }) => { const result = await prisma.product.findUnique({ where: { id } }) return { id: result.id, name: result.name, price: result.price, } }) Node.js Database generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model Product { id String @id @default(cuid()) name String @unique price Int createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } Generate Import schema.prisma (DSL) Prisma Client .js / .d.ts file
17. Prisma ͱ TypeScript - ֎෦DSL (Schema) ͔ΒɺTypeScript ιʔείʔυΛࣗಈੜ੒͢Δઓུ - ͜ͷҙຯͰ͸ɺGraphQL ΍ Open API ͷΤίγεςϜʹ͍ۙ͠ - ίʔυੜ੒ʹ CLI ࣮ߦ͕ඞཁͱͳΔ͕ɺੜ੒෺ࣗମ͸ಡΈ΍͍͢ - tRPC ΍ Zod ͷ৔߹, ਪ࿦աఔͷܕ৘ใ͕ෳࡶͰܕύζϧΈ͕ڧ͍
18. ·ͱΊ
19. ·ͱΊ - T3 Axiom Ͱ͋Δ "Typesafety is not optional" Λେࣄʹ͠·͠ΐ͏ - Typesafety ΛಘΔ͜ͱ ≒ unknown Λ౗͢͜ͱ - TypeScript ܕਪ࿦ύλʔϯ: Zod, tRPC, react-hook-form, etc... - .ts ίʔυࣗಈੜ੒ύλʔϯ: Prisma, Relay, graphql-codegen, etc...
20. ͓·͚ - TypeScript ϑϨϯυϦͳελοΫ͸ T3 Ҏલʹ΋৭ʑ͋Δ͕ɺͲ͜ʹ৽ نੑ͕͋Δͷ͔ - tRPC ؚΊɺZod Λத৺ʹਾ͑ͨΤίγεςϜ͕৳ͼ͍ͯΔ https://2022.stateofjs.com/en-US/other-tools/