TypeScript

A plugin for authoring in TypeScript. See the plugin's README for complete usage information.

Installation

You can use your favorite JavaScript package manager to install this plugin:

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

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

And then add the plugin to your greenwood.config.js.

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

export default {
  // ...

  plugins: [greenwoodPluginTypeScript()],
};

Usage

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>

This is also supported for pages with the servePage option that you can pass:

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

export default {
  // ...

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

For server and pre-rendering use cases, make sure to enable custom imports.

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference