Typed Ember extends Confidence

Krystan Hu
ff
Menne
TypedEmber extends Confidence
How to defeat imposter syndrome with TypeScript

View Slide

Maya Angelou
“Uh-oh, they’re going to find out now. I’ve
run a game on everybody, and they're
going to find me out.”

View Slide

Elizabeth Cox, Educator
“To call it a syndrome is to downplay how
universal it is.”

View Slide

an observable fact or event
phenomenon

View Slide

View Slide

It's not an issue of competence.
It's an issue of confidence.

View Slide

It me!

View Slide

Image: Marco Zecchin for SERA Architects (with permission)
LinkedIn

View Slide

View Slide

Maybe I don’t belong here.

View Slide

Nevertheless, she persisted.

View Slide

View Slide

2020

View Slide

View Slide

Eureka!

View Slide

TODO
Surround yourself
with supportive
people.

Own your
accomplishments.

Learn to take your
mistakes in stride.

See yourself as a
work in progress.

Train yourself not to
need external
validation.

Realize there’s no
shame in asking for
help.

Use positive
a
ffi
rmations.

Say “yes” to
opportunities.

Visualize success.

Go to therapy.

Do some yoga.

Embrace feeling like
an imposter.

Decide to be
con
fi
dent.

View Slide

Convert your app to TypeScript to foster
confidence in your engineering team.
👍👍

View Slide

Don’t panic.

View Slide

What even is a “type”?
• What kind of data

• What you can and cannot do

View Slide

primitive-types.js
1;

'Hello, EmberConf!';

true;

9007199254740991n;

Symbol();

undefined;

null;

number

string

boolean

bigint

symbol

undefined

null
Primitives

View Slide

primitive-types.js
typeof 1;

//=> 'number'

typeof 'Hello, EmberConf!';

//=> 'string'

typeof true;

//=> 'boolean'

typeof 9007199254740991n;

//=> 'bigint'

typeof Symbol();

//=> 'symbol'

typeof undefined;

//=> 'undefined'

typeof null;

//=> 'object'

null === null;

//=> true
👋 handwave 👋 handwave

Making typeof null === 'null'
would break the internet
Primitives

View Slide

Structural types
structural/object.js
typeof { hello: 'EmberConf!' };

//=> 'object'

typeof ['Hello', 'EmberConf!'];

//=> 'object'

typeof new Set(['Hello', 'EmberConf!']);

//=> 'object'

typeof new Map([['Hello', 'EmberConf!']]);

//=> 'object'

class Tomster {}

let tomster = new Tomster();

typeof tomster;

//=> 'object'
object

View Slide

👋 handwave 👋 handwave

For framework code or when using iFrames, you might not want to use instanceof either.
Structural types
structural/object.js
class Tomster {}

let tomster = new Tomster();

tomster instanceof Tomster;

//=> true

Array.isArray(['Hello', 'EmberConf!']);

//=> true

View Slide

Structural types
structural/function.js
function hello(conf = 'EmberConf') {

return `Hello, ${conf}!`;

}

typeof hello;

//=> 'function'

hello();

//=> 'Hello, EmberConf!'

hello.call(this, 'RailsConf');

//=> 'Hello, RailsConf!'

hello.hola = 'Hola!';

hello.hola;

'Hola!'

object

View Slide

Wut?
“JavaScript is a loosely
typed and dynamic language.”

View Slide

loosely-typed/reassignment.js
let year = 2021;

typeof year;

//=> 'number'

year = 'two thousand and twenty one';

typeof year;

//=> 'string';

Loosey goosey

View Slide

loosely-typed/coercion.js
2 + 2;

//=> 4

2 + '2';

//=> '22'

2 + [2];

//=> '22'

2 + true;

//=> 3

2 + null;

//=> 2

2 + undefined;

//=> NaN

2 + new Set([2]);

//=> '2[object Set]’
Loosey goosey
🤪

View Slide

My Unassuming JavaScript Website

Thank you for coming to my website! I wrote some loosely typed and dynamic JavaScript.

2 + 2 = 22 LOLOL

Here’s a cat pic.

/\_/\

( o.o )

> ^ <

www.mywebsite.com
A real dynamo
Uncaught TypeError: Cannot read property 'oops' of undefined
Uncaught TypeError: undefined is not a function
Uncaught TypeError: Cannot set property 'foo' of undefined

View Slide

Meme: KC Greene

View Slide

What could go wrong
1. Uncaught TypeError: Cannot read property 'oops' of undefined

2. TypeError: 'undefined' is not an object (evaluating 'undefined.oops')

3. TypeError: null is not an object (evaluating 'null.oops')

5. TypeError: Object doesn’t support property or method 'oops'

6. Uncaught TypeError: undefined is not a function

8. Uncaught TypeError: Cannot read property 'length' of undefined

9. Uncaught TypeError: Cannot set property 'oops' of undefined

10. ReferenceError: oops is not defined
🥴

View Slide

Uncertainty

is the enemy of

confidence.

View Slide

View Slide

JavaScript syntax
shout.js
function shout(message) {

return message.toUpperCase();

}

shout('hello');

//=> 'HELLO'

View Slide

shout.ts
function shout(message: string) {


}

shout('hello');

//=> 'HELLO'
TypeScript syntax

View Slide

TypeScript compiler (tsc)
shout.ts


}

shout('hello');

//=> 'HELLO'
Terminal
$ yarn tsc shout.ts

shout.js (compiled)


}

shout('hello');

//=> 'HELLO'

View Slide

TypeScript compiler (tsc)
shout.ts


}

shout('hello');

//=> 'HELLO'

shout(42);

Terminal
$ yarn tsc shout.ts

$ yarn tsc shout.ts

shout.ts:8:7 - error TS2345:
Argument of type 'number' is not
assignable to parameter of type
'string'.

8 shout(42);

~~

Found 1 error.
shout.js (compiled)


}

shout('hello');

//=> ‘HELLO'

shout(42);

//=> Uncaught TypeError:
message.toUpperCase is not a
function

View Slide

shout.ts
TypeScript in your text editor

View Slide

dom-stuff.ts
TypeScript in your text editor

View Slide

TypeScript is the answer key
shout.ts
shout.ts
shout.ts

View Slide

JavaScript: loose, dynamic

TypeScript: strict, static

View Slide

Statically Typed
Terminal
$ yarn tsc shout.ts

shout.ts:8:7 - error TS2345:
Argument of type 'number' is not
assignable to parameter of type
'string'.

8 shout(42);

~~

Found 1 error.

View Slide

statically-typed/inference.ts
Statically Typed

View Slide

statically-typed/annotation.ts
Statically Typed

View Slide

Statically Typed*
(*but also dynamically typed because it compiles to JavaScript)

View Slide

Don’t shoot the messenger.

View Slide

strict/reassignment-error.ts
Strict

View Slide

Strict
strict/coercion-error.ts

View Slide

strict/coercion-allowed.ts
2 + '2';

//=> '22'

2 + document.querySelector('input[type="number"]').value;

//=> '22'

Strict, but not TOO strict
😬

View Slide

let itemCount = 42;

throw 'Too many items in queue! Item count: ' + itemCount;

//=> Error: Too many items in queue! Item count: 42

idiomatic: (adj.) everyone does it

View Slide

tscon
fi
g.json
{

"compilerOptions": {

"noImplicitAny": true,

"noImplicitThis": true,

"alwaysStrict": true,

"strictNullChecks": true,

"strictPropertyInitialization": true,

"noFallthroughCasesInSwitch": true,

"noUnusedLocals": true,

View Slide

Strictness → fewer bugs → confidence

View Slide

primitives.ts
let myVariable: number = 1;

let myVariable: bigint = 9007199254740991n;

let myVariable: string = 'Hello, EmberConf!';

let myVariable: boolean = true;

let myVariable: symbol = Symbol();

let myVariable: undefined;

let myVariable: null = null;

Primitives in TypeScript

View Slide

primitives.ts
let myVariable = 1;

let myVariable = 9007199254740991n;

let myVariable = 'Hello, EmberConf!';

let myVariable = true;

let myVariable = Symbol();

let myVariable;

let myVariable = null;

Primitives in TypeScript

View Slide

structural/array.ts
let myVariable: Array = ['Hello', 'EmberConf!'];

Structural types in TypeScript
generic: (adj.) a reusable type that takes another type as an argument

View Slide

structural/function.ts
function sayHello(crowd: string): string {

return `Hello, ${crowd}!`;

}

sayHello('EmberConf');

//=> 'Hello, EmberConf!'


View Slide

structural/object.ts
interface: (noun) a syntax that enforces the shape of an object

View Slide

Moar types!

View Slide

Additional-types/any.ts
Into the void…

View Slide

additional-types/unknown.ts
function prettyPrint(raw: unknown): string {

if (typeof raw === 'string') {

// TypeScript now knows that `raw` is a string

return raw;

}

if (Array.isArray(raw)) {

// TypeScript now knows that `raw` is an array

return raw.join(', ');

}

throw '`prettyPrint` not implemented for this type';

}
Into the unknown…
narrow: (verb) to re
fi
ne a type to a more speci
fi
c type

View Slide

Additional-types/any.ts
let yolo: any = 'hehehe';

// TypeScript won't yell at you here

yolo = null;

// or here

yolo.meaningOfLife;

//=> TypeError: Cannot read property 'meaningOfLife' of null

Into the abyss…
Pro tip: You can disallow any with tsconfig and eslint-typescript rules!

View Slide

Converting your legacy app:

a meta-tutorial

View Slide

ember-super-rentals.netlify.app

View Slide

Ember + TypeScript = ？

View Slide

Ember Octane + TypeScript = 🧡

View Slide

Terminal
$ ember install ember-cli-typescript

🚧 Installing packages…

ember-cli-typescript,

typescript,

@types/ember,

@types/ember-data,

Etc…

create tsconfig.json

create app/config/environment.d.ts

create types/super-rentals/index.d.ts

create types/ember-data/types/registries/model.d.ts

create types/global.d.ts
ember-cli-typescript

View Slide

Terminal
$ ember install ember-cli-typescript

🚧 Installing packages…

ember-cli-typescript,

typescript,

@types/ember,

@types/ember-data,

Etc…

create tsconfig.json

create app/config/environment.d.ts

create types/super-rentals/index.d.ts

create types/ember-data/types/registries/model.d.ts

create types/global.d.ts

Installed addon package.
ember-cli-typescript

View Slide

Gradual typing hacks

View Slide

Gradual typing hacks
• TypeScript declaration
fi
les (.d.ts)

• unknown

• any

• @ts-expect-error

View Slide

tscon
fi
g.json
{


// "alwaysStrict": true,

// "noImplicitAny": true,

// "noImplicitThis": true,

// "strictBindCallApply": true,

// "strictFunctionTypes": true,

// "strictNullChecks": true,

// "strictPropertyInitialization": true,

// ...

}

}

Gradual strictness
Or: How I Learned to Stop Worrying and Love the Strictness
Less strict More strict

View Slide

tscon
fi
g.json
{



// "noImplicitAny": true,






// ...

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{









// ...

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{









// …

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{





"strictBindCallApply": true,




// ...

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{






"strictFunctionTypes": true,



// ...

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{









// ...

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{








"strictPropertyInitialization": true,

// ...

}

}

Gradual strictness

View Slide

tscon
fi
g.json
{


"strict": true,

// ...

}

}

Gradual strictness

View Slide

Terminal
$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
Gradual strictness
Ludicrous mode!
🤯

View Slide

Where do we start?

View Slide

Where do we start?
Outer Leaves

Models
Routes, Services, Adapters, Serializers
Inner Leaves

Components, Controllers

View Slide

Where do we start?
Outer Leaves

Models
Inner Leaves

👉
👇
👈

View Slide

Where do we start?
Outer Leaves

Models
Inner Leaves

🥸
🤠 🤩
🤡

View Slide

Where do we start?
Outer Leaves

Models
Inner Leaves

🥸
🤠 🤩
🤡
👉
👇
👈

View Slide

app/models/rental.js
import Model, { attr } from '@ember-data/model';

const COMMUNITY_CATEGORIES = ['Condo', 'Townhouse', 'Apartment'];

export default class RentalModel extends Model {

@attr title;

@attr owner;

@attr city;

@attr location;

@attr category;

@attr image;

@attr bedrooms;

@attr description;

get type() {

if (COMMUNITY_CATEGORIES.includes(this.category)) {

return 'Community';

} else {

return 'Standalone';

}

}

}
Models

View Slide

app/models/rental.js



@attr title;

@attr owner;

@attr city;

@attr location;

@attr category;

@attr image;

@attr bedrooms;

@attr description;

get type() {


return 'Community';

} else {


}

}

}
Models
Terminal
$ mv app/models/rental.js app/models/rental.ts

View Slide

app/models/rental.ts



@attr title;

@attr owner;

@attr city;

@attr location;

@attr category;

@attr image;

@attr bedrooms;

@attr description;

get type() {


return 'Community';

} else {


}

}

}
Models

View Slide

Models

View Slide

Models
public/api/rentals.json
{

"data": [

{

"type": "rentals",

"id": "grand-old-mansion",

"attributes": {

"title": "Grand Old Mansion",

"owner": "Veruca Salt",

"city": "San Francisco",

"location": {

"lat": 37.7749,

"lng": -122.4194

},

"category": "Estate",

"image": "https://upload.wikimedia.org/mansion.jpg",

"bedrooms": 15,

"description": "This grand old mansion sits..."

}

},

// ...

]

}

View Slide

Models

View Slide

Models
Terminal
$ git commit -a -m “Convert Rental Model to TS”

View Slide

relationship-example.ts
import Model, {

AsyncBelongsTo,

AsyncHasMany,

belongsTo,

hasMany,

} from '@ember-data/model';

import Comment from 'my-app/models/comment';

import User from 'my-app/models/user';

export default class PostModel extends Model {

@belongsTo('user') declare author: AsyncBelongsTo;

@hasMany('comments') declare comments: AsyncHasMany;

}
Model Relationships

View Slide

app/routes/index.js
import Route from '@ember/routing/route';

import { inject as service } from '@ember/service';

export default class IndexRoute extends Route {

@service store;

model() {

return this.store.findAll('rental');

}

}

Routes

View Slide

app/routes/index.js
import Route from '@ember/routing/route';

import { inject as service } from '@ember/service';

export default class IndexRoute extends Route {

@service store;

model() {

return this.store.findAll('rental');

}

}

Routes
Terminal
$ mv app/routes/index.js app/routes/index.ts

View Slide

app/routes/index.ts
Routes

View Slide

app/routes/index.ts
Routes


// ...

}

declare module 'ember-data/types/registries/model' {

export default interface ModelRegistry {

rental: RentalModel;

}

}

View Slide

app/routes/index.ts
Routes

View Slide

app/routes/index.ts
Routes
Terminal
$ git commit -a -m “Convert Index Route to TS”

View Slide

Components
ember-super-rentals.netlify.app

View Slide

app/components/rentals/
fi
lter.js
import Component from '@glimmer/component';

export default class RentalsFilterComponent extends Component {

get results() {

let { rentals, query } = this.args;

if (query) {

rentals = rentals.filter((rental) => rental.title.includes(query));

}

return rentals;

}

}

Components
Terminal
$ mv app/components/rentals/filter.js app/components/rentals/filter.ts

View Slide

fi
lter.ts
Components

View Slide

fi
lter.ts
Components
app/components/rentals.hbs

{{#each results as |rental|}}

{{/each}}

app/templates/index.hbs

View Slide

fi
lter.ts
Components

View Slide

fi
lter.ts
Components
🐛

View Slide

fi
lter.ts
Components

View Slide

app/components/rentals.ts
Components

import { tracked } from '@glimmer/tracking';

import IndexRoute from 'super-rentals/routes';

import { ModelFrom } from 'super-rentals/types/util';

interface RentalsArgs {

rentals: ModelFrom;

}

export default class RentalsComponent extends Component {

@tracked query = '';

}

View Slide

fi
lter.ts
Components

View Slide

fi
lter.ts
Components
Terminal
$ git commit -a -m “Convert Rentals::Filter to TS”

View Slide

Components app/components/map.js

import ENV from 'super-rentals/config/environment';

export default class MapComponent extends Component {

get src() {

let { lng, lat } = this.args;

return `${ENV.MAPBOX_URL}/${lng},${lat}`;

}

}

View Slide

Components app/components/map.js

import ENV from 'super-rentals/config/environment';


get src() {

let { lng, lat } = this.args;

return `${ENV.MAPBOX_URL}/${lng},${lat}`;

}

}

Terminal
$ mv app/components/map.js app/components/map.ts

View Slide

Components app/components/map.ts

View Slide

app/components/rental.hbs

@lat={{@rental.location.lat}}

@lng={{@rental.location.lng}}

/>

View Slide

Thinking in
TypeScript

View Slide

Thinking in
TypeScript
(Once we have template type-checking,
this won’t be necessary.)

View Slide

Terminal
$ git commit -a -m “Convert Map to TS”

View Slide

View Slide

app/components/map.js
/**

* @typedef {object} MapArgs

* @property {number | undefined} lng

* @property {number | undefined} lat

*/

/** @type {Component} */


/** @type {number} */

get lng() {

assert('Please provide `lng` arg', this.args.lng);

return this.args.lng;

}


get lat() {

assert('Please provide `lat` arg', this.args.lat);

return this.args.lat;

}

/** @type {string} */

get src() {

return `${ENV.MAPBOX_URL}/${this.lng},${this.lat}`;

}

}
TS without TS
JSDoc + VSCode

View Slide

app/components/map.js
// @ts-check

/**

* @typedef {object} MapArgs

* @property {number | undefined} lng

* @property {number | undefined} lat

*/

/** @type {Component} */



get lng() {

assert('Please provide `lng` arg', this.args.lng);

return this.args.lng;

}


get lat() {

assert('Please provide `lat` arg', this.args.lat);

return this.args.lat;

}

/** @type {string} */

get src() {

return `${ENV.MAPBOX_URL}/${this.lng},${this.lat}`;

}

}
TS without TS
JSDoc + VSCode

View Slide

Typed Ember extends Confidence

Typed Ember extends Confidence

Krystan HuffMenne

More Decks by Krystan HuffMenne

Featured

Transcript