add typescript

stoikal · Aug 29, 2021 · 765ed2a · 765ed2a
1 parent 8d7c1fe
commit 765ed2a
Show file tree

Hide file tree

Showing 10 changed files with 2,717 additions and 452 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,15 +9,22 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "typescript": "~4.1.5",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
@@ -27,10 +34,11 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "@vue/typescript"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@typescript-eslint/parser"
     },
     "rules": {}
   },

diff --git a/src/App.vue b/src/App.vue
@@ -6,22 +6,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import toJavaneseScript from './methods/toJavaneseScript'
 
-export default {
+export default Vue.extend({
   name: 'App',
   data() {
     return {
       srcText: ''
     }
   },
   computed: {
-    resultText() {
+    resultText(): string {
       return toJavaneseScript(this.srcText)
     }
   }
-}
+})
 </script>
 
 <style>
@@ -33,12 +34,4 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-
-textarea {
-  font-size: 2em;
-}
-
-#result {
-  font-size: 2em;
-}
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/main.js → src/main.ts b/src/main.js → src/main.ts
diff --git a/src/methods/dictonary.js → src/methods/dictonary.ts b/src/methods/dictonary.js → src/methods/dictonary.ts
@@ -1,4 +1,17 @@
-export const Nglegena = {
+interface Dictionary {
+  _table: {
+    [index: string]: string
+  }
+
+  get: (n: string) => string
+}
+
+interface SesigegDictionary extends Dictionary {
+  _pangkon: string,
+  _nglegena: Dictionary
+}
+
+export const Nglegena: Dictionary = {
   _table: {
     h: 'ꦲ', n: 'ꦤ', c: 'ꦕ', r: 'ꦫ', k: 'ꦏ',
     d: 'ꦢ', t: 'ꦠ', s: 'ꦱ', w: 'ꦮ', l: 'ꦭ',
@@ -8,32 +21,32 @@ export const Nglegena = {
     a: 'ꦲ'
   },
 
-  get(n) {
+  get(n: string) {
     return n && this._table[n] || ''
   } 
 }
 
-export const Wyanjana = {
+export const Wyanjana: Dictionary = {
   _table: {
     y: 'ꦾ', r: 'ꦿ', l: '꧀ꦭ', w: '꧀ꦮ', g: '꧀ꦒ'
   },
 
-  get(n) {
+  get(n: string) {
     return n && this._table[n] || ''
   } 
 }
 
-export const Swara = {
+export const Swara: Dictionary = {
   _table: {
     i: 'ꦶ', u: 'ꦸ', e: 'ꦺ', o: 'ꦺꦴ', a: ''
   },
 
-  get(n) {
+  get(n: string) {
     return n && this._table[n] || ''
   } 
 }
 
-export const Sesigeg = {
+export const Sesigeg: SesigegDictionary = {
   _table: {
     ng: 'ꦁ', r: 'ꦂ', h: 'ꦃ'
   },
@@ -42,7 +55,7 @@ export const Sesigeg = {
 
   _nglegena: Nglegena,
 
-  get(n) {
+  get(n: string) {
     if (n) return this._table[n] || this._nglegena.get(n) + this._pangkon
     return ''
   } 

diff --git a/src/methods/toJavaneseScript.js → src/methods/toJavaneseScript.ts b/src/methods/toJavaneseScript.js → src/methods/toJavaneseScript.ts
@@ -1,6 +1,6 @@
 import Text from './text';
 
-export default function toJavaneseScript(src) {
+export default function toJavaneseScript(src: string) {
   const text = new Text(src)
 
   return text.toJavanese()

diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}