QUESTION/BUG: TypeScript and default full application

[rodush]

I'm trying to get running preact(-cli) with sass and typescript.
What I did is:

1. created new project with --sass and --yarn flags (---type full is by default)
2. installed preact-cli-plugin-typescript
3. renamed .js files to .tsx files
4. launch yarn dev and see that compilation fails because of

[at-loader] ./src/components/app.tsx:27:13
TS2559: Type '{ onChange: (e: RouterProps) => void; }' has no properties in common with type 'RouterProps & ComponentProps'.

I have 2 questions so far:

1. What is the right way to import scss files? So far I ended with something running with
   let style = require("./style.scss"), otherwise I was getting module ./style not found during compilation (yarn dev)
   but more important:
2. What is the correct Type/shape of event handler to be used with <Router onChange={....}>
   Does anyone check how preact works with typescript?

I can not find (via Google Search as well 😄) any explanation/example of how to deal with typescript and preact. All examples are very basic, and don't even cover the default skeleton application...

Thanks!

tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "jsx": "react",
    "jsxFactory": "h",
    "typeRoots": ["./node_modules/@types"]
  }
}

• node --version: v8.2.1
• npm --version: 5.3.0
• tsc -v: Version 2.4.2
• preact -v: preact-cli 1.4.1
• yarn -v: v0.27.5
• OS: Darwin Romans-MacBook-Pro.local 16.7.0 Darwin Kernel Version 16.7.0: Thu Jun 15 17:36:27 PDT 2017; root:xnu-3789.70.16~2/RELEASE_X86_64 x86_64

[thangngoc89]

Could you try the Typescript plugin ?

https://github.com/developit/preact-cli/wiki/Plugins

[rodush]

@thangngoc89 You probably missed the step no. 2 in my initial message 😉 - I did install it, and .jsx compiles fine, the question is - how to properly define onChange handler, which one sees in the full application.

[OngeUK]

I have the exact same problem having followed pretty much the same steps as @rodush...

[developit]

Seems like the onChange prop is just missing from preact-router's typescript definitions. Can someone add it? https://github.com/developit/preact-router/blob/master/src/index.d.ts#L25

[reznord]

I will, do it in a few minutes.

[reznord]

Here is the PR for that. preactjs/preact-router#229

/cc @developit

[developit]

it's released: https://github.com/developit/preact-router/releases/tag/2.5.7
just run npm update and you're good!

Did we get an idea of the scss issue? I didn't quite follow where the error was coming from.

[rodush]

Thanks for the patch in router！
As for the css, what I did （let ... require）, appears to be just an idiomatic way when you work with typescript and webpack - require here handled by webpack, and TS indeed cannot import scss file as it is not a real module.