Typing Octane: Using TypeScript with Ember 3.15+

A presentation at Boston Ember.js Meetup in January 2020 in Boston, MA, USA by James C Davis

Slide 1

Slide 1

Typing Octane Using TypeScript with Ember 3.15+ James C. Davis Front-end Lead, Center for Open Science @jamescdavis @jamscdavis @jamescdavis

Slide 2

Slide 2

Yarn 2 2 2 2 2 2 2 @jamescdavis 2 2 2 @jamscdavis @jamescdavis

Slide 3

Slide 3

Yarn 2 2 2 2 2 2 2 @jamescdavis 2 2 2 @jamscdavis @jamescdavis

Slide 4

Slide 4

Volta! $ volta pin yarn@1 https://volta.sh @jamescdavis @jamscdavis @jamescdavis

Slide 5

Slide 5

Install ember-cli-typescript $ ember install ember-cli-typescript @jamescdavis @jamscdavis @jamescdavis

Slide 6

Slide 6

Throw out the blueprints! $ yarn remove ember-cli-typescript-blueprints $ npm uninstall ember-cli-typescript-blueprints @jamescdavis @jamscdavis @jamescdavis

Slide 7

Slide 7

But how do I get TypeScript things? @jamescdavis @jamscdavis @jamescdavis

Slide 8

Slide 8

But how do I get TypeScript things? $ cd app/components/ $ mv my-comp.js my-comp.ts @jamescdavis @jamscdavis @jamescdavis

Slide 9

Slide 9

Install @glimmer/tracking $ yarn install @glimmer/tracking @jamescdavis @jamscdavis @jamescdavis

Slide 10

Slide 10

Components @jamescdavis @jamscdavis @jamescdavis

Slide 11

Slide 11

Components @jamescdavis @jamscdavis @jamescdavis

Slide 12

Slide 12

Components Type ‘“hello!”’ is not assignable to type ‘number’. @jamescdavis @jamscdavis @jamescdavis

Slide 13

Slide 13

Component args @jamescdavis @jamscdavis @jamescdavis

Slide 14

Slide 14

Component args @jamescdavis @jamscdavis @jamescdavis

Slide 15

Slide 15

Component args Property ‘foo’ does not exist on type ‘{}’. @jamescdavis @jamscdavis @jamescdavis

Slide 16

Slide 16

Typing args @jamescdavis @jamscdavis @jamescdavis

Slide 17

Slide 17

Typing args Property ‘args’ has no initializer and is not definitely assigned in the constructor. @jamescdavis @jamscdavis @jamescdavis

Slide 18

Slide 18

Typing args @jamescdavis @jamscdavis @jamescdavis

Slide 19

Slide 19

Typing args @jamescdavis @jamscdavis @jamescdavis

Slide 20

Slide 20

Typing args @jamescdavis @jamscdavis @jamescdavis

Slide 21

Slide 21

Typing args @jamescdavis @jamscdavis @jamescdavis

Slide 22

Slide 22

Constructor args @jamescdavis @jamscdavis @jamescdavis

Slide 23

Slide 23

Constructor args @jamescdavis @jamscdavis @jamescdavis

Slide 24

Slide 24

Constructor args @jamescdavis @jamscdavis @jamescdavis

Slide 25

Slide 25

There’s a better way! @jamescdavis @jamscdavis @jamescdavis

Slide 26

Slide 26

There’s a better way! @jamescdavis @jamscdavis @jamescdavis

Slide 27

Slide 27

There’s a better way! @jamescdavis @jamscdavis @jamescdavis

Slide 28

Slide 28

Octane guides are coming! https://ember-cli-typescript.com/versions/octane-docs/ @jamescdavis @jamscdavis @jamescdavis

Slide 29

Slide 29

Thank you! @jamescdavis @jamscdavis @jamescdavis