Skip to content

Commit f46b0b1

Browse files
chriskrycholocks
authored andcommitted
Update README with latest changes. (#32)
* Update the README with more installation info. - notes on use in add-ons - clarify the normal installation process - clarify the way that broccoli-typescript and IDEs interact * Add notes to README (from mike-north) on what doesn't work.
1 parent e2abbc1 commit f46b0b1

File tree

1 file changed

+97
-18
lines changed

1 file changed

+97
-18
lines changed

README.md

Lines changed: 97 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,60 @@
11
# ember-cli-typescript
22

3-
Enable typescript preprocessing on Ember 2.x apps.
3+
Use TypeScript in your Ember 2.x apps!
44

55

66
## Installation
77

8-
In addition to ember-cli-typescript, the following files are required:
8+
Just run:
9+
10+
```
11+
ember install ember-cli-typescript
12+
```
13+
14+
All dependencies will be added to your `package.json`, and you're ready to roll!
15+
16+
In addition to ember-cli-typescript, the following files are installed:
917

1018
- [typescript](https://github.com/Microsoft/TypeScript) version 2.0.0 or greater
1119
- [@types/ember](https://www.npmjs.com/package/@types/ember)
1220
- [tsconfig](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
1321

14-
You can setup all of these at once with:
1522

16-
```
17-
ember install ember-cli-typescript
18-
```
23+
## Write your add-ons in TypeScript
24+
25+
To support shipping add-ons with TypeScript, move `ember-cli-typescript` from
26+
`devDependencies` to `dependencies` in your `package.json`.
27+
28+
This is a function of the way Ember CLI add-ons work, not specific to TypeScript
29+
or this add-on. *Any* transpiler support (including this, CoffeeScript, or even
30+
Babel) needs to be specified in the `dependencies`, not `devDependencies`, to
31+
use it for developing the add-on itself: that's how its compiled output can be
32+
used in consuming apps or add-ons.
1933

20-
All dependencies will be added to your package.json, and you're ready to roll!
2134

2235
## Configuration file notes
2336

24-
If you make changes to the paths included in your `tsconfig.json`, you will need to restart the server to take the changes into account.
37+
If you make changes to the paths included in your `tsconfig.json`, you will need
38+
to restart the server to take the changes into account.
39+
40+
### Quirks with `tsconfig.json`
2541

26-
### Problem ###
42+
Additionally, depending on what you're doing, you may notice that your tweaks to
43+
`tsconfig.json` don't get picked up by the compiler at all.
2744

28-
The configuration file is used by both Ember CLI/[broccoli](http://broccolijs.com/) and [VS Code](http://code.visualstudio.com/)/`tsc` command line compiler.
45+
#### The Problem
46+
47+
The configuration file is used by both Ember CLI/[broccoli](http://broccolijs.com/)
48+
and `tsc` command line compiler (used by e.g. [VS Code](http://code.visualstudio.com/),
49+
JetBrains IDEs, etc.).
2950

3051
Broccoli controls the inputs and the output folder of the various build steps
3152
that make the Ember build pipeline. Its expectation are impacted by Typescript
3253
configuration properties like "include", "exclude", "outFile", "outDir".
3354

3455
We want to allow you to change unrelated properties in the tsconfig file.
3556

36-
### Solution ###
57+
#### The Solution
3758

3859
This addon takes the following approach to allow this dual use:
3960

@@ -45,16 +66,17 @@ This addon takes the following approach to allow this dual use:
4566

4667
- before calling broccoli the addon removes "outDir" and sets "noEmit" and "includes"
4768

48-
### Customization ###
69+
### Customization
4970

50-
You can customize this file further for your use case. For example to see the
51-
output of the compilation in a separate folder you are welcome to set and
52-
outDir and set noEmit to false. Then VS Code and tsc will generate files here
53-
while the broccoli pipeline will use its own temp folder.
71+
You can customize the `tsconfig.json` file further for your use case. For
72+
example to see the output of the compilation in a separate folder you are
73+
welcome to set and outDir and set noEmit to false. Then VS Code and tsc will
74+
generate files here while the broccoli pipeline will use its own temp folder.
5475

55-
Please see the wiki for additional how to tips from other users or to add
76+
Please see [the wiki] for additional how to tips from other users or to add
5677
your own tips. If an use case is frequent enough we can codify in the plugin.
57-
https://github.com/emberwatch/ember-cli-typescript/wiki/tsconfig-how-to
78+
79+
[the wiki]: https://github.com/emberwatch/ember-cli-typescript/wiki/tsconfig-how-to
5880

5981

6082
## Incremental adoption
@@ -76,3 +98,60 @@ Create the file `.vscode/settings.json` with the following content:
7698
"typescript.tsdk" : "node_modules/typescript/lib"
7799
}
78100
```
101+
102+
## Not (yet) supported
103+
104+
While TS works nicely for many things in Ember, there are a number of corners
105+
where it *won't* help you out. These are worth being aware of. Some of them are
106+
just a matter of further work on updating the [typings]; others are a matter of
107+
further support landing in TypeScript itself.
108+
109+
[typings]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/ember
110+
111+
Here is the short list of things which do *not* work yet.
112+
113+
### Extending from framework entities using `class` syntax
114+
115+
```js
116+
export default MyComponent extends Ember.Component {
117+
}
118+
```
119+
120+
### Type safety when invoking actions
121+
122+
```ts
123+
actions: {
124+
turnWheel(degrees: number) {
125+
...
126+
}
127+
}
128+
```
129+
130+
```hbs
131+
<!-- TypeScript compiler won't detect this type mismatch -->
132+
<button onclick={{action 'turnWheel' 'NOT-A-NUMBER'}}> Click Me </button>
133+
```
134+
135+
```js
136+
// TypeScript compiler won't detect this type mismatch
137+
this.send('turnWheel', 'ALSO-NOT-A-NUMBER');
138+
```
139+
140+
### Type safety when invoking KVO compliant accessors or mutators
141+
142+
```ts
143+
Ember.Object.extend({
144+
urls: <string[]> null,
145+
port: 4200,
146+
init() {
147+
this._super(...arguments);
148+
this.set('urls', []);
149+
},
150+
foo() {
151+
// TypeScript won't detect these type mismatches
152+
this.get('urls').addObject(51);
153+
this.set('port', 3000);
154+
}
155+
});
156+
```
157+

0 commit comments

Comments
 (0)