【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 便于复制！

第四步：结论

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的简单使用

2、ts的.d.ts和declare究竟是干嘛用的

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';