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

    Install

    npm i gridsome-plugin-typescript

    DownloadsWeekly Downloads

    204

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    3.69 kB

    Total Files

    3

    Last publish

    Collaborators

    • cleitonper