前言
在平时开发中，大家除了书写常规的代码之外，总会遇到各种各样的环境问题，今天小编结合行业中出现的问题做个总结，希望对大家有帮助（持续更新）
环境篇
Q1、tsc : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135 170 中的 about_Execution_Policies。
出现场景
- 安装完
typescript执行tsc --init报错
问题原因
- PowerShell的设置问题，脚本的默认执行策略 Restricted，禁止运行任何脚本和配置文件，
解决方案
- PowerShell的设置问题，脚本的默认执行策略 Restricted，禁止运行任何脚本和配置文件需要更改一下设置，用管理员身份打开
PowerShell： 使用get-executionpolicy查看脚本执行策略，使用set-executionpolicy RemoteSigned - Restricted
- RemoteSigned(建议)
- Unrestricted
- AllSigned
Q2、tsc 不是内部或外部命令，也不是可运行的程序或批处理文件
出现场景
- 安装TS后执行TS指令，生成配置文件
问题原因
- 环境变量未配置或者配置错误
解决方案
- 配置环境变量:我的电脑 --> 右键 --> 属性 --> 高级系统设置 --> 高级 --> 环境变量
- 然后使用
npm config get prefix查找npm目录 - 在环境变量里的系统变量新建变量名:
NODE_PATH变量值:变量值就是找到的npm目录路径 - 如果
node没有配置 全局和缓存这两个文件夹node_global和node_cache,变量值: 就为 nodejs 的文件路径 - 然后找到 用户变量 和 系统变量 里的
path, 在末尾添加上%NODE_PATH% - 配置完成后重新打开dos命令窗口，再次输入命令就可以了。
工具篇
Q1、VsCode 插件Vetur报错：vue3 Vetur报错：has no default export 组件没导出
出现场景
- 编写Vue3组件
问题原因
- 两个组件两种写法
Options API 、 Composition API不同 - Composition API( script setup)
- Vetur(v0.35.0) 暂不支持ts
解决方案
- 更换支持ts的语法高亮插件 Volar 以取代 Vetur (推荐此方法)
- 不用 script setup 语法糖，改用 Options API 写法(不建议)
Q2、The import path cannot end with a ‘.ts‘ extension
出现场景
- 在编写TS项目时候，页面引入的文件需要写完整的后缀名，js可以省略
问题原因
<script lang="ts">
// 不配置需要完整的后缀名才行
// import config from '@/config.ts'
import config from '@/config'
export default {
setUp() {
console.log(config)
return { config }
},
}
</script>
解决方案
- 在tsconfig.json里配置
compileOptions进行配置。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
语法篇
Q1、import type中的type指什么
出现场景
- 编写旧版本组件的时候
问题原因
- JavaScript 进行静态类型检测的检测工具--@flow，@flow的一种写法。
- 当我们定义exoprts.js时，export type MyObject = { / ... / };
- 那么当我们写imports.js时，就要用import type {MyObject} from './exports';
解决方案
exports.js
// @flow
export default class Foo {};
export type MyObject = { /* ... */ };
export interface MyInterface { /* ... */ };
imports.js
// @flow
import type Foo, {MyObject, MyInterface} from './exports';
