|
| 1 | +# MAINTENANCE MODE |
| 2 | + |
| 3 | +ember-cli-typescript will no longer be updated unless necessary - ec-ts is no longer needed and all available features are configurable in userland. |
| 4 | + |
| 5 | +See the official TypeScript docs on the ember guides website here: https://guides.emberjs.com/release/typescript/ |
| 6 | +This section of the docs has details for getting started with TypeScript, beyond what is laid out here. |
| 7 | + |
| 8 | +With every release, we output the `--typescript` output of new ember apps to this StackBlitz: https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output-typescript |
| 9 | + |
| 10 | +## How to use TypeScript without `ember-cli-typescript`? |
| 11 | + |
| 12 | +Apps and v1 addons need to configure Babel to compile TypeScript files via the `ember-cli-babel` config, as described in the [ember-cli-babel](https://github.com/emberjs/ember-cli-babel#enabling-typescript-transpilation). |
| 13 | + |
| 14 | +Additionally, you will need the `tsconfig.json` generated by the Ember TypeScript blueprint (see below for details), and then can run [`glint`](https://typed-ember.gitbook.io/glint) or `tsc` directly on the CLI. (Again, see the official docs for details!) |
| 15 | + |
| 16 | +### Apps |
| 17 | + |
| 18 | +```js |
| 19 | +'ember-cli-babel': { |
| 20 | + enableTypeScriptTransform: true, |
| 21 | +}, |
| 22 | +``` |
| 23 | + |
| 24 | +### v1 addons |
| 25 | + |
| 26 | +Configure this in the addon's `index.js` in the root of the project: |
| 27 | + |
| 28 | +```js |
| 29 | +module.exports = { |
| 30 | + name: require('package').name, |
| 31 | + options: { |
| 32 | + 'ember-cli-babel': { |
| 33 | + enableTypeScriptTransform: true |
| 34 | + } |
| 35 | + } |
| 36 | +} |
| 37 | +``` |
| 38 | + |
| 39 | +### v2 addons |
| 40 | + |
| 41 | +The [V2 Addon Blueprint](https://github.com/embroider-build/addon-blueprint) does not use nor need ember-cli-typescript, nor any of its features. |
| 42 | + |
| 43 | +## What tsconfig.json should be used? |
| 44 | + |
| 45 | +The official blueprints for apps and v1 addons (as of 2023-12-06) specifies: |
| 46 | + |
| 47 | +<details><summary>for apps</summary> |
| 48 | + |
| 49 | +```jsonc |
| 50 | +{ |
| 51 | + "extends": "@tsconfig/ember/tsconfig.json", |
| 52 | + "compilerOptions": { |
| 53 | + // The combination of `baseUrl` with `paths` allows Ember's classic package |
| 54 | + // layout, which is not resolvable with the Node resolution algorithm, to |
| 55 | + // work with TypeScript. |
| 56 | + "baseUrl": ".", |
| 57 | + "paths": { |
| 58 | + "<%= name %>/tests/*": ["tests/*"], |
| 59 | + "<%= name %>/*": ["app/*"], |
| 60 | + "*": ["types/*"] |
| 61 | + } |
| 62 | + } |
| 63 | +} |
| 64 | +``` |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +</details> |
| 69 | + |
| 70 | +<details><summary>For v1 addons</summary> |
| 71 | + |
| 72 | +```jsonc |
| 73 | +{ |
| 74 | + "extends": "@tsconfig/ember/tsconfig.json", |
| 75 | + "compilerOptions": { |
| 76 | + // The combination of `baseUrl` with `paths` allows Ember's classic package |
| 77 | + // layout, which is not resolvable with the Node resolution algorithm, to |
| 78 | + // work with TypeScript. |
| 79 | + "baseUrl": ".", |
| 80 | + "paths": { |
| 81 | + "dummy/tests/*": ["tests/*"], |
| 82 | + "dummy/*": ["tests/dummy/app/*", "app/*"], |
| 83 | + "<%= addonName %>": ["addon"], |
| 84 | + "<%= addonName %>/*": ["addon/*"], |
| 85 | + "<%= addonName %>/test-support": ["addon-test-support"], |
| 86 | + "<%= addonName %>/test-support/*": ["addon-test-support/*"], |
| 87 | + "*": ["types/*"] |
| 88 | + } |
| 89 | + } |
| 90 | +} |
| 91 | +``` |
| 92 | + |
| 93 | +</details> |
| 94 | + |
| 95 | +## What `@types/*` packages do I install? |
| 96 | + |
| 97 | +<details><summary>if you're using ember-data</summary> |
| 98 | + |
| 99 | +``` |
| 100 | +"@types/ember": "^4.0.8", |
| 101 | +"@types/ember-data": "^4.4.13", |
| 102 | +"@types/ember-data__adapter": "^4.0.4", |
| 103 | +"@types/ember-data__model": "^4.0.3", |
| 104 | +"@types/ember-data__serializer": "^4.0.4", |
| 105 | +"@types/ember-data__store": "^4.0.5", |
| 106 | +"@types/ember__application": "^4.0.9", |
| 107 | +"@types/ember__array": "^4.0.7", |
| 108 | +"@types/ember__component": "^4.0.19", |
| 109 | +"@types/ember__controller": "^4.0.9", |
| 110 | +"@types/ember__debug": "^4.0.6", |
| 111 | +"@types/ember__destroyable": "^4.0.3", |
| 112 | +"@types/ember__engine": "^4.0.8", |
| 113 | +"@types/ember__error": "^4.0.4", |
| 114 | +"@types/ember__helper": "^4.0.4", |
| 115 | +"@types/ember__modifier": "^4.0.7", |
| 116 | +"@types/ember__object": "^4.0.9", |
| 117 | +"@types/ember__owner": "^4.0.7", |
| 118 | +"@types/ember__polyfills": "^4.0.4", |
| 119 | +"@types/ember__routing": "^4.0.17", |
| 120 | +"@types/ember__runloop": "^4.0.7", |
| 121 | +"@types/ember__service": "^4.0.6", |
| 122 | +"@types/ember__string": "^3.16.3", |
| 123 | +"@types/ember__template": "^4.0.4", |
| 124 | +"@types/ember__test": "^4.0.4", |
| 125 | +"@types/ember__utils": "^4.0.5", |
| 126 | +"@types/qunit": "^2.19.7", |
| 127 | +"@types/rsvp": "^4.0.6", |
| 128 | +``` |
| 129 | + |
| 130 | +</details> |
| 131 | + |
| 132 | +<details><summary>if you're not using ember-data</summary> |
| 133 | + |
| 134 | +You can use ember's built in types, so you only need the following: |
| 135 | + |
| 136 | +``` |
| 137 | +"@types/qunit": "^2.19.7", |
| 138 | +"@types/rsvp": "^4.0.6", |
| 139 | +``` |
| 140 | + |
| 141 | +Note that ember-data will eventually ship their own types, and allow _everyone_ to remove all the DT types. |
| 142 | + |
| 143 | +</details> |
| 144 | + |
| 145 | + |
| 146 | +----------------------------- |
| 147 | + |
1 | 148 | <center><h1>ember-cli-typescript</h1></center>
|
2 | 149 |
|
3 | 150 | <center>Use TypeScript in your Ember 2.x and 3.x apps!</center>
|
|
0 commit comments