preact-cli-plugin-typescript
v0.2.2
Published
Use TypeScript with preact-cli
Downloads
69
Maintainers
Readme
preact-cli-plugin-typescript ·
Use TypeScript with preact-cli.
This will install typescript and awesome-typescript-loader.
If you prefer Flow, check out preact-cli-plugin-flow.
Installation
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)
}
Usage
Existing 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.
Mixing JavaScript and TypeScript
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
}
}
Changing the entrypoint
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')
}