Skip to content

Commit cb5d0c3

Browse files
committed
Update README for 1.0.0.
1 parent a5243d4 commit cb5d0c3

File tree

1 file changed

+85
-74
lines changed

1 file changed

+85
-74
lines changed

README.md

Lines changed: 85 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
[![*nix build status](https://travis-ci.org/emberwatch/ember-cli-typescript.svg?branch=master)](https://travis-ci.org/emberwatch/ember-cli-typescript)
44
[![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)
56

67
Use TypeScript in your Ember 2.x apps!
78

@@ -16,89 +17,71 @@ ember install ember-cli-typescript
1617

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

19-
In addition to ember-cli-typescript, the following files are installed:
20+
In addition to ember-cli-typescript, the following are installed:
2021

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)
2429

2530

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`
4932

5033
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.
5737

58-
#### The Problem
38+
### The Problem
5939

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.
6242

6343
[broccoli]: http://broccolijs.com/
64-
[VS Code]: http://code.visualstudio.com/
6544

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

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

72-
#### The Solution
51+
### The Solution
7352

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

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.
8669

8770
[blueprint]: https://github.com/emberwatch/ember-cli-typescript/blob/master/blueprints/ember-cli-typescript/files/tsconfig.json
8871

8972
### Customization
9073

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.
9579

9680
Please see [the wiki] for additional how to tips from other users or to add
9781
your own tips. If an use case is frequent enough we can codify in the plugin.
9882

9983
[the wiki]: https://github.com/emberwatch/ember-cli-typescript/wiki/tsconfig-how-to
10084

101-
10285
## Incremental adoption
10386

10487
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.
11598

11699
[typing-your-ember]: http://www.chriskrycho.com/typing-your-ember.html
117100

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+
118118
## Not (yet) supported
119119

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
124126

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!
126130

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.
128135

129136
### Type safety when invoking actions
130137

131138
TypeScript won't detect a mismatch between this action and the corresponding
132139
call in the template:
133140

134141
```typescript
135-
actions: {
136-
turnWheel(degrees: number) {
137-
...
138-
}
139-
}
142+
Ember.Component.extend({
143+
actions: {
144+
turnWheel(degrees: number) {
145+
// ...
146+
}
147+
},
148+
})
140149
```
141150

142151
```hbs
143152
<button onclick={{action 'turnWheel' 'NOT-A-NUMBER'}}> Click Me </button>
144153
```
145154

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:
147156

148157
```typescript
149158
// TypeScript compiler won't detect this type mismatch
150159
this.send('turnWheel', 'ALSO-NOT-A-NUMBER');
151160
```
152161

153-
### Type safety when invoking KVO compliant accessors or mutators
162+
### Type safety with `Ember.get`, `Ember.set`, etc.
154163

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:
158167

159168
```typescript
160169
Ember.Object.extend({
161170
urls: <string[]> null,
162171
port: 4200, // number
172+
163173
init() {
164174
this._super(...arguments);
165175
this.set('urls', []);
166176
},
177+
167178
foo() {
168179
// TypeScript won't detect these type mismatches
169180
this.get('urls').addObject(51);
170181
this.set('port', '3000');
171-
}
182+
},
172183
});
173184
```
174185

175186

176187
### The type definitions I need to reference are not in `node_modules/@types`
177188

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
179190
`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:
181193

182194
```json
183-
// tsconfig.json
184195
{
185196
"compilerOptions": {
186197
"paths": {
187-
"welp/*": ["app/*"],
198+
"my-app-name/*": ["app/*"],
188199
"redux": ["node_modules/redux/index.d.ts"]
189200
}
190201
}

0 commit comments

Comments
 (0)