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')
}

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.