gridsome-plugin-typescript

Typescript plugin for Gridsome

Quick orview

This plugin enable Typescript lang inside yours *.vue Single File Components.

Install

In order to work with this plugin you'll need to install the dependencies below. Choose one method of your preference to install it.

• yarn add -D typescript ts-loader gridsome-plugin-typescript
• npm install -D typescript ts-loader gridsome-plugin-typescript
• add typescript, ts-loader, and gridsome-plugin-typescript in devDependencies section in your package.json file.

Usage

1. Add gridsome-plugin-typescript in your gridsome.config

module.exports = {
  plugins: [
    {
      use: 'gridsome-plugin-typescript',
    }
  ]
}

2. Create a tsconfig.json file at the root directory of your project with the content below:

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true
    },
    "include": [
        "./src/**/*"
    ]
}

3. Create a vue-shims.d.ts in your src folder with the following content:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

4. For now, you can use lang="ts" in your *.vue files like this:

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
      props: ['name', 'initialEnthusiasm'],
      data() {
          return {
              enthusiasm: this.initialEnthusiasm,
          }
      },
      methods: {
          increment() { this.enthusiasm++; },
          decrement() {
              if (this.enthusiasm > 1) {
                  this.enthusiasm--;
              }
          },
      },
      computed: {
          exclamationMarks(): string {
              return Array(this.enthusiasm + 1).join('!');
          }
      }
  });
</script>

Related

• Typescript Starter for Gridsome
• Typescript starter for Vue (only for reference)
• tsconfig.json reference
• vue-property-decorator