【Vite基础】003-Vite 中使用 TypeScript

訾博ZiBo

发布于 2025-01-06 15:14:57

10200

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

【Vite基础】003-Vite 中使用 TypeScript

一、Vite 天生支持 ts

1、只编译，不校验

在开发环境中，Vite 使用 es build ，es build 本身支持 ts 语法！

只编译（将 ts 编译成 js），不校验。

2、手动校验

# 只校验，不输出编译的文件
tsc --noEmit

二、编译代码验证

直接使用 ts 语法！

第一步：在 src 目录下新建 test.ts 文件

interface People {
    name: string;
}

export const people: People = {
    name: '大哥刘备',
};

第二步：在 App.jsx 文件下导入并使用

import { defineComponent } from "vue";

import { people } from './test.ts'

export default defineComponent({
    setup() {
        return () => <div class="root">Hello { people.name } !</div>;
    }
});

第三步：运行并访问

npm run dev 便于复制！

第四步：结论

vite 支持 ts 语法，只编译，可直接使用，但不校验！

三、不校验代码验证

第一步：修改 test.ts

interface People {
    name: string;
}

export const people: People = {
    name: '大哥刘备',
    age: 22,
};

第二步：发现 vs code 报错

说明：vs code 天生支持 ts 语法校验！

第三步：重新运行并访问

没有任何报错！（其实不重新运行也是可以看出来的，如果有错误会立即显示！）

四、使 Vite 编译时支持校验

第一步：安装 typescript

yarn add typescript

第二步：创建 tsconfig.json 文件

下面是一个比较常规的 ts 配置！

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

第三步：修改 package.json

scripts 下的 build 的值 vite build 改为 tsc --noEmit && vite build

{
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@postcss-plugins/console": "^0.2.5",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "typescript": "^4.8.4",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "less": "^4.1.3",
    "vite": "^3.1.0"
  }
}

第四步：编译

npm run build

五、使 Vite 支持 .vue 文件的校验

第一步：安装 vue-tsc

yarn add vue-tsc

第二步：修改 package.json

scripts 下的 build 的值 tsc --noEmit && vite build 改为 vue-tsc --noEmit && tsc --noEmit && vite build

{
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@postcss-plugins/console": "^0.2.5",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "typescript": "^4.8.4",
    "vue": "^3.2.37",
    "vue-tsc": "^0.40.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "less": "^4.1.3",
    "vite": "^3.1.0"
  }
}

第三步：编译

结果省略！

npm run build

六、isolatedModules 配置

1、概述

说明

推荐将这个配置写在 tsconfig.json 文件里面；

配置

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom"
        ],
        "skipLibCheck": true,
        "isolatedModules": true,
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ],
    "exclude": [
        "node_modules"
    ]
}

2、作用1：重新导出类型报错

如果没有此配置，程序会出错，但没有警告！

代码

运行时出错

开启 isolatedModules 后

修正写法后的代码

运行并访问的结果

正常无错！

3、作用2：访问枚举

代码

关闭时，正常不报错！

运行时出错

开启 isolatedModules 后

报错！

补充

当不使用 declare 关键字声明枚举的时候是可以直接使用，不报错的！ declare 参考文章： 1、TS之declare的简单使用 https://blog.csdn.net/youhebuke225/article/details/125664535 2、ts的.d.ts和declare究竟是干嘛用的 https://blog.csdn.net/qq_34551390/article/details/118800743

4、作用3：ts 文件中没有导入或导出则报错

不常用！

报错

添加导出后

七、clent types

1、概述

Vite 提供了一些内置的对象，但默认不知道这些变量的类型，需要配置以令其显示。

2、演示

第一步：修改 tsconfig.json

添加 “types”: [“vite/client”],

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom"
        ],
        "skipLibCheck": true,
        "types": ["vite/client"],
        "isolatedModules": true,
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ],
    "exclude": [
        "node_modules"
    ]
}

第二步：查看

提示

类型

3、支持哪些类型

支持的类型

Asset imports：静态文件
env：环境变量
HMR API：import.meta.hot;

静态文件导入举例

import VueSVG from './assets/vue.svg';

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

基础

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

【Vite基础】003-Vite 中使用 TypeScript

【Vite基础】003-Vite 中使用 TypeScript

【Vite基础】003-Vite 中使用 TypeScript

一、Vite 天生支持 ts

1、只编译，不校验

2、手动校验

二、编译代码验证

第一步：在 src 目录下新建 test.ts 文件

第二步：在 App.jsx 文件下导入并使用

第三步：运行并访问

第四步：结论

三、不校验代码验证

第一步：修改 test.ts

第二步：发现 vs code 报错

第三步：重新运行并访问

四、使 Vite 编译时支持校验

第一步：安装 typescript

第二步：创建 tsconfig.json 文件

第三步：修改 package.json

第四步：编译

五、使 Vite 支持 .vue 文件的校验

第一步：安装 vue-tsc

第二步：修改 package.json

第三步：编译

六、isolatedModules 配置

1、概述

说明

配置

2、作用1：重新导出类型报错

代码

运行时出错

开启 isolatedModules 后

修正写法后的代码

运行并访问的结果

3、作用2：访问枚举

代码

运行时出错

开启 isolatedModules 后

补充

4、作用3：ts 文件中没有导入或导出则报错

报错

添加导出后

七、clent types

1、概述

2、演示

第一步：修改 tsconfig.json

第二步：查看

3、支持哪些类型

支持的类型

静态文件导入举例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐