Typescript

修复 TypeScript 中导入 vue 文件报错显红 vue 2 的解决办法，针对 vue 文件导入报错 创建一个 shims.d.ts 文件，放置到 src/globalDeclare 中 declare module '*.vue' { import Vue from 'vue'; export default Vue; } vue 3.0 的解决办法，针对 vue 文件导入报错 vue3.0 中使用上述办法，会使 createApp 与 vue 类型不符合 导致 Vue 类型与 PublicAPIComponent 不符合 因此 vue3 中的声明方法使用以下办法： declare module '*.vue' { import { defineComponent } from 'vue'; const Component: ReturnType<typeof defineComponent>; export default Component; } 注意，该模块声明需要单独创建文件声明 在 tsconfig.json 中添加 { "compilerOptions"： { "typeRoots"： [ "src/globalDeclare" ] } }

如果你是一名 TypeScript 开发者，你一定会遇到各种各样的错误和警告信息。这些信息通常很难阅读和理解，给调试带来了很大的困难。但是，现在有一个名为 Pretty TypeScript Errors 的 VS Code 插件，可以帮助你美化 TypeScript 的错误和警告信息，让它们变得更加易读和清晰。 Pretty TypeScript Errors 是一个 VS Code 插件，可以美化和格式化 TypeScript 的错误和警告信息，让它们变得更加易读和清晰。它支持自定义主题，显示相关的代码片段以查明问题根源，完全兼容 TypeScript，并支持 VS Code、Webpack 等主流工具。本文介绍了该插件的主要功能、安装方法，以及示例和支持范围。如果你是一名 TypeScript 开发者，强烈推荐你安装并使用这个工具。 主要功能 美化和格式化 TypeScript 错误和警告信息 显示相关的代码片段以查明问题根源 友好的颜色方案，让错误一目了然 支持自定义主题 支持 VS Code、Webpack 等主流工具 完全兼容 TypeScript 安装和配置 VScode 插件安装 安装地址： https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors 示例 下面是 VS Code 带有错误的 TypeScript 代码前后效果对比： 原始错误： error TS2322: Type 'string' is not assignable to type 'number'. var x: number = "hello" ~~~~~~ 美化后效果： ...

在项目浏览器兼容测试中，发现有很多兼容性的问题，大多数是用户较少的浏览器，如 2345 浏览器和 32 位的 360 极速兼容性较差，所以总不能人少就不去修复吧，当然 IE 是个例外（人多我也不去修）。（以下我自己记录，可能还有其他优秀写法欢迎指教） ?? 号 虽然这个号在现在用的比较多，但是兼容性还是不行，所以还是老实用回 || 但是得注意他们之间的区别 String 中的 replaceAll 在字符串中有两函数，其中 replaceAll 是在 ES12+后加入的，所有有些浏览器并不支持，所以改为 replace 的正则写法兼容性是最好的如 const str = "Rakers Rakers"; str.replaceAll("Rakers", "Rakers1024"); //Rakers1024 Rakers1024 str.replace(/Rakers/g, "Rakers1024"); //Rakers1024 Rakers1024 //使用正则的replace正则的形式结果是一致的 数组取值 在平常我们遇到可能为空的数组，又想用简单的式子读出来数组内容，又不想他报错，特别是写在前端页面的式子，报错就导致页面都加载不出来了 const arr = Math.random() > 0.5 ? [] : [1]; //一般写法 console.log(arr[0]); //在不知道是否返回空数组的情况下很容易报错 console.log(arr && arr.length > 0 ? arr[0] : undefined); //一般都这么写，但是会导致式子很长，特别是如果数组不是变量，而是很长的对象内函数值就更长了 console.log(arr?.at(0)); //这种应该是最短的了，而且不会报错 但是需要支持ES6语法

之前公司说要建立起前后端分离开发模式，而我只是刚毕业，让我负责建立起这个规范 ，虽然刚毕业还没去大厂待过，对我来说是个挑战，只能按我理解和网上的方案进行建立。在 Google 和 github 搜了好多项目，最终找到一个很好的工具，只要搭建在内网就能完美解决前后端分离开发的一些缺点。下面搭建看看 1.搭建 Yapi 的数据库 mongo 直接 docker 命令走起 docker run -d \ -p 27017:27017 \ --name mongo \ --restart=always \ -v /data/mongo:/data/db \ -e MONGO_INITDB_ROOT_USERNAME=mongo \ -e MONGO_INITDB_ROOT_PASSWORD=123456 \ mongo 2.自定义配置文件 yapi-config.json mkdir /data/yapi vim /data/yapi/yapi-config.json 填入配置（账号密码自己改） { "port": "3000", "adminAccount": "[email protected]", "timeout": 120000, "db": { "servername": "mongo", "DATABASE": "yapi", "port": 27017, "user": "mongo", "pass": "123456", "authSource": "admin" } } 3.初始化 YAPI 数据库索引及管理员账号 docker run -it --rm \ --link mongo:mongo \ --entrypoint npm \ --workdir /yapi/vendors \ -v /data/yapi/yapi-config.json:/yapi/config.json \ registry.cn-hangzhou.aliyuncs.com/anoyi/yapi \ run install-server 记录密码 ...