@greenwood/plugin-typescript

Overview

A Greenwood plugin for writing TypeScript. For more information and complete docs on Greenwood, please visit our website.

This package assumes you already have @greenwood/cli installed.

Installation

You can use your favorite JavaScript package manager to install this package.

# npm
$ npm i -D @greenwood/plugin-typescript

# yarn
$ yarn add @greenwood/plugin-typescript --dev

# pnpm
$ pnpm add -D @greenwood/plugin-typescript

Usage

Add this plugin to your greenwood.config.js:

import { greenwoodPluginTypeScript } from '@greenwood/plugin-typescript';

export default {
  // ...

  plugins: [
    greenwoodPluginTypeScript()
  ]
};

Now, you can write some TypeScript!

import { html, css, LitElement, customElement, property } from 'lit-element';

@customElement('app-greeting')
export class GreetingComponent extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

And use it in your project like you would use a .js file!

<script type="module" src="/components/greeting.ts"></script>

Types

Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.

/** @type {import('@greenwood/plugin-typescript').TypeScriptPlugin} */

import type { TypeScriptPlugin } from '@greenwood/plugin-typescript';

Options

Configuration

This plugin provides the following default compilerOptions.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "moduleResolution": "node",
    "sourceMap": true
  }
}

If you would like to extend / override these options:

Create your own tsconfig.json with your own compilerOptions

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

When adding greenwoodPluginTypeScript to your greenwood.config.js, enable the extendConfig option

import { greenwoodPluginTypeScript } from '@greenwood/plugin-typescript';

export default {
  // ...

  plugins: [
    greenwoodPluginTypeScript({
      extendConfig: true
    })
  ]
};

This will then process your JavaScript with TypeScript with the additional configuration settings you provide. This also allows you to configure the rest of your tsconfig.json to support your project specific IDE and local development environment settings.

Pages

By default, this plugin extends TypeScript support for processing SSR pages and API routes. For this feature, you will need to enable custom imports.

If you would like to disable this feature completely, set the servePage option to false:

import { greenwoodPluginTypeScript } from '@greenwood/plugin-typescript';

export default {
  // ...

  plugins: [
    greenwoodPluginTypeScript({
      servePage: false
    })
  ]
};