Home » Science & Technology » elm-ts-interop-pro Setup Tutorial

elm-ts-interop-pro Setup Tutorial

Written By Dillon Kearns on Friday, Mar 19, 2021 | 05:04 PM

 
http://elm-ts-interop.com/ https://github.com/dillonkearns/elm-ts-interop-starter (see the exercise branch if you want to try the setup yourself). 00:00 What is elm-ts-interop 01:20 Tour of our vanilla starting Elm app and goal 02:34 Installing the elm-ts-interop-pro NPM package 03:28 Generate TypeScript types with the elm-ts-interop-pro CLI 07:00 Setting up TypeScript types for flags 10:00 Wiring in the type-safe flags JSON decoder 12:32 Adding generated files to .gitignore 13:38 Decoding to an Elm custom type for our flags OS value 18:56 Generating a custom type decoder with the Pro scaffolding tool 20:09 Removing a low-level decoder's TypeScript type by not exposing it 21:22 Changing flags to decode under an object property with TsDecode.field 22:22 Mapping the decoded Flags to an Elm record 24:28 Defining a FromElm alert port 25:20 Sending a FromElm alert port 26:04 Handling the FromElm alert port on the JavaScript-side 27:25 Wiring in ports to scroll to photos 30:30 Adding an element ID String to the scroll port's payload 32:22 Sending the scroll port from Elm 34:08 Check out the starter repo! https://github.com/dillonkearns/elm-ts-interop-starter