Tech Blog

2024-08-15

😩抱歉，出了点小问题，请稍后重试

vite 环境变量导致接口携带本地ip地址

2024-08-15

如果你在使用 Vite 开发时遇到了接口调用携带本地 IP 地址的问题，这通常是由于 Vite 的服务配置错误或环境变量设置不当引起的。

解决方法：

检查 Vite 配置文件（通常是 vite.config.js 或 vite.config.ts），确保你的 base 配置项正确。base 配置指定了应用的基本公共路径，如果你的应用部署在服务器的子路径上，需要设置正确的 base。
如果你使用了环境变量来配置API接口地址，请确保在不同的环境（开发环境、生产环境）中正确地设置了环境变量。
确保你没有在代码中硬编码本地 IP 地址。如果有，请替换为动态获取的域名或相对路径。
如果你是在本地开发环境中遇到这个问题，请检查你的网络配置，确保你没有通过某些网络设置（比如代理）意外地改变了请求的目标地址。
如果以上步骤都没有解决问题，可以尝试清理缓存并重启 Vite 服务器。

示例代码：




// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
 
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 其他配置...
});
 
// 环境变量使用
const apiUrl = process.env.VITE_API_URL;
 
// 在请求中使用环境变量配置的API地址
fetch(`${apiUrl}/endpoint`).then(response => {
  // 处理响应...
});

在 .env 文件中设置环境变量：




# 开发环境变量
VITE_API_URL=http://localhost:3000/api
 
# 生产环境变量
# 通常在 `.env.production` 文件中设置
VITE_API_URL=https://your-production-domain.com/api

确保你的 Vite 项目根目录下有相应的环境变量文件，并根据需要调整。

2024-08-15

解释：

这个错误表示TypeScript编译器无法在项目中找到指定的模块。在这种情况下，模块被理解为图片资源，因为你尝试通过import语句导入图片。

TypeScript默认只支持导入.ts、.tsx、.js、.jsx等类型的文件。如果你尝试导入其他类型的文件，比如图片、CSS、JSON等，编译器会报错。

解决方法：

确保图片文件在项目中确实存在于你尝试导入的路径。
如果你使用的是Webpack或其他模块打包器，确保配置了相应的loader来处理图片文件。例如，对于Webpack，你可能需要安装并配置file-loader或url-loader来处理图片文件。
在TypeScript配置文件tsconfig.json中，使用include或files属性明确指定图片文件的路径。
如果你不需要在TypeScript文件中直接导入图片，而只是在HTML或其他地方使用图片，你可以通过在tsconfig.json中设置compilerOptions下的types选项来忽略对图片文件的检查。例如，设置"types": ["node"]将Node.js的全局类型添加到项目中，这样就不会对图片文件进行类型检查。

示例配置：




{
  "compilerOptions": {
    "types": ["node"] // 忽略对图片文件的类型检查
  }
}

请根据你的项目具体情况选择适当的解决方法。

2024-08-15




// 定义一个用于泛型约束的接口
interface Lengthwise {
  length: number;
}
 
// 定义一个泛型函数，该函数接受一个泛型参数 T，并且 T 必须是具有 length 属性的类型
function identity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}
 
// 使用泛型约束
let output = identity<String>("hello"); // 输出: 5
 
// 定义泛型接口
interface GenericIdentityFn<T> {
  (arg: T): T;
}
 
// 实现泛型接口
let myIdentity: GenericIdentityFn<number> = function<T>(arg: T): T {
  return arg;
};
 
console.log(myIdentity(123)); // 输出: 123
 
// 定义泛型接口继承
interface Numeric extends Lengthwise {
  // 这里可以添加更多属性，如 value: number
}
 
// 使用泛型接口继承
let numericIdentity: GenericIdentityFn<Numeric> = identity;
 
console.log(numericIdentity({ length: 42, value: 42 }).length); // 输出: 42

这个代码示例展示了如何在 TypeScript 中使用泛型约束来创建可以处理特定类型数据的函数，以及如何定义和实现泛型接口。它还演示了如何通过继承现有的接口来扩展泛型约束。这些概念对于学习 TypeScript 中的泛型编程是非常有用的。

【TypeScript】深入学习TypeScript命名空间

2024-08-15




// 定义一个名为Geometry的TypeScript命名空间
namespace Geometry {
    // 定义一个Point类
    export class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }
 
    // 定义一个方法来计算两点之间的距离
    export function distance(p1: Point, p2: Point): number {
        const dx = p1.x - p2.x;
        const dy = p1.y - p2.y;
        return Math.sqrt(dx * dx + dy * dy);
    }
}
 
// 使用Geometry命名空间中的类和函数
const point1 = new Geometry.Point(0, 0);
const point2 = new Geometry.Point(3, 4);
const distanceBetweenPoints = Geometry.distance(point1, point2);
console.log(`The distance between the two points is: ${distanceBetweenPoints}`);

这段代码定义了一个名为Geometry的命名空间，并在其中创建了一个Point类和一个计算两点之间距离的函数。然后，我们创建了两个Point实例并计算它们之间的距离，最后将结果打印到控制台。这个例子展示了如何在TypeScript中组织代码和创建模块，这对于大型应用程序的开发是非常有用的。

创建vue3+ts+element-plus项目

2024-08-15

要创建一个使用 Vue 3、TypeScript 和 Element Plus 的新项目，你可以使用 Vue CLI 来设置这个项目。以下是步骤和示例代码：

确保你已经安装了最新版本的 Vue CLI。如果没有安装，可以通过以下命令安装：




npm install -g @vue/cli
# 或者
yarn global add @vue/cli

使用 Vue CLI 创建一个新项目，并在创建过程中选择需要的配置：




vue create my-vue3-ts-project

在创建过程中，Vue CLI 会问你一系列问题来配置你的项目。对于 TypeScript 和 Element Plus，你可以选择：

当被问到 "Pick a Vue version" 时，选择 Vue 3。
当被问到 "Choose a version of Vue 3" 时，选择 "Vue 3"。
当被问到 "Use history mode for router?" 时，选择你的偏好。
当被问到 "Pick a state management solution" 时，可以选择 "No" 或者其他你选择的状态管理库。
当被问到 "Pick a linter / formatter config" 时，选择你喜欢的代码风格配置。
当被问到 "Pick additional lint features" 时，选择你需要的额外 lint 特性。
当被问到 "Where do you prefer placing config for Babel, ESLint, etc.?" 时，选择 "In dedicated config files"。
当被问到 "Save this as a preset for future projects?" 时，可以选择 "Yes" 如果你想保存这个配置作为将来项目的默认配置。

选择完毕后，Vue CLI 会自动安装所有的依赖并创建项目。
安装 Element Plus：




cd my-vue3-ts-project
npm install element-plus --save
# 或者
yarn add element-plus

在你的 Vue 组件中使用 Element Plus。例如，在 src/components/HelloWorld.vue 文件中：




<template>
  <div>
    <el-button @click="handleClick">Click me!</el-button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';
 
export default defineComponent({
  components: {
    ElButton,
  },
  setup() {
    const handleClick = () => {
      alert('Button clicked!');
    };
 
    return {
      handleClick,
    };
  },
});
</script>

最后，运行你的项目：




npm run serve
# 或者
yarn serve

以上步骤会创建一个新的 Vue 3 + TypeScript + Element Plus 的项目，并允许你开始开发你的应用程序。

input 框上传多个文件以及做文件校验

2024-08-15

在HTML中，可以使用<input type="file" multiple>来允许用户上传多个文件。在JavaScript中，可以通过监听input元素的change事件来处理文件上传，并使用File API来进行文件验证。

以下是一个简单的例子，展示了如何上传多个文件并进行文件类型和大小验证：

HTML:




<input type="file" id="file-upload" multiple />

JavaScript:




document.getElementById('file-upload').addEventListener('change', function(e) {
    const files = e.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        // 检查文件大小
        if (file.size > 10 * 1024 * 1024) { // 例如，限制文件大小为10MB
            alert('文件太大！');
            return;
        }
        // 检查文件类型
        if (!file.type.startsWith('image/')) { // 例如，限制只能上传图片
            alert('请上传图片文件！');
            return;
        }
        // 其他验证逻辑...
 
        // 如果验证通过，可以在这里处理文件上传等逻辑
        // 例如使用 FormData 和 fetch API 上传文件
    }
});

这段代码中，我们监听了文件输入框的change事件，当用户选择文件后触发。我们遍历所有选中的文件，对每个文件应用大小和类型的验证。如果验证通过，可以继续处理文件上传的逻辑。如果验证失败，则给出提示信息并返回，不再执行后续操作。

2024-08-15

解释：

这个错误通常发生在使用TypeScript项目中尝试直接require()一个使用ES模块语法编写的JavaScript文件时。在TypeScript中，默认情况下不支持ES模块的require，因为TypeScript将ES模块转译为CommonJS格式，而在运行时Node.js默认使用ES模块。

解决方法：

将JavaScript文件改造为TypeScript文件，并添加相应的类型声明。
如果不想改变JavaScript文件，可以在tsconfig.json中设置"esModuleInterop": true和"allowSyntheticDefaultImports": true，然后使用import语法而不是require。
在tsconfig.json中设置"module": "commonjs"，这样TypeScript就会编译输出CommonJS模块，与Node.js兼容。
如果你正在使用Babel，可以在Babel配置中添加一个插件，比如@babel/plugin-transform-modules-commonjs，来将ES模块转换为CommonJS模块。

选择哪种方法取决于你的具体项目需求和上下文。通常推荐使用第2或第3种方法，因为它们不需要改变原有的JavaScript文件，只是调整TypeScript配置或者编译选项。

2024-08-15

在TypeScript中，any类型和unknown都允许你存储任何类型的值。但是，它们在类型检查方面有一些不同。

Any类型

Any类型是TypeScript中的弱类型。当你不确定一个变量的类型时，可以使用any类型。你可以将任何类型的值分配给any类型的变量。




let x: any = 1;       // x是一个数字
x = 'Hello World';    // x现在是一个字符串
x = true;             // x现在是一个布尔值

Unknown类型

Unknown类型是TypeScript中的强类型。当你不确定一个变量的类型时，可以使用unknown类型。与any类型不同，unknown类型的变量不能直接使用，必须先进行类型检查。




let x: unknown = 1;       // x是一个数字
 
// 错误：不能直接输出未知类型的变量
console.log(x);
 
// 正确：使用类型检查后，再使用变量
if (typeof x === 'number') {
    console.log(x);
}

使用场景

如果你不关心变量的类型，那么可以使用any类型。
如果你想在存储前确保类型安全，那么可以使用unknown类型。

使用示例




// Any类型
let notSure: any = 4;
notSure = "Maybe a string instead";
notSure = false; // 可以将任何类型的值赋值给any类型的变量
 
// Unknown类型
let notSure2: unknown = 4;
 
// 错误：不能直接输出未知类型的变量
console.log(notSure2);
 
// 正确：使用类型检查后，再使用变量
if (typeof notSure2 === "number") {
    console.log(notSure2);
}

以上就是TypeScript中Any类型和Unknown类型的基本使用方法和使用场景。

在 VSCode 中像写 TypeScript 一样写 JavaScript

2024-08-15

在VSCode中使用JavaScript进行编写时，可以通过以下几种方式来提高代码的可读性和提高生产力：

使用JavaScript的类型注解（只在支持TypeScript语法的VSCode中有效）：




// @ts-check
/** @type {number} */
let a = 10;
a = "Hello World"; // 这会在保存时提示错误

使用JSDoc注释来注释函数和变量：




/**
 * 加法函数
 * @param {number} a 加数
 * @param {number} b 加数
 * @returns {number} 结果
 */
function add(a, b) {
    return a + b;
}
 
/** @type {number} */
let result = add(5, 3); // result 类型为 number

使用VSCode的智能感知功能：

使用/// <reference lib="dom" />来启用DOM智能感知。
使用/// <reference lib="es2015" />来启用ECMAScript 2015 (ES6)智能感知。

在jsconfig.json文件中配置JavaScript项目：




{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}

使用ESLint进行代码质量检查和格式一致性：

首先安装ESLint：




npm install eslint --save-dev

然后运行ESLint初始化：




./node_modules/.bin/eslint --init

根据提示进行配置，VSCode可以使用ESLint插件来在保存文件时自动格式化代码。

使用Prettier进行代码格式化：

首先安装Prettier：




npm install prettier --save-dev --save-exact

然后在package.json中添加Prettier配置：




{
  "name": "your-package-name",
  "version": "1.0.0",
  "devDependencies": {
    "prettier": "1.19.1"
  },
  "scripts": {
    "format": "prettier --write \"src/**/*.js\""
  }
}

在VSCode中安装Prettier插件，然后可以通过按下Shift + Alt + F（或者通过右键菜单选择“Format Document”）来格式化当前文件。

使用TypeScript编写代码，并将其编译为JavaScript：

首先安装TypeScript：




npm install typescript --save-dev

然后创建一个tsconfig.json文件并配置：




{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "./dist",
        "allowJs": true
    },
    "include": [
        "./src/**/*"
    ]
}

在VSCode中，可以通过任务：Terminal > Run Task... > tsc: watch - tsconfig.json来启动TypeScript的监视编译。

这些方法可以帮助你在VSCode中更加高效地编写JavaScript代码，提高代码质量和可维护性。