Skip to content

Commit 78f17b3

Browse files
committed
minor #60 Add some notes about using TypeScript and ES6 (jmsche, weaverryan)
This PR was merged into the main branch. Discussion ---------- Add some notes about using TypeScript and ES6 This small PR to add details about writing TS controllers (at least, to avoid errors by just writing a simple one). Thanks `@weaverryan` for finding the issue I had in #59 :) I added your explanation almost word for word, I hope it's okay :) Commits ------- f92ca80 README language tweak a342910 Add some notes about using TypeScript and ES6
2 parents 21edfbf + f92ca80 commit 78f17b3

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,34 @@ application.register('autocomplete', Autocomplete)
267267
export { app };
268268
```
269269

270+
## Writing TypeScript controllers
271+
272+
If you want to write TypeScript controllers, make sure the target of your TypeScript config is set to `ES6`:
273+
274+
```json
275+
{
276+
"compilerOptions": {
277+
//...
278+
"target": "ES6",
279+
},
280+
//...
281+
}
282+
```
283+
284+
If you don't you may face the following issue in your browser console when the controller is called:
285+
286+
```
287+
# Error thrown in Chrome console:
288+
Uncaught (in promise) TypeError: Class constructor Controller cannot be invoked without 'new'
289+
290+
# Error thrown in Firefox console:
291+
Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
292+
```
293+
294+
The error is caused when an ES5 class tries to "extend" an ES6 class. If the target is not correctly set,
295+
TypeScript will transpile the controller to old ES5 code. But Stimulus 3 uses pure ES6 classes.
296+
This causes an incompatibility, hence the need to target ES6 explicitly.
297+
270298
## Run tests
271299

272300
```sh

0 commit comments

Comments
 (0)