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

末蓝、 2023-09-26 10:15 49阅读 0赞

# 【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、支持哪些类型
     *   *  支持的类型
         *  静态文件导入举例

# 一、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 便于复制！

![image-20221006104414024][]

### 第四步：结论 ###

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

# 三、不校验代码验证 #

### 第一步：修改 test.ts ###

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

### 第二步：发现 vs code 报错 ###

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

![image-20221006104721061][]

### 第三步：重新运行并访问 ###

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

![image-20221006104952268][]

# 四、使 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

![image-20221006110601204][]

# 五、使 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：重新导出类型报错 ##

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

### 代码 ###

![image-20221006202839770][]

### 运行时出错 ###

![image-20221006202729198][]

### 开启 isolatedModules 后 ###

![image-20221006203029215][]

### 修正写法后的代码 ###

![image-20221006203116693][]

### 运行并访问的结果 ###

> 正常无错！

![image-20221006203159015][]

## 3、作用2：访问枚举 ##

### 代码 ###

> 关闭时，正常不报错！

![image-20221006203619113][]

### 运行时出错 ###

![image-20221006203735181][]

### 开启 isolatedModules 后 ###

> 报错！

![image-20221006203816308][]

### 补充 ###

> 当不使用 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 文件中没有导入或导出则报错 ##

> 不常用！

### 报错 ###

![image-20221006204458527][]

### 添加导出后 ###

![image-20221006204532724][]

# 七、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"
        ]
    }

### 第二步：查看 ###

**提示**

![image-20221006205222580][]

**类型**

![image-20221006205256768][]

## 3、支持哪些类型 ##

### 支持的类型 ###

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

### 静态文件导入举例 ###

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

[image-20221006104414024]: https://img-blog.csdnimg.cn/img_convert/dfceffd28c0e14c2a524a237919b0a40.png
[image-20221006104721061]: https://img-blog.csdnimg.cn/img_convert/32fa6d3c0a739e191a1062abf5d0c1a4.png
[image-20221006104952268]: https://img-blog.csdnimg.cn/img_convert/b52bf543b22fab9907fa3fa4abbd00e3.png
[image-20221006110601204]: https://img-blog.csdnimg.cn/img_convert/5e3841542e8ee22a3fb379ed740882b6.png
[image-20221006202839770]: https://img-blog.csdnimg.cn/img_convert/ac507083f62d0834361ac844b2aab11b.png
[image-20221006202729198]: https://img-blog.csdnimg.cn/img_convert/1a98db2e71617b77ca5dfb365e892b92.png
[image-20221006203029215]: https://img-blog.csdnimg.cn/img_convert/f45a8ef85ccd592257951b47e2fef5fe.png
[image-20221006203116693]: https://img-blog.csdnimg.cn/img_convert/29d963fa87528ca9b7043c3c8153db43.png
[image-20221006203159015]: https://img-blog.csdnimg.cn/img_convert/00d7a97e54bb98222237276a163cbfd2.png
[image-20221006203619113]: https://img-blog.csdnimg.cn/img_convert/815a00f68c36f0a14099998a9422b223.png
[image-20221006203735181]: https://img-blog.csdnimg.cn/img_convert/48e761694cf3b368910d9aff95fc1148.png
[image-20221006203816308]: https://img-blog.csdnimg.cn/img_convert/8ef197b8e145138b02997dade797b46a.png
[image-20221006204458527]: https://img-blog.csdnimg.cn/img_convert/ba17609572d1127cfdf6d00ea3707e3e.png
[image-20221006204532724]: https://img-blog.csdnimg.cn/img_convert/a433e94d900e7ca9e889865746dea9df.png
[image-20221006205222580]: https://img-blog.csdnimg.cn/img_convert/03d13d2d9a48f8593dedda0fdb5a4257.png
[image-20221006205256768]: https://img-blog.csdnimg.cn/img_convert/9c3cd552d4bac185e11d2e8554b9ff29.png