ember-cli-typescript

What is ember-cli-typescript?

ember-cli-typescript is an addon for Ember.js that enables TypeScript support in Ember applications. It provides a seamless integration of TypeScript into the Ember build pipeline, allowing developers to write their Ember code in TypeScript, which offers static type checking and other benefits.

What are ember-cli-typescript's main functionalities?

TypeScript Integration

This feature allows you to write Ember components using TypeScript. The code sample demonstrates a simple Glimmer component written in TypeScript, with type annotations for the component's arguments.

import Component from '@glimmer/component';

interface MyComponentArgs {
  name: string;
}

export default class MyComponent extends Component<MyComponentArgs> {
  get greeting(): string {
    return `Hello, ${this.args.name}!`;
  }
}

Type Checking

Type checking ensures that the types of the arguments passed to components are correct. The code sample shows a type error when an incorrect type is passed to the component.

import Component from '@glimmer/component';

interface MyComponentArgs {
  name: string;
}

export default class MyComponent extends Component<MyComponentArgs> {
  get greeting(): string {
    return `Hello, ${this.args.name}!`;
  }
}

// This will cause a type error
let component = new MyComponent({ name: 123 });

TypeScript Configuration

This feature allows you to configure TypeScript settings for your Ember project. The code sample shows a typical tsconfig.json file used to configure the TypeScript compiler options and include paths.

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*": ["types/*"]
    }
  },
  "include": [
    "app/**/*",
    "tests/**/*"
  ]
}

Other packages similar to ember-cli-typescript

ember-cli-coffeescript

ember-cli-coffeescript is an addon that allows you to write your Ember.js code using CoffeeScript. While it provides a similar integration for a different language, it does not offer the same level of static type checking and tooling support as TypeScript.

ember-cli-babel

ember-cli-babel is an addon that integrates Babel into the Ember build pipeline, allowing you to use the latest JavaScript features in your Ember code. While it does not provide type checking, it is a popular choice for modern JavaScript development in Ember.

ember-cli-flowtype

ember-cli-flowtype is an addon that integrates Flow, a static type checker for JavaScript, into Ember projects. It offers similar type checking capabilities as TypeScript but is less commonly used in the Ember ecosystem.

README

ember-cli-typescript

Enable typescript preprocessing on Ember 2.x apps.

Installation

In addition to ember-cli-typescript, the following files are required:

• typescript version 2.0.0 or greater
• @types/ember
• tsconfig

You can setup all of these at once with:

ember install ember-cli-typescript

All dependencies will be added to your package.json, and you're ready to roll!

Configuration file

Problem

The configuration file is used by both Ember CLI/broccoli and VS Code/tsc command line compiler.

Broccoli controls the inputs and the output folder of the various build steps that make the Ember build pipeline. Its expectation are impacted by Typescript configuration properties like "include", "exclude", "outFile", "outDir".

We want to allow you to change unrelated properties in the tsconfig file.

Solution

This addon takes the following approach to allow this dual use:

• is starts with the following blueprint

• the generated tsconfig file does not set "outDir" and sets "noEmit" to true. This allows you to run vscode and tsc without creating .js files throughout your codebase.

• before calling broccoli the addon removes "outDir" and sets "noEmit" and "includes"

Customization

You can customize this file further for your use case. For example to see the output of the compilation in a separate folder you are welcome to set and outDir and set noEmit to false. Then VS Code and tsc will generate files here while the broccoli pipeline will use its own temp folder.

Please see the wiki for additional how to tips from other users or to add your own tips. If an use case is frequent enough we can codify in the plugin. https://github.com/emberwatch/ember-cli-typescript/wiki/tsconfig-how-to

Incremental adoption

If you are porting an existing app to TypeScript, you can install this addon and migrate your files incrementally by changing their extensions from .js to .ts. A good approach is to start at your leaf files and then work your way up. As TypeScript starts to find errors, make sure to celebrate your (small) wins with your team, specially if some people are not convinced yet. We would also love to hear your stories.

VSCode setup

Create the file .vscode/settings.json with the following content:

// Place your settings in this file to overwrite default and user settings.
{
    "typescript.tsdk" : "node_modules/typescript/lib"
}