Use TypeScript with preact-cli.
This will install typescript and awesome-typescript-loader.
If you prefer Flow, check out preact-cli-plugin-flow.
Install via npm:
npm i preact-cli-plugin-typescript --save-dev
After installation, this plugin will create a tsconfig.json
(TypeScript
configuration file), and preact.config.js
, if they don't exist already.
In the root of your project, edit preact.config.js
to add the plugin:
import preactCliTypeScript from 'preact-cli-plugin-typescript'
export default function(config) {
preactCliTypeScript(config)
}
tsconfig.json
If you have an existing tsconfig.json
file, be sure to use the correct
JSX factory:
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h"
}
}
Now you can simply add .ts
/.tsx
files to your project, and they'll
be compiled. Cool. Make sure you use .tsx
if you want to use JSX.
You might see an error like
Module './components/app' was resolved to '/src/components/app.js', but '--allowJs' is not set.
.
To fix this, or if you want to incrementally move to TypeScript, make sure
allowJs
is enabled in your tsconfig.json
:
{
"compilerOptions": {
"allowJs": true
}
}
By default, preact-cli looks for src/index.js
to start your app. This plugin
widens the scope to "any file in src
that starts with index
and has
a file extension resolved by webpack" - to change this,
override the preact-cli-entrypoint
in preact.config.js
:
import { resolve } from 'path'
export default function (config, env, helpers) {
preactCliTypeScript(config)
config.resolve.alias['preact-cli-entrypoint'] = resolve(__dirname, 'src', 'foo-file.foo-extension')
}
Changing the entrypoint is NOT fully supported by preact-cli at this time. We recommend enabling allowJs
in your tsconfig.json
, so that the entrypoint for preact-cli can remain as src/index.js
.