ember-cli-typescript
Advanced tools
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.
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/**/*"
]
}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 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 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.
This README focuses on basic information about setting up and using the addon. For more details, see the documentation, which includes:
…and much more!
Note: Because ember-cli-typescript is part of the build pipeline, the process for installing it differs slightly between apps and addons!
In apps, you can simply ember install the dependency like normal:
ember install ember-cli-typescript@latest
To work properly, Ember addons must declare this library as a dependency, not a devDependency. You can ember install it by running:
ember install ember-cli-typescript@latest --save
All dependencies will be added to your package.json, and you're ready to roll! If you're upgrading from a previous release, see below! you should check to merge any tweaks you've made to tsconfig.json.
There are a number of important changes between ember-cli-typescript v1 and v2, which mean the upgrade process is straightforward but specific:
If you deviate from this order, you are likely to have a much more difficult time upgrading!
ember-cli-typescript requires ember-cli-babel at version 7.1.0 or above, which requires ember-cli 2.13 or above. It also requires @babel/core 7.2.0 or higher.
The recommended approach here is to deduplicate existing installations of the dependency, remove and reinstall ember-cli-babel to make sure that all its transitive dependencies are updated to the latest possible, and then to deduplicate again.
If using yarn:
npx yarn-deduplicate
yarn remove ember-cli-babel
yarn add --dev ember-cli-babel
npx yarn-deduplicate
If using npm:
npm dedupe
npm uninstall ember-cli-babel
npm install --save-dev ember-cli-babel
npm dedupe
Note: If you are also using ember-decorators—and specifically the babel-transform that gets added with it—you will need update @ember-decorators/babel-transforms as well (anything over 3.1.0 should work):
ember install ember-decorators@^3.1.0 @ember-decorators/babel-transforms@^3.1.0
Follow the same process of deduplication, reinstallation, and re-deduplication as described for ember-cli-babel above. This will get you the latest version of ember-decorators and, importantly, its @ember-decorators/babel-transforms dependency.
Note: Because ember-cli-typescript is part of the build pipeline, the process for updating it differs slightly between apps and addons!
In apps, you can simply ember install the dependency like normal:
ember install ember-cli-typescript@latest
To work properly, Ember addons must declare this library as a dependency, not a devDependency. This is a change from ember-cli-typescript v1.
Remove ember-cli-typescript from your dependencies.
With yarn:
yarn remove ember-cli-typescript
With npm:
npm uninstall ember-cli-typescript
Re-install it with ember install:
ember install ember-cli-typescript@latest --save
Since we now integrate in a more traditional way into Ember CLI's build pipeline, there are two changes required for addons using TypeScript.
Addons can no longer use .ts in app, because an addon's app directory gets merged with and uses the host's (i.e. the other addon or app's) preprocessors, and we cannot guarantee the host has TS support. Note that .ts will continue to work for in-repo addons because the app build works with the host's (i.e. the app's, not the addon's) preprocessors.
Similarly, apps must use .js to override addon defaults in app, since the different file extension means apps no long consistently "win" over addon versions (a limitation of how Babel + app merging interact).
ember-cli-typescript v2 uses Babel to compile your code, and the TypeScript compiler only to check your code. This makes for much faster builds, and eliminates the differences between Babel and TypeScript in the build output that could cause problems in v1. However, because of those differences, you’ll need to make a few changes in the process of upgrading.
const enum is not supported at all. You will need to replace all uses of const enum with simply enum or constants.
Using ES5 getters or settings with this type annotations is not supported through at least Babel 7.3. However, they should also be unnecessary with ES6 classes, so you can simply remove the this type annotation.
Trailing commas after rest function parameters (function foo(...bar[],) {}) are disallowed by the ECMAScript spec, so Babel also disallows them.
Re-exports of types have to be disambiguated to be types, rather than values. Neither of these will work:
export { FooType } from 'foo';
import { FooType } from 'foo';
export { FooType };
In both cases, Babel attempts to emit a value export, not just a type export, and fails because there is no actual value to emit. You can do this instead as a workaround:
import * as Foo from 'foo';
export type FooType = Foo.FooType;
When seeking help, you should first consider what you need, and which aspect of the Ember+TypeScript ecosystem your issue pertains to.
We have a channel (#e-typescript) on the Ember Community Discord server where you can ask about getting started, good resources for self-directed learning and more.
If you've found that some of the Ember type information is missing things, or is incorrect in some way, please first ensure you're using the latest version of the packages this addon installs. Although StackOverflow and Discuss are not the advised places to report problems, you may find an answer there.
If you don't find an answer, please open an enhancement request or bug report in this project.
If you run into a problem with the way TypeScript is compiled in Ember apps (i.e., a broccoli error message, incorrect build output, etc...), please first check StackOverflow and Discuss, as you may find an answer.
If you don't find an answer, please open an enhancement request or bug report in this project.
The TypeScript compiler does some very basic linting of your code, but most developers use (and Microsoft now officially recommends) ESLint.
One sure way to tell which tool is generating an error message is that Linters like ESLint or TSLint will always mention their name, and the name of the pertinent rule, when it alerts you to a violation.
For example, in VS Code, you might see a popover with this message:
[eslint] variable name must be in lowerCamelCase, PascalCase or UPPER_CASE (variable-name)
Here, variable-name is the name of the rule, and [eslint] is the source of the rule.
ember-cli-tslint project by clicking here.ember-cli-typescript runs its test suite against Ember CLI current and beta. It's also in active use in several large applications. Any breakage for upcoming releases should be detected and fixed ahead of those releases, but you can help us guarantee that by running your own Ember.js+TypeScript app with beta and canary turned on and let us know if you run into issues with upcoming Ember.js releases.
This library supports the current version of TypeScript 
and at least one previous minor or major release. In other words, if 3.4 is the latest release, we do support 3.4.x, 3.3.x, and might support 3.2.x as well. (The test suite only runs against the current release and next branch, but the TS versions do not affect the build process in the same way they do type definitions.)
This addon uses TypeScript for its own implementation, so if you install ember-cli-typescript from git rather than from the npm registry, you won't get compiled .js files. To get everything working, you can install ts-node as a project dependency, and ember-cli-typescript will ensure it's registered correctly to transpile source files as needed.
FAQs
Allow Ember apps to use TypeScript files.
We found that ember-cli-typescript demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.