Typed Ember: Strong Types for Better Apps

Ember Community Discord: @jamescdavis GitHub: @jamescdavis Twitter: @jamscdavis

About Me

About My Work

Front-end Lead, Center for Open Science

About My Work

Open Science Framework (osf.io)

About My Work

github.com/CenterForOpenScience/ember-osf-web

About My Work

Typed-Ember Team

About My Work

ember-cli-typescript co-maintainer

About My Work

Ember and Ember Data type definitions

About My Work

Type definitions for popular addons

TypeScript

TypeScript Isn't Magical

¿por qué?

“Automatic” Documentation

API Documentation in Javascript

API Documentation in TypeScript

Return Types are Inferred

Reduce Run-time Errors

Simple Function with Object Property Access

Call Function with no Arguments

TypeError: Cannot read property ‘bar’ of undefined

This Makes us Sad

Function with Object Method Call

Call Function with Object Where Property is Not a Method

TypeError: arg.baz is not a function

More Tears

What can we do about TypeError?

TypeScript to the Rescue!

Refactor with wild abandon

What’s a type?

Types are Shapes

Person Type

Can we just provide one property?

Nope, doesn't type-check.

Mismatched type for one property?

Doesn't type-check.

All properties present and correct type?

Type-checks!

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

How do we TypeScript in Ember?

ember-cli-typescript

build-time type checking

compilation to Javascript

type definitions

blueprints

How does it look like?

SuperRentals tutorial app

Javascript model vs. TypeScript model

Javascript service vs. TypeScript service

Template that invokes the RentalListing component

RentalListing component converted to TypeScript Glimmer component

Misspell model property

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

Back to original RentalListing component

Try to perform an invalid operation on a property

Type Error at build-time with explanation

Frequently Asked Questions

Do I have to convert everything at once?

Nope!

Where do I start?

models

services

shared components

But what about addons?

precompile to JS

include type definitions

TS benefits for everybody!

Pain Points

New syntax and concepts to learn

Type definitions for third-party addons

Definitely Typed @types/*

Type definitions for Ember and Ember Data

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

Learn More

Repo: github.com/typed-ember/ember-cli-typescript
Docs: typed-ember.github.io/ember-cli-typescript
Help: #e-typescript

Thank you!