Ember JS Addon migration to Typescript

[alankyshum]

trafficstars

Background

As a software engineer who has Ember addons and apps written in javascript, I want to know how easy it is to migrate an existing javascript addon to typescript. By reading the Ember-cli-typescript, I didn't know all I need to do was just changing the files in addon/**/*.js to addon/**/*.ts, and the dummy/app and tests and also the Ember app that consumes the addon could "directly" read the addon in Typescript.

I have recently done this migration and realised there wasn't any clear doc that specifically talks about this so I have drafted my own notes and find this to be useful for many others too as typescript becomes a more popular and a first-class citizen.

My notes on migrating Ember JS Addon to Typescript below:

Step-by-step to understand addon

Link typescript add-on to js

• [ ] Create New typescript add-on (= Create new addon, then migrate to typescript)

  • Does not need the ember-typescript-addon-blueprint

    cd ~/
    ember addon ember-ts-addon-example
    cd ember-ts-addon-example
    ember install ember-cli-typescript@latest
    

  • Then add some content to the addon/index.ts

    // addon/index.ts
    function testMethod() {
      return `(TS) testMethod is running`;
    }
    
    export default { testMethod };
    

  • Make sure this file exist, as it's the entry point for its consumer app. It's still a js file.

    // ember-ts-addon-example/index.js
    'use strict';
    
    module.exports = {
      name: require('./package').name,
    };
    

  • References:

    • Create new Addon
    • Add typescript dependencies to the addon
    • ember-typescript-addon-blueprint

• [ ] Add the addon from your local drive to the app

  cd ~/sample-app
  // sibling to the addon
  
  yarn add file:../ember-ts-addon-example
  // ^ then you don't need to yarn link in 2 places
  cat pacakge.json | grep ember-ts-addon-example // just to verify
  
  yarn && yarn serve
  // ember serve will look up package.json
  // found package.json::dependencies['ember-ts-addon-example']
  // found "file:../ember-ts-addon-example"
  // babel transpile
  // Then you see "Babel: ember-ts-addon-example (1)" from the serve log
  

• [ ] Use the addon from the app

  • Whenever it's an Ember app written in js (incl. ember-ts-addon-example/app/ and ember-ts-addon-example/test), ts files can be directly consumed without prior build

    // sample-app/app.js
    import EmberTsAddonExample from 'ember-ts-addon-example';
    EmberTsAddonExample.testMethod(); // DONE!
    

Common Issues

• In sample-app/app.js, when trying to import the ember-ts-addon-example, it shows Could not find module 'ember-ts-addon-example'
  • Make sure ember-ts-addon-example/addon/index.js or ember-ts-addon-example/addon/index.ts exists

[chriskrycho]

Thanks for writing this up! It's definitely a gap in our docs right now—a minimal "just getting started" tutorial would be a great addition there.

[chriskrycho]

I am going to close this issue here… but if someone wants to integrate an updated version of these materials into the Ember docs, where we are currently working on landing official TS support, that would be awesome!

[jenweber]

This could be added nearly as-is into the CLI guides, I think! Similar to https://cli.emberjs.com/release/writing-addons/intro-tutorial/

@alankyshum if you are interested in adding this yourself, please see https://github.com/ember-learn/cli-guides/issues/303. If not, let us know if it's ok to use what you drafted so far.