ember-cli-babel-typescript

0.0.0-beta.2 verified Fri May 01 auth: no javascript deprecated

An ember-cli addon that configures ember-cli-babel for TypeScript transpilation using @babel/plugin-transform-typescript. Version 0.0.0-beta.2, unstable beta release. It installs a beta version of ember-cli-babel with Babel 7 support, adds required transforms, enables .ts file transpilation, and integrates with eslint via typescript-eslint-parser. Does not perform type checking. Differentiator: simplifies TypeScript setup in Ember apps/addons by automating Babel and ESLint config changes.

Common errors

error TypeScript compilation failed: ... ↓

cause Missing TypeScript configuration or incompatible Babel plugin version.

fix

Ensure ember-cli-babel is at the correct beta version required by this addon.

error Cannot find module 'typescript-eslint-parser' ↓

cause Addon tries to install typescript-eslint-parser but may fail in offline or locked environments.

fix

Manually add 'typescript-eslint-parser' to devDependencies.

error Option '--typescript-interop' is not supported in ember-cli-babel ↓

cause User passes unsupported options to Babel via ember-cli-build.js.

fix

Remove custom Babel options; this addon configures what's needed.

Warnings

deprecated This package is a beta and likely superseded by official TypeScript support in Ember CLI. ↓

fix Consider using ember-cli-typescript or natively supported TypeScript in newer Ember versions.

breaking Installs an unreleased beta version of ember-cli-babel (Babel 7), which may break other addons. ↓

fix Pin ember-cli-babel version in package.json to control risk.

gotcha This addon does NOT perform type checking; only transpilation. TypeScript errors won't appear at build time. ↓

fix Run tsc separately or use an IDE plugin for type checking.

gotcha Uninstalls @ember-decorators/babel-transforms and babel-eslint, potentially breaking existing decorator setups. ↓

fix Ensure no other addons depend on those packages before installing.

Install

npm install ember-cli-babel-typescript

yarn add ember-cli-babel-typescript

pnpm add ember-cli-babel-typescript

Imports

default export
wrong
```
export default { ... }
```
correct
```
module.exports = { ... }
```
This is an Ember addon, uses CommonJS module.exports for configuration.
'ember-cli-babel-typescript' option in ember-cli-build.js
wrong
```
'ember-cli-babel-typescript': { enabled: true }
```
correct
```
'ember-cli-babel-typescript': { disable: false }
```
Configuration key is a string in ember-cli-build.js options object.

Quickstart

Installs the addon via ember and shows a basic TypeScript component using class syntax.

// ember install the addon
ember install @ClarkSource/ember-cli-babel-typescript

// Then in your component.js:
import Component from '@ember/component';

export default class MyComponent extends Component {
  greeting: string = 'Hello';
}