Typed Ember: Strong Types for Better Apps

A presentation at EmberConf 2019 in in Portland, OR, USA by James C Davis

Typed Ember: Strong Types for Better Apps

Typed Ember: Strong Types for Better Apps

About Me

About Me

About Me

About Me

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

About My Work

TypeScript

TypeScript

TypeScript Isn't Magical

TypeScript Isn't Magical

¿por qué?

¿por qué?

“Automatic” Documentation

“Automatic” Documentation

API Documentation in Javascript

API Documentation in Javascript

API Documentation in TypeScript

API Documentation in TypeScript

Return Types are Inferred

Return Types are Inferred

Reduce Run-time Errors

Reduce Run-time Errors

Simple Function with Object Property Access

Simple Function with Object Property Access

Call Function with no Arguments

Call Function with no Arguments

TypeError: Cannot read property ‘bar’ of undefined

TypeError: Cannot read property ‘bar’ of undefined

This Makes us Sad

This Makes us Sad

Function with Object Method Call

Function with Object Method Call

Call Function with Object Where Property is Not a Method

Call Function with Object Where Property is Not a Method

TypeError: arg.baz is not a function

TypeError: arg.baz is not a function

More Tears

More Tears

What can we do about TypeError?

What can we do about TypeError?

TypeScript to the Rescue!

TypeScript to the Rescue!

Refactor with wild abandon

Refactor with wild abandon

What’s a type?

What’s a type?

Types are Shapes

Types are Shapes

Person Type

Person Type

Can we just provide one property?

Can we just provide one property?

Nope, doesn't type-check.

Nope, doesn't type-check.

Mismatched type for one property?

Mismatched type for one property?

Doesn't type-check.

Doesn't type-check.

All properties present and correct type?

All properties present and correct type?

Type-checks!

Type-checks!

Prevents you from trying to force a square peg in a round hole

Prevents you from trying to force a square peg in a round hole

How do we TypeScript in Ember?

How do we TypeScript in Ember?

ember-cli-typescript

ember-cli-typescript

build-time type checking

build-time type checking

compilation to Javascript

compilation to Javascript

type definitions

type definitions

blueprints

blueprints

How does it look like?

How does it look like?

SuperRentals tutorial app

SuperRentals tutorial app

Javascript model vs. TypeScript model

Javascript model vs. TypeScript model

Javascript service vs. TypeScript service

Javascript service vs. TypeScript service

Template that invokes the RentalListing component

Template that invokes the RentalListing component

RentalListing component converted to TypeScript Glimmer component

RentalListing component converted to TypeScript Glimmer component

Misspell model property

Misspell model property

Type Error at build-time with info on how to fix

Type Error at build-time with info on how to fix

Back to original RentalListing component

Back to original RentalListing component

Try to perform an invalid operation on a property

Try to perform an invalid operation on a property

Type Error at build-time with explanation

Type Error at build-time with explanation

Frequently Asked Questions

Frequently Asked Questions

Do I have to convert everything at once?

Do I have to convert everything at once?

Nope!

Nope!

Where do I start?

Where do I start?

models

models

services

services

shared components

shared components

But what about addons?

But what about addons?

precompile to JS

precompile to JS

include type definitions

include type definitions

TS benefits for everybody!

TS benefits for everybody!

Pain Points

Pain Points

New syntax and concepts to learn

New syntax and concepts to learn

Type definitions for third-party addons

Type definitions for third-party addons

Definitely Typed @types/*

Definitely Typed @types/*

Type definitions for Ember and Ember Data

Type definitions for Ember and Ember Data

also Definitely Typed  @types/ember  @types/ember-data

also Definitely Typed @types/ember @types/ember-data

Learn More

Learn More

Thank you!

Thank you!

Have you been curious about TypeScript, but not sure if it’s for you? Are you unconvinced of its advantages? Did you even know you could use TypeScript with Ember? If you answered yes to any of those questions (and even/especially if you didn’t) then this talk is for you!

Instead of a deep dive into using TypeScript with Ember, this talk will demonstrate everyday usage. We’ll work to prove that switching to TypeScript to build your Ember apps and addons will make them more robust and maintainable, provide a better developer experience, and lead to improved productivity.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.