🛠 convert to typescript

Author: miladd3

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest'
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
 }

package-lock.json

@@ -25,13 +25,18 @@
     "vue": "^3.0.0-beta.1"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.19",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.2.2",
+    "@vue/cli-plugin-typescript": "^4.5.11",
     "@vue/cli-plugin-unit-jest": "^4.2.2",
     "@vue/cli-service": "^4.2.3",
     "@vue/compiler-sfc": "^3.0.0-beta.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-standard": "^5.1.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-alpha.1",
     "babel-eslint": "^10.0.3",
     "core-js": "^3.4.4",
@@ -43,6 +48,7 @@
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.0.0-alpha.0",
     "jest": "^25.1.0",
+    "typescript": "~3.9.3",
     "vue": "^2.6.10",
     "vue-cli-plugin-vue-next": "~0.1.4"
   },
@@ -55,13 +61,14 @@
       "plugin:vue/vue3-essential",
       "eslint:recommended",
       "@vue/standard",
-      "prettier"
+      "prettier",
+      "@vue/typescript"
     ],
     "rules": {
       "quotes": "error"
     },
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@typescript-eslint/parser"
     },
     "overrides": [
       {

package.json

@@ -1,98 +1,25 @@
 <template>
   <div id="app">
-    <div class="wrap">
-      <h1>Vue Simple Password Meter</h1>
-      <p>
-        <b>Vue Simple Passwod Meter</b> is a simple password checker written in
-        vanilla js and extremly lightweight
-      </p>
-
-      <form>
-        <label for="password">Password</label>
-        <input id="password" type="password" v-model="value" />
-        <small v-if="score === 0">use better password</small>
-        <password-meter :password="value" @score="onScore" />
-      </form>
-    </div>
+    <input type="password" v-model="pass">
+    <password-meter :password="pass" />
   </div>
 </template>
 
-<script>
-import passwordMeter from './password-meter.vue'
-
-export default {
-  name: 'app',
+<script lang="ts">
+import { defineComponent } from 'vue';
+import PasswordMeter from './password-meter.vue'
+export default defineComponent({
+  name: 'App',
   components: {
-    passwordMeter
+    PasswordMeter
   },
-  data () {
+  data() {
     return {
-      value: null,
-      score: null
-    }
-  },
-  methods: {
-    onScore ({ score, strength }) {
-      // eslint-disable-next-line no-console
-      console.log(score, strength)
-
-      this.score = score
+      pass: ''
     }
   }
-}
+});
 </script>
 
 <style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
-#app .wrap {
-  max-width: 450px;
-  margin: auto;
-}
-
-#app .wrap input {
-  border: 1px solid #ccc;
-  padding: 5px 10px;
-  border-radius: 3px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-#app p {
-  margin: 16px 0;
-  color: #777;
-  line-height: 1.5;
-}
-
-#app p b {
-  color: #333333;
-}
-
-#app form {
-  margin: 0 25px;
-}
-
-#app form label {
-  display: block;
-  font-size: 12px;
-  text-align: left;
-  margin-bottom: 6px;
-}
 </style>

src/App.vue

@@ -1,7 +1,7 @@
 import scorePassword from './scorePassword'
 import nameScore from './nameScore'
 
-const checkStrength = pass => {
+const checkStrength = (pass: string) => {
   const score = scorePassword(pass)
   return nameScore(score)
 }

src/logic/checkStrength.js renamed to src/logic/checkStrength.ts

@@ -1,4 +1,4 @@
-const nameScore = score => {
+const nameScore = (score: number): string  => {
   switch (score) {
     case 0:
       return 'risky'
@@ -11,7 +11,7 @@ const nameScore = score => {
     case 4:
       return 'secure'
     default:
-      return null
+      return ''
   }
 }
 

src/logic/index.js renamed to src/logic/index.ts

@@ -1,4 +1,4 @@
-const scorePassword = pass => {
+const scorePassword = (pass : string): number => {
   let score = 0
   let length = 0
   let specialChar = 0

src/logic/nameScore.js renamed to src/logic/nameScore.ts

@@ -1,4 +1,4 @@
 import { createApp } from 'vue';
 import App from './App.vue'
 
-createApp(App).mount('#app')
+createApp( App ).mount('#app')

src/logic/scorePassword.js renamed to src/logic/scorePassword.ts

@@ -2,16 +2,17 @@
   <div class="po-password-strength-bar" :class="passwordClass"></div>
 </template>
 
-<script>
+<script lang="ts">
+import {defineComponent} from 'vue'
 import { checkStrength, scorePassword } from './logic'
 
-export default {
+export default  defineComponent({
   name: 'password-meter',
   props: {
     password: String
   },
   computed: {
-    passwordClass() {
+    passwordClass(): object | null {
       if (!this.password) {
         return null
       }
@@ -24,7 +25,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style>

src/main.js renamed to src/main.ts

@@ -0,0 +1,14 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    // @ts-ignore
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/password-meter.vue

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

src/shims-tsx.d.ts

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "jest"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}