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

[staghouse]

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

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

[brc-dd]

Nothing special needs to be done. You just need a tsconfig.json, a shim.d.ts file and need to enable volar. Refer the official docs of using Vue 3 with TS. Also that parsing error is probably because you haven't set lang="ts" in your script part.

Also, VuePress 1 was using Vue 2 IG. VitePress uses Vue 3. That eslint packages may be different. The best way to get started is to use npm init vue@latest. Remove the stuff you don't need like src and vite.config.ts. And then install VitePress. I'll try to provide you a starter repo tomorrow.

[staghouse]

I still feel like its a disservice to at least not reference another guide on how to do it within the docs.

I got it to work eventually with this config:

• Install VS Code plugins Vue Language Features (Volar) and TypeScript Vue Plugin (Volar)
• Enabled "Takeover Mode" for Volar
• Install dependencies vue-eslint-parser and @typescript-eslint/parser
• Change eslintrc.js:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2020,
    parser: {
      ts: "@typescript-eslint/parser",
    }
  },
  // I forget what this was supposed to do
  /*
  env: {
    node: true,
    browser: true,
    commonjs: true,
    jest: true,
    es6: true,
  },
  */
  extends: ['plugin:vue/vue3-recommended'],
  ignorePatterns: ['dist/', 'node_modules/', '*.json', '.temp/'],
  rules: { /**/ },
};

• Create tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true
    "esModuleInterop": true
  },
  "vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
  },
  "include": ["./docs/.vitepress/**/*.vue"],
  "exclude": ["node_modules/"]
}

[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
}

[Jasenkoo]

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

[antonreshetov]

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
}

I added env.d.ts, then added to tsconfig.json but the errors are still there. Can you tell me the right thing to do?

[brc-dd]

@antonreshetov Can you show us what errors are you getting?

[antonreshetov]

@antonreshetov Can you show us what errors are you getting?

It's just that the editor highlights it as an error. I renamed env.d.ts -> shims.d.ts and everything is back to normal. But for me it's like magic, just wanted to figure out how to add the missing types if the file name is not shims.d.ts?

[jd-solanki]

Hey,

I also tried TS with VitePress but unfortunately, I am unable to get autocompletion for lib components in demo SFCs: https://github.com/jd-solanki/anu/blob/main/docs/demos/alert/DemoAlertDismissible.vue

Does anyone know what's wrong in setup?

[Zhengqbbb]

Actually I using Volar Takeover Mode in my TS to avoid error. And I lost some ts buildin feature https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

[yaoxfly]

I use the TypeScript on success, the following is an example of my address is https://github.com/yaoxfly/vitepress-template

[sfreytag]

I use the TypeScript on success, the following is an example of my address is https://github.com/yaoxfly/vitepress-template

Thanks, your repo is a really useful guide for setting up vitepress with TypeScript and custom themes - am copying lots from it.

[chenxiaofie]

I use the TypeScript on success, the following is an example of my address is https://github.com/yaoxfly/vitepress-template

This package.json download vue, but vitpress has vue , Seems to have downloaded it again?