Ionic Vue のデフォルト言語をTypeScriptからJavaScriptに修正する

前提

• 2020年10月15日にionic vue が正式リリースされました。
• ionic vue のデフォルト言語TypeScriptでした。

目的

• ionic vue の開発言語をTypeScriptからJavaScriptに変更したいと思います。

修正

• TypeScriptのModuleを削除する

$ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript

• router/index.ts と main.ts の拡張子を .ts から .js に変更する

• .eslintrc.js を下記のように修正する

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    - '@vue/typescript/recommended' // 削除
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    - '@typescript-eslint/no-explicit-any': 'off', // 削除
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

• 先程ファイルの名前を変更したrouter/index.js から Array<RouteRecordRaw> を削除する

index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Page1 from '../views/page1.vue';
import Page2 from '../views/page2.vue';

const routes = [ //  ここを変更
  {
    path: '/',
    redirect: '/page1'
  },
  {
    path: '/page1',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

感想

• TypeScriptからJavaScriptへの変更はそんなに煩わしくなく変更することができた。