Ember with Typescript | Ember.js tutorial | Component, Router, Controller, Service, Helper

Introduction to Ember with TypeScript

Overview of TypeScript in Front-End Development

• Sean introduces the topic, emphasizing TypeScript's popularity for front-end web applications due to its enhanced type tracking system that aids developers in writing cleaner and safer code.

Setting Up the Project

• The project setup begins with installing ember-cli-typescript, which is essential for enabling TypeScript within the application. This add-on facilitates importing necessary types and blueprints for generating files in TypeScript.

Creating Components with TypeScript

Generating a Component

• A new component named "welcome" is generated using the command ember g component gc welcome. The 'gc' stands for Glimmer Component, allowing for better performance and features.

Defining Argument Interfaces

• An argument interface is created to define the type of arguments passed into the component, specifically a string type argument called "name". This enhances type safety when rendering components.

Working with Local Properties

Implementing Local Properties

• Sean demonstrates how to create local properties in TypeScript, such as a string property named "hello", along with a getter that combines this local property with the passed argument "name".

Router and Controller Implementation

Creating Routes

• A new route called "products" is generated. The router file is modified to use pure class syntax instead of extending existing classes, promoting cleaner code practices.

Fetching Data from API

• An async function is set up to fetch product data from an API JSON file located in the public folder. Each product includes an ID, name, and price.

Defining Types and Models

Using Interfaces for Strong Typing

• A Product interface is defined within the router to specify types (ID as string, name as string, price as number), enhancing clarity on what data structures are being used throughout the application.

Controller Enhancements

Managing Model Data

• In the controller associated with the products route, auto-generated models are adjusted by removing unnecessary extensions and utilizing native class syntax.

Adding Complexity through Getters

Implementing Additional Logic

• Sean adds complexity by implementing getters that calculate properties like length of product arrays or total prices using reduce functions while maintaining strong typing throughout.

Creating Services in TypeScript

Service Declaration

• A service is created that manages a count variable along with functions to increase or decrease this count. Proper typing ensures clarity on how services interact within controllers.

Using Ember's Built-in Services

Injecting Router Service

• Sean demonstrates how to inject Ember's router service into components. He shows how it can be utilized for navigation actions like returning home from another page using typed definitions for better integration.

Helper Functions Implementation

Writing Function-Based Helpers

• A simple helper function is created that formats numbers by adding a dollar sign before them. This showcases how helpers can enhance UI presentation effectively while adhering to TypeScript standards.

Class-Based Helper Example

• Sean explains creating class-based helpers by extending existing helper classes and overriding methods while maintaining functionality similar to function-based helpers.