2
2
3
3
[ ![ * nix build status] ( https://travis-ci.org/emberwatch/ember-cli-typescript.svg?branch=master )] ( https://travis-ci.org/emberwatch/ember-cli-typescript )
4
4
[ ![ Windows build status] ( https://ci.appveyor.com/api/projects/status/pjilqv1xo3o9auon/branch/master?svg=true )] ( https://ci.appveyor.com/project/chriskrycho/ember-cli-typescript/branch/master )
5
+ [ ![ Ember Observer Score] ( https://emberobserver.com/badges/ember-cli-typescript.svg )] ( https://emberobserver.com/addons/ember-cli-typescript )
5
6
6
7
Use TypeScript in your Ember 2.x apps!
7
8
@@ -16,89 +17,71 @@ ember install ember-cli-typescript
16
17
17
18
All dependencies will be added to your ` package.json ` , and you're ready to roll!
18
19
19
- In addition to ember-cli-typescript, the following files are installed:
20
+ In addition to ember-cli-typescript, the following are installed:
20
21
21
- - [ typescript] ( https://github.com/Microsoft/TypeScript ) version 2.0.0 or greater
22
- - [ @types/ember ] ( https://www.npmjs.com/package/@types/ember )
23
- - [ tsconfig] ( https://www.typescriptlang.org/docs/handbook/tsconfig-json.html )
22
+ - Packages:
23
+ + [ ` typescript ` ] ( https://github.com/Microsoft/TypeScript ) (2.4 or greater)
24
+ + [ ` @types/ember ` ] ( https://www.npmjs.com/package/@types/ember )
25
+ + [ ` @types/rsvp ` ] ( https://www.npmjs.com/package/@types/rsvp )
26
+ + [ ` @types/ember-testing-helpers ` ] ( https://www.npmjs.com/package/@types/ember-testing-helpers )
27
+ - Files:
28
+ + [ ` tsconfig.json ` ] ( https://www.typescriptlang.org/docs/handbook/tsconfig-json.html )
24
29
25
30
26
- ## Write your add-ons in TypeScript
27
-
28
- To support shipping add-ons with TypeScript, move ` ember-cli-typescript ` from
29
- ` devDependencies ` to ` dependencies ` in your ` package.json ` .
30
-
31
- This is a function of the way Ember CLI add-ons work, not specific to TypeScript
32
- or this add-on. * Any* transpiler support (including this, CoffeeScript, or even
33
- Babel) needs to be specified in the ` dependencies ` , not ` devDependencies ` , to
34
- use it for developing the add-on itself: that's how its compiled output can be
35
- used in consuming apps or add-ons.
36
-
37
- ### :warning : Warning: install size
38
-
39
- This is a WIP :construction : part of the add-on, and it * will* make a dramatic
40
- difference in the size of your add-on in terms of installation. (It won't affect
41
- the size of the add-on after build, of course!)
42
-
43
- We're working on making a solution that lets us ship generated typings and
44
- compiled JavaScript instead of shipping the entire TypeScript compiler toolchain
45
- for add-ons. If you're using ember-cli-typescript in an add-on, you might add a
46
- note to your users about the install size until we get that sorted out!
47
-
48
- ## Configuration file notes
31
+ ## Notes on ` tsconfig.json `
49
32
50
33
If you make changes to the paths included in your ` tsconfig.json ` , you will need
51
- to restart the server to take the changes into account.
52
-
53
- ### Quirks with ` tsconfig.json `
54
-
55
- Additionally, depending on what you're doing, you may notice that your tweaks to
56
- ` tsconfig.json ` aren't applied * exactly* as you might expect.
34
+ to restart the server to take the changes into account. Additionally, depending
35
+ on what you're doing, you may notice that your tweaks to ` tsconfig.json ` aren't
36
+ applied * exactly* as you might expect.
57
37
58
- #### The Problem
38
+ ### The Problem
59
39
60
- The configuration file is used by both Ember CLI (via [ broccoli] ) and the ` tsc `
61
- command line compiler (used by e.g. [ VS Code ] , JetBrains IDEs, etc.) .
40
+ The configuration file is used by both Ember CLI (via [ broccoli] ) and for tool
41
+ integration in editors .
62
42
63
43
[ broccoli ] : http://broccolijs.com/
64
- [ VS Code ] : http://code.visualstudio.com/
65
44
66
45
Broccoli controls the inputs and the output folder of the various build steps
67
46
that make the Ember build pipeline. Its expectation are impacted by TypeScript
68
47
configuration properties like "include", "exclude", "outFile", "outDir".
69
48
70
49
We want to allow you to change unrelated properties in the tsconfig file.
71
50
72
- #### The Solution
51
+ ### The Solution
73
52
74
53
This addon takes the following approach to allow this dual use:
75
54
76
- - it starts with the default [ blueprint] .
77
-
78
- - the generated tsconfig file does not set "outDir" and sets "noEmit" to true.
79
- This allows you to run vscode and tsc without creating ` .js ` files throughout
80
- your codebase.
81
-
82
- - before calling broccoli the addon removes any configured ` outDir ` , sets the
83
- ` noEmit ` option to false (so that the compiler will emit files for consumption
84
- by your app!), and removes all values set for ` include ` , since we use Broccoli
85
- to manage the build pipeline directly.
55
+ - We generate a good default [ blueprint] , which will give you type resolution in
56
+ your editor for normal Ember.js paths. The generated tsconfig file does not
57
+ set ` "outDir" ` and sets ` "noEmit" ` to ` true ` . This allows you to run editors
58
+ which use the compiler without creating ` .js ` files throughout your codebase.
59
+
60
+ - Then, before calling broccoli, the addon:
61
+ + removes any configured ` outDir ` to avoid name resolution problems in the
62
+ broccoli tree processing
63
+ + sets the ` noEmit ` option to ` false ` so that the compiler will emit files
64
+ for consumption by your app
65
+ + sets ` allowJs ` to ` false ` , so that the TypeScript compiler does not try to
66
+ process JavaScript files imported by TypeScript files in your app
67
+ + removes all values set for ` include ` , since we use Broccoli to manage the
68
+ build pipeline directly.
86
69
87
70
[ blueprint ] : https://github.com/emberwatch/ember-cli-typescript/blob/master/blueprints/ember-cli-typescript/files/tsconfig.json
88
71
89
72
### Customization
90
73
91
- You can customize the ` tsconfig.json ` file further for your use case. For
92
- example to see the output of the compilation in a separate folder you are
93
- welcome to set and outDir and set noEmit to false. Then VS Code and tsc will
94
- generate files here while the broccoli pipeline will use its own temp folder.
74
+ You can still customize the ` tsconfig.json ` file further for your use case. For
75
+ example, to see the output of the compilation in a separate folder you are
76
+ welcome to set ` "outDir" ` to some path and set ` "noEmit" ` to ` false ` . Then tools
77
+ which use the TypeScript compiler will generate files at that location, while
78
+ the broccoli pipeline will continue to use its own temp folder.
95
79
96
80
Please see [ the wiki] for additional how to tips from other users or to add
97
81
your own tips. If an use case is frequent enough we can codify in the plugin.
98
82
99
83
[ the wiki ] : https://github.com/emberwatch/ember-cli-typescript/wiki/tsconfig-how-to
100
84
101
-
102
85
## Incremental adoption
103
86
104
87
If you are porting an existing app to TypeScript, you can install this addon and
@@ -115,76 +98,104 @@ on the background and roadmap for the project.
115
98
116
99
[ typing-your-ember ] : http://www.chriskrycho.com/typing-your-ember.html
117
100
101
+ ## :construction : Using ember-cli-typescript with Ember CLI addons
102
+
103
+ ** :warning : Warning: this is * not* currently recommended. This is a WIP part of the
104
+ add-on, and it * will* make a dramatic difference in the size of your add-on in
105
+ terms of installation. The upcoming 1.1 release will enable a much better
106
+ experience for consumers of your addon.**
107
+
108
+ We're working on making a solution that lets us ship generated typings and
109
+ compiled JavaScript instead of shipping the entire TypeScript compiler toolchain
110
+ for add-ons. If you're using ember-cli-typescript in an add-on, you might add a
111
+ note to your users about the install size until we get that sorted out!
112
+
113
+ If you want to experiment with this in the meantime, you can do so, but please
114
+ give users fair warning about the increased size. To enable TypeScript for your
115
+ addon, simple move ` ember-cli-typescript ` from ` devDependencies ` to
116
+ ` dependencies ` in your ` package.json ` .
117
+
118
118
## Not (yet) supported
119
119
120
- While TS works nicely for many things in Ember, there are a number of corners
121
- where it * won't* help you out. Some of them are just a matter of further work on
122
- updating the [ typings] ; others are a matter of further support landing in
123
- TypeScript itself.
120
+ While TS already works nicely for many things in Ember, there are a number of
121
+ corners where it * won't* help you out. Some of them are just a matter of further
122
+ work on updating the [ existing typings] ; others are a matter of further support
123
+ landing in TypeScript itself.
124
+
125
+ [ existing typings ] : https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/ember
124
126
125
- [ typings ] : https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/ember
127
+ We are hard at work (and would welcome your help!) [ writing new typings] for
128
+ Ember which can give correct types for Ember's custom object model. If you'd
129
+ like to try those out, please see instructions in that repo!
126
130
127
- Here is the short list of things which do * not* work yet.
131
+ [ writing new typings ] : https://github.com/typed-ember/ember-typings
132
+
133
+ Here is the short list of things which do * not* work yet in the version of the
134
+ typings published on DefinitelyTyped.
128
135
129
136
### Type safety when invoking actions
130
137
131
138
TypeScript won't detect a mismatch between this action and the corresponding
132
139
call in the template:
133
140
134
141
``` typescript
135
- actions : {
136
- turnWheel (degrees : number ) {
137
- ...
138
- }
139
- }
142
+ Ember .Component .extend ({
143
+ actions: {
144
+ turnWheel(degrees : number ) {
145
+ // ...
146
+ }
147
+ },
148
+ })
140
149
```
141
150
142
151
``` hbs
143
152
<button onclick={{action 'turnWheel' 'NOT-A-NUMBER'}}> Click Me </button>
144
153
```
145
154
146
- Likewise, it won't notice a problem when you use ` send ` :
155
+ Likewise, it won't notice a problem when you use the ` send ` method :
147
156
148
157
``` typescript
149
158
// TypeScript compiler won't detect this type mismatch
150
159
this .send (' turnWheel' , ' ALSO-NOT-A-NUMBER' );
151
160
```
152
161
153
- ### Type safety when invoking KVO compliant accessors or mutators
162
+ ### Type safety with ` Ember.get ` , ` Ember.set ` , etc.
154
163
155
- When you use ` Ember.get ` or ` Ember.set ` , TypeScript won't ( yet!) warn you that
156
- you're using the wrong type. So in ` foo() ` here, this will pass the compiler but
157
- be wrong at runtime:
164
+ When you use ` Ember.get ` or ` Ember.set ` , TypeScript won't yet warn you that
165
+ you're using the wrong type. So in ` foo() ` here, this will compile but be
166
+ wrong at runtime:
158
167
159
168
``` typescript
160
169
Ember .Object .extend ({
161
170
urls: <string []> null ,
162
171
port: 4200 , // number
172
+
163
173
init() {
164
174
this ._super (... arguments );
165
175
this .set (' urls' , []);
166
176
},
177
+
167
178
foo() {
168
179
// TypeScript won't detect these type mismatches
169
180
this .get (' urls' ).addObject (51 );
170
181
this .set (' port' , ' 3000' );
171
- }
182
+ },
172
183
});
173
184
```
174
185
175
186
176
187
### The type definitions I need to reference are not in ` node_modules/@types `
177
188
178
- By default ` ember-cli- typescript` loads up any type defs found in
189
+ By default the typescript compiler loads up any type definitions found in
179
190
` node_modules/@types ` . If the type defs you need are not found here you can
180
- register a custom ` path ` in the tsconfig.json file:
191
+ register a custom value in ` paths ` in the ` tsconfig.json ` file. For example, for
192
+ the Redux types, you can add a ` "redux" ` key:
181
193
182
194
``` json
183
- // tsconfig.json
184
195
{
185
196
"compilerOptions" : {
186
197
"paths" : {
187
- "welp /*" : [" app/*" ],
198
+ "my-app-name /*" : [" app/*" ],
188
199
"redux" : [" node_modules/redux/index.d.ts" ]
189
200
}
190
201
}
0 commit comments