search

CephalonScientia / wiki-reader

📖 MediaWiki wiki reader
1 stars 0 forks source link

Support TypeScript workflow #12

Closed CephalonScientia closed 2 years ago

CephalonScientia commented 2 years ago

Configure project to use TypeScript in place of JS for static typing and stricter programming discipline. See https://typescript.nuxtjs.org/guide/introduction

Includes all Vue components, tests, and nuxt.config.js.

Linter should also be configured to scan and lint .ts files.

Since Webpack does not compile nuxt.config.js, any environment runtime variables defined in the config will not be initialized and hence cannot be used by TS scripts at runtime. 

TS2339: Property '$config' does not exist on type '{ components: { Header: {}; Navbar: {}; Article: {}; Footer: {}; }; mounted(): void; }'.

To solve this issue, TypeScript runtime wrapper needs to be installed (https://typescript.nuxtjs.org/guide/runtime/) to register ts-node before Webpack compiles any TS files to JS.

npm install @nuxt/typescript-runtime --save

CephalonScientia commented 2 years ago

Installing @nuxt/typescript-runtime did not help, same error occurs even after switching nuxt.config.js to TypeScript as per https://typescript.nuxtjs.org/cookbook/configuration

CephalonScientia commented 2 years ago

Removing lang="ts" from the script tag in the Vue components allows access to this.$config. I think there is something missing when TS files are being transpiled by Webpack. Looking at a bunch of boilerplate code for Nuxt 2 + TypeScript and I don't see anything that would signal an error in the config files:

Related issues https://github.com/nuxt-community/storybook/issues/160 and https://github.com/nuxt/typescript/issues/508

CephalonScientia commented 2 years ago

May hold off from using TypeScript until Nuxt3 is fully released. The new upgrade is written in TypeScript so it should have better support for the language. That means this project will have to eventually migrate from Nuxt2 to Nuxt3.