Slide 1

Slide 1 text

Type Safe “EVERYTHING” @andoshin11
 4. 3. 2020
 #tsc_api_study


Slide 2

Slide 2 text

Who am I ? Shin Ando (a.k.a Andy) @andoshin11 - Freelance Full-Stack Developer - TypeScript / Vue.js / React / Go / Ruby / Flutter / Terraform / etc… - ❤ Code Generation!

Slide 3

Slide 3 text

● Powerful editor completion ● Easy to analyze code base using AST ● Type-level programming ● Overall durability ● Maintainable ● Scalable ● F**king AWESOME!! We all love TypeScript, eh? ❤

Slide 4

Slide 4 text

However...

Slide 5

Slide 5 text

Not everyone speaks TypeScript (just yet...)

Slide 6

Slide 6 text

Not everyone speaks TypeScript (just yet...) ● Other programming languages (Go, Ruby, Python, Java, etc...) ● Query based languages (a.k.a Database) ● Statically defined specs (YAML, CSV, Markdown, Excel) ● etc...

Slide 7

Slide 7 text

Not everyone speaks TypeScript (just yet...) ● Other programming languages (Go, Ruby, Python, Java, etc...) ● Query based languages (a.k.a Database) ● Statically defined specs (YAML, CSV, Markdown, Excel) ● etc...

Slide 8

Slide 8 text

Solution (we need)

Slide 9

Slide 9 text

Basic aproach Parser Transformer TS Compiler 1. Parse input and tokenize into JSON 2. Transform tokens to TypeScript AST 3. Validate AST and emit useful code Outcome

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Working Projects

Slide 12

Slide 12 text

① Typing Database Schema (db-recon) ● db-recon ( https://github.com/andoshin11/db-recon ) ● Generates type-safe db client for Node.js application ● Supports MySQL and MSSQL currently

Slide 13

Slide 13 text

① Typing Database Schema (db-recon)

Slide 14

Slide 14 text

① Typing Database Schema (db-recon)

Slide 15

Slide 15 text

① Typing Database Schema (db-recon)

Slide 16

Slide 16 text

① Typing Database Schema (db-recon) TODO: ● Create SQL-to-AST parser ● Get semantic diagnostics for raw SQL literal string ( ts-sql-plugin requires DSL ) ● Rewrite ejs templates with TS Compiler API

Slide 17

Slide 17 text

② Typing API Request/Response (squelette) ● squelette ( https://github.com/andoshin11/squelette ) ● Generates type definitions for API request/response from Open API spec ● Toolchain to build your own type-safe API client

Slide 18

Slide 18 text

② Typing API Request/Response (squelette)

Slide 19

Slide 19 text

② Typing API Request/Response (squelette)

Slide 20

Slide 20 text

② Typing API Request/Response (squelette)

Slide 21

Slide 21 text

② Typing API Request/Response (squelette)

Slide 22

Slide 22 text

② Typing API Request/Response (squelette) TODO: ● Rewrite remaining ejs templates with TS Compiler API ● Improve parser and AST format

Slide 23

Slide 23 text

Latest addition

Slide 24

Slide 24 text

Improving DX for express.js

Slide 25

Slide 25 text

Remaining Pains...

Slide 26

Slide 26 text

Remaining Pains... need manual mapping need to define types may contain typo

Slide 27

Slide 27 text

Leads to fatal error in future...

Slide 28

Slide 28 text

What if...

Slide 29

Slide 29 text

All handlers are typed like a magic ‍♂

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Introducing...

Slide 32

Slide 32 text

typed-oax

Slide 33

Slide 33 text

Generate express.d.ts from Open API

Slide 34

Slide 34 text

Generate express.d.ts from Open API

Slide 35

Slide 35 text

Generate express.d.ts from Open API

Slide 36

Slide 36 text

DEMO

Slide 37

Slide 37 text

typed-oax TODO: ● Separate handler types by HTTP Method ● Wrap with TS Plugin?