[Docs] Explain how to use TypeScript in a VitePress project

Is your feature request related to a problem? Please describe.

Im currently migrating a VuePress 1 project over to VitePress and I would like to integrate TypeScript for my .vue files. The documentation does not explain how to enable TypeScript in a VitePress project. I’ve looked over other documentation to enable TS in a Vue 3 project but that was based on vue-cli and seems irrelevant (I could be wrong)

My IDE, VS Code, has Vue Language Features (Volar) and TypeScript Vue Plugin (Volar) installed.

Here is my eslintrc.js that was migrated over from VuePress (if relevant?)

module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2018
  },
  env: {
    node: true,
    browser: true,
    commonjs: true,
    jest: true,
    es6: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  plugins: [
    "vue"
  ],
  ignorePatterns: ["dist/", "node_modules/", "*.json", ".temp/"],
  rules: {
    // Rules to ignore
    "vue/multi-word-component-names": "off",
    "no-use-before-define": "off",
    "no-case-declarations": "off",
    "no-useless-escape": "off",
    "no-control-regex": "off",
    "no-unused-vars": "off",
    "no-console": "off",
    "no-empty": "off",
    "no-prototype-builtins": "off",
    "guard-for-in": "off",
    // Rules to warn
    indent: ["warn", 2, { SwitchCase: 1 }],
    // Rules to error
    curly: "error",
    "semi-spacing": "error",
    "no-unneeded-ternary": "error",
    "no-useless-concat": "error",
    "no-useless-return": "error",
    "no-multi-spaces": "error",
    "no-alert": "error",
    "no-eq-null": "error",
    "no-eval": "error"
  }
};

Simple, when assigning a type like:

const str: string = '' nets an error: error Parsing error: Unexpected token :…

Describe the solution you’d like

A section to describe what needs to be done to get TypeScript working in VitePress

Describe alternatives you’ve considered

Looked at other documentation about Vue 3, TypeScript implementation, etc. But could not find anything relating to VitePress. I’ve also looked at other projects that use VitePress and I am just not understanding what is making their files get statically type checked

Additional context

I would also like to have type checking in the file itself. For example, type checking on writing, not type checking on build or watch. I assume this has to do with VS Code extensions?

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn’t already an issue that asks for the same feature to avoid creating a duplicate.

[Jasenkoo]

To add, if anyone has a problem listing files under .vitepress, just add the .eslintignore file and add !/docs/**

[brc-dd]

Its still not complete, it’ll probably throw errors when you’ll import you vue component inside ts files (say inside .vitepress/theme/index.ts for like registering a component globally). You need some file like this:

// shims.d.ts

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}