A presentation at Boston Ember.js Meetup in in Boston, MA, USA by James C Davis
Typing Octane Using TypeScript with Ember 3.15+ James C. Davis Front-end Lead, Center for Open Science @jamescdavis @jamscdavis @jamescdavis
Yarn 2 2 2 2 2 2 2 @jamescdavis 2 2 2 @jamscdavis @jamescdavis
Yarn 2 2 2 2 2 2 2 @jamescdavis 2 2 2 @jamscdavis @jamescdavis
Volta! $ volta pin yarn@1 https://volta.sh @jamescdavis @jamscdavis @jamescdavis
Install ember-cli-typescript $ ember install ember-cli-typescript @jamescdavis @jamscdavis @jamescdavis
Throw out the blueprints! $ yarn remove ember-cli-typescript-blueprints $ npm uninstall ember-cli-typescript-blueprints @jamescdavis @jamscdavis @jamescdavis
But how do I get TypeScript things? @jamescdavis @jamscdavis @jamescdavis
But how do I get TypeScript things? $ cd app/components/ $ mv my-comp.js my-comp.ts @jamescdavis @jamscdavis @jamescdavis
Install @glimmer/tracking $ yarn install @glimmer/tracking @jamescdavis @jamscdavis @jamescdavis
Components @jamescdavis @jamscdavis @jamescdavis
Components @jamescdavis @jamscdavis @jamescdavis
Components Type ‘“hello!”’ is not assignable to type ‘number’. @jamescdavis @jamscdavis @jamescdavis
Component args @jamescdavis @jamscdavis @jamescdavis
Component args @jamescdavis @jamscdavis @jamescdavis
Component args Property ‘foo’ does not exist on type ‘{}’. @jamescdavis @jamscdavis @jamescdavis
Typing args @jamescdavis @jamscdavis @jamescdavis
Typing args Property ‘args’ has no initializer and is not definitely assigned in the constructor. @jamescdavis @jamscdavis @jamescdavis
Typing args @jamescdavis @jamscdavis @jamescdavis
Typing args @jamescdavis @jamscdavis @jamescdavis
Typing args @jamescdavis @jamscdavis @jamescdavis
Typing args @jamescdavis @jamscdavis @jamescdavis
Constructor args @jamescdavis @jamscdavis @jamescdavis
Constructor args @jamescdavis @jamscdavis @jamescdavis
Constructor args @jamescdavis @jamscdavis @jamescdavis
There’s a better way! @jamescdavis @jamscdavis @jamescdavis
There’s a better way! @jamescdavis @jamscdavis @jamescdavis
There’s a better way! @jamescdavis @jamscdavis @jamescdavis
Octane guides are coming! https://ember-cli-typescript.com/versions/octane-docs/ @jamescdavis @jamscdavis @jamescdavis
Thank you! @jamescdavis @jamscdavis @jamescdavis
With the Ember Octane edition released in Ember 3.15, there are a few new things to consider when using TypeScript. The most fundamental change affecting TypeScript users is the switch to Glimmer components from classic Ember components. In this presentation, I discuss how to properly type Glimmer components as well as how to avoid a couple of pitfalls users have encountered.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.