@greenwood/plugin-typescript

@greenwood/plugin-typescript

Overview

A Greenwood plugin for writing TypeScript. There is still a little more work we would like to do but this plugin should be suitable for general usage.

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

Installation

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

examples:

# npm
npm install @greenwood/plugin-typescript --save-dev

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

Usage

Add this plugin to your greenwood.config.js.

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

export default {
  // ...

  plugins: [
    greenwoodPluginTypeScript()
  ]
};

Then, 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>

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:

1. Create your own tsconfig.json with your own compilerOptions

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

2. 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 tsconfig.json to support your IDE and local development environment settings.

Custom Pages

By default, this plugin extends TypeScript support to processing SSR pages and API routes. If you would like to disable this, set the servePage option to false

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

export default {
  // ...

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