elm-ts-json 
Build up Encoders/Decoders with well-defined TypeScript types! The API in this package is the foundation of the elm-ts-interop CLI tool, but can be used for other purposes as well.
Core concepts
Figure out the types for your ports (to and from Elm)
How does elm-ts-interop figure out the types of your ports? There's no magic involved at all. You define a special type of Encoder/Decoder using the TsJson.Encoder and TsJson.Decoder modules.
These Decoders and Encoders that you write are the source of truth. It doesn't rely on implicitly generated Decoders or Encoders
(Evan generally recommends against implicitly defined serialization because of limitations to that approach that he describes in his vision for data interchange). Instead, you define code with an API that is very similar to elm/json. But this API knows the type information of the Encoder or Decoder you've built.
For example, if you use TsDecode.string, it knows that will expect to receive a string from TypeScript. TsDecode.list TsDecode.string
will expect to receive string[] from TypeScript. You can even build up more expressive TypeScript types like Unions:
import TsJson.Decode as TsDecode
import TsJson.Type
TsDecode.oneOf
[ TsDecode.string
, TsDecode.int |> TsDecode.map String.fromInt
]
|> TsDecode.tsType
|> TsJson.Type.toTypeScript
--> "string | number"So we've written a Decoder very similar to how we would with elm/json, but this Decoder has one key difference.
We can turn the Decoder itself into a TypeScript type (string | number). And without even passing a value through the Decoder
From this simple idea, you can build very sophisticated typed interop, even sending/receiving Elm Custom Types,
and sending/receiving TypeScript discriminated unions.
Example
import Json.Encode as JE
import TsJson.Encode as Encode exposing (Encoder)
import TsJson.Decode as Decode exposing (Decoder)
type User
= Regular { name : String }
| Guest
userEncoder : Encoder User
userEncoder =
Encode.union
(\vRegular vGuest value ->
case value of
Regular data ->
vRegular data
Guest ->
vGuest
)
|> Encode.variant
(Encode.object
[ Encode.required "kind" identity (Encode.literal <| JE.string "regular")
, Encode.required "name" .name Encode.string
]
)
|> Encode.variantLiteral (JE.object [ ( "kind", JE.string "guest" ) ])
|> Encode.buildUnion
userDecoder : Decoder User
userDecoder =
Decode.oneOf
[ Decode.succeed (\() name -> Regular { name = name })
|> Decode.andMap (Decode.field "kind" (Decode.literal () (JE.string "regular")))
|> Decode.andMap (Decode.field "name" Decode.string)
, Decode.literal Guest (JE.object [ ( "kind", JE.string "guest" ) ])
]
type alias Name =
{ first : String, last : String }
nameEncoder : Encoder Name
nameEncoder =
Encode.object
[ Encode.required "first" .first Encode.string
, Encode.required "last" .last Encode.string
]
nameDecoder : Decoder Name
nameDecoder =
Decode.succeed Name
|> Decode.andMap (Decode.field "first" Decode.string)
|> Decode.andMap (Decode.field "last" Decode.string)
Guest
|> Encode.runExample userEncoder
--> { output = """{"kind":"guest"}"""
--> , tsType = """{"kind":"guest"} | { kind : "regular"; name : string }"""
--> }
userDecoder |> Decode.runExample """{"kind":"guest"}"""
--> { decoded = Ok Guest
--> , tsType = """{ kind : "regular"; name : string } | {"kind":"guest"}"""
--> }
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent