Allows TS inference for requests and responses from your Phoenix API.
This project is a mix compiler task that generates a TypeScript module containing API request helpers.
NOTE: still currently in development, no stable release yet.
Add the ts_interface
compiler to the list of compilers in your project.
def project do
[app: :ts_interface_test,
...
compilers: [:phoenix, :gettext] ++ Mix.compilers ++ [:ts_interface]
...]
end
This compiler should be placed after the elixir compiler, this is important because your router module should be already compiled when this compiler runs
After that, if you run mix compile
the file assets/deps/ts/phoenix-ts-interface.ts
will be generated.
You can clean up the generated file by running mix clean
.
The location and file name can be changed (see Configuration section bellow), keep in mind that if you change it, mix clean
will not be able to remove the old file. It's recomended to always run mix clean before you update this config.
The code generated by this compiler is compatible with AMD, Commonjs and Global builds.
The functions are generated with different names from the ones in the server in order to follow javascript best practices. For example:
user_path(:index) => userIndex()
user_path(:create) => userCreate()
user_path(:update, 1) => userUpdate(1)
user_friends_path(:update, 1, 2) => userFriendsUpdate(1, 2)
If you are using the default phoenix configuration with webpack
(or any other commonjs compatible build tool like webpack and browserify) you can use the helpers like this
import routes from "../static/js/phoenix_ts_interface";
routes.userIndex(); // /users
routes.userCreate(); // /users
routes.userUpdate(1); // /users/1
routes.userFriendsUpdate(1, 2); // /users/1/friends/2
You can also import only the routes you need
import { userIndex, userUpdate } from "../static/js/phoenix_ts_interface";
userIndex();
userUpdate(1);
For AMD builds
require(["phoenix_ts_interface"], routes => {
routes.userIndex();
});
For Global builds
PhoenixTsInterface.userIndex();
// If the name conflicts with anything...
var myBeautifulName = PhoenixTsInterface.noConflict();
If you want the javascript module to be generated automatically when your router changes, just add this compiler to the list of reloadable compilers
.
# config/dev.exs
config :my_app, MyApp.Endpoint,
http: [port: 4000],
...
reloadable_compilers: [:gettext, :phoenix, :elixir, :ts_interface]
NOTE: if you are using version >= 1.5 of Phoenix you might need to reload the page once or twice for changes to take effect.
Key | Type | Default | Description |
---|---|---|---|
output_folder | String | assets/static/js | Sets the folder used to generate files |
include | Regex | nil | Will include only routes matching this regex |
exclude | Regex | nil | Will include only routes not matching this regex |
Configurations should be added to the key :ts_interface
in your application.
config :my_app, :ts_interface,
output_folder: "assets/static/js",
include: ~r[/api],
exclude: ~r[/admin]