Currently, I am delving into the realm of Stimulus using a standard Symfony6 and Encore setup, with the only notable difference being my use of Typescript. As per the guidance in the Stimulus documentation, typed values should be utilized in the following manner:
export default class extends Controller {
static values = { index: Number }
initialize() {
console.log(this.indexValue)
console.log(typeof this.indexValue)
}
// …
}
Sadly, when working with Typescript, I encounter a
TS2339: Property 'indexValue' does not exist on type 'default'.this.indexValue; although I have managed to suppress this with a @ts-ignore, I find it rather unsatisfactory. Is there a more elegant solution to address this within a webpack Encore Symfony project? Your insights are greatly appreciated 🙏
The structure of my Stimulus controller is as follows:
import { Controller } from '@hotwired/stimulus';
default class extends Controller {
static values = {
index: Number
}
doSomethingAsync(event: Event) {
event.preventDefault();
// @ts-ignore
console.log("indexValue", this.indexValue);
}
}
Below is an outline of my tsconfig:
{
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es6",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
},
"exclude": [
"node_modules"
]
}
Here's a snippet of my webpack.config.js:
Finally, let's take a look at my package.json:
{
"devDependencies": {
...
},
"license": "UNLICENSED",
"private": true,
"scripts": {
...
},
"browserslist": [
"defaults",
"not IE 11"
]
}