@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 -i @greenwood/plugin-typescript --save-dev

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

Usage

Add this plugin to your greenwood.config.js.

const pluginTypeScript = require('@greenwood/plugin-typescript');

module.exports = {
  ...

  plugins: [
    ...pluginTypeScript() // notice the spread ... !
  ]
}

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

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": {
       "expirementalDecorators": true
     }
   }
   

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

   const pluginTypeScript = require('@greenwood/plugin-typescript');
   
   module.exports = {
     ...
   
     plugins: [
       // notice the spread ... !
       ...pluginTypeScript({
         extendConfig: true
       })
     ]
   }
   

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