Typescript plugin for Gridsome
This plugin enable Typescript lang inside yours *.vue Single File Components.
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-typescriptnpm install -D typescript ts-loader gridsome-plugin-typescript- add
typescript,ts-loader, andgridsome-plugin-typescriptindevDependenciessection in yourpackage.jsonfile.
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>If you want to contribute through code or documentation, the Contributing guide is the best place to start. If you have questions, feel free to ask.