gridsome-plugin-typescript

0.4.0 • Public • Published

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

Package Sidebar

Install

npm i gridsome-plugin-typescript

Weekly Downloads

39

Version

0.4.0

License

MIT

Unpacked Size

3.69 kB

Total Files

3

Last publish

Collaborators

  • cleitonper