vite对typescript的支持(vite typescript使用方法)

Vite 是新一代的前端构建工具,如果对于Vite不了解的朋友,可以移步之前的文章。

vite对typescript的支持(vite typescript使用方法)

在Vite中,Typestript是开箱即用的。

使用方法有两种:

  1. 与其他的项目类似,添加 .ts 后缀的文件。例如新建index.ts等文件。
  2. lang=“ts”的方式。以在 .vue 文件中为例,具体使用方法如下:
//本例使用Vue3 + Typestript

<script setup lang="ts">
  import { ref } from 'vue'
  defineProps<{ msg: string }>()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

注意

  • Vite并不提供类型检查。

也就是说,如果你有Typescript的语法错误,Vite并不自带检查功能,默认该过程已经被你的IDE(例如你的Visual Studio Code拥有非常多的插件可以处理)或者是构建过程处理。

当然你也可以通过tsc来手动做类型检测,检测方法如下;

//通用检查
tsc --noEmit

//Vue项目也可以
vue-tsc --noEmit

备注:

其中的 --noEmit 的含有是不带有文件输出。

  • tsconfig.json文件的配置

使用ts时,你的项目下将会有tsconfig.json的文件,如果你使用了Vite自带的模板来初始化项目,自动生成的文件内容如下

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

如果你未使用,手动建立文件时,Vite +Typescript的必要设置有:

  1. "isolatedModules": true ,意味着将每个文件作为单独的模块
  2. "useDefineForClassFields": true ,关于此配置的解释较为复杂,一般情形使用true即可。

以上就是Vite中Typescript的使用。

如有疑义,欢迎留言。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ttt5cn@163.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论