Typed Ember: Strong Types for Better Apps
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
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
Thank you!