分类所有下的文章

2024-08-07




// src/utils/http.ts
import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 根据业务判断是否需要进行错误处理
    if (res.code !== 200) {
      // 可以在这里处理不同的错误信息
      console.log('response error', res);
      return Promise.reject(new Error(res.message || 'error'));
    }
    return res;
  },
  error => {
    console.log('error', error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;
 
// src/api/user.ts
import http from '@/utils/http';
 
export const getUserInfo = (params: { id: number }) => {
  return http({
    url: '/user/info',
    method: 'get',
    params
  });
};
 
// 使用api
import { getUserInfo } from '@/api/user';
 
getUserInfo({ id: 1 }).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这个示例展示了如何在Vue3+Vite+TS项目中对axios进行二次封装，并定义了一个简单的用户信息获取API。在实际应用中，你可以根据自己的业务需求对请求和响应进行相应的处理。

System

2024-08-07

所有,typescript

这个错误信息不完整，但它提到了AsyncThunkAction，这是Redux Toolkit中的异步Thunk动作。错误似乎是在类型检查阶段发生的，可能是在TypeScript环境中。

错误的全部内容可能是：“Argument of type 'AsyncThunkAction<void, string, {}>' is not assignable to parameter of type 'AnyAction'.”

这意味着你正在尝试将一个异步Thunk动作传递给接受常规动作的函数，这不兼容。

解决方法：

确认你的函数期望接收的参数类型。如果它期望一个普通的动作对象，你需要传入一个普通的对象，而不是异步Thunk动作。
如果函数确实应该接收异步Thunk动作，确保你的函数参数是通用的AnyAction类型，而不是仅接受普通对象。

示例代码修正：




// 假设dispatch是你用来分发动作的函数
// 错误的调用方式
// dispatch(yourAsyncThunkActionCreator());
 
// 正确的调用方式，如果函数期望普通动作
dispatch({ type: 'YOUR_ACTION_TYPE', payload: 'your data' });
 
// 或者，如果函数期望AnyAction类型
dispatch(yourAsyncThunkActionCreator());

确保你的异步Thunk动作创建器（yourAsyncThunkActionCreator）返回的是一个合适的异步Thunk动作，而不是直接返回void或其他不兼容类型的值。

- 阅读更多 -

Laya/白鹭使用protobuf 2022年踩坑(ts 编译不通过必看)

System

2024-08-07

所有,typescript

关于使用 Protobuf 在2022年编译 TypeScript 出现问题，可能的解决方法如下：

确保你的项目中安装了正确版本的 protobufjs 和 ts-proto 库。
如果你使用的是 ts-proto 生成代码，确保 tsconfig.json 中的 target 和 module 设置与你的项目兼容。
确保 proto 文件中的 package 声明与生成的 TypeScript 文件的包结构相匹配。
如果遇到编译错误，检查是否有类型不匹配或者使用了不支持的语法特性。
查看是否有最新的编译器更新或者已知的 protobufjs 和 ts-proto 兼容性问题，如果有，尝试更新到最新版本。
如果问题依旧，可以在 ts-proto 的 GitHub 仓库中查找 Issues 或者提问。

请注意，由于时间较远，具体的解决方案可能需要根据实际的错误信息进行调整。

- 阅读更多 -

HTML简约时钟插件代码

System

2024-08-07

所有,html

以下是一个使用jQuery和CSS创建简约时钟的示例代码：

首先，确保在HTML文件中包含jQuery库：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接下来，添加时钟的HTML结构和CSS样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Clock</title>
<style>
  body { font-family: Arial, sans-serif; }
  #clock { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #000; }
  #clock h1 { text-align: center; color: #555; }
  #clock p { text-align: center; font-size: 20px; }
</style>
</head>
<body>
 
<div id="clock">
  <h1>Simple Clock</h1>
  <p id="time"></p>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    $('#time').text(hours + ':' + minutes + ':' + seconds);
  }
 
  $(document).ready(function() {
    setInterval(updateClock, 1000);
    updateClock();
  });
</script>
 
</body>
</html>

这段代码会在网页上显示一个简约时钟，并且会每秒更新时间。jQuery被用来处理DOM元素的交互，而CSS则负责时钟的样式展示。

- 阅读更多 -

vue3 新特性$ref,$computed，$的本质，源码解析

System

2024-08-07

所有,typescript

在Vue 3中，$ref、$computed和$不是Vue 3的新特性，而是Composition API的一部分。

$ref: 用于直接访问组件实例。在模板中使用ref属性，在JavaScript中通过this.$refs访问。
$computed: 用于定义计算属性，它们会基于响应式依赖进行缓存。
$: 是一个响应式引用的简写，通常与setup()函数中的ref()或reactive()一起使用。

下面是一个简单的例子，展示如何在Vue 3中使用$ref和$computed:




<template>
  <div>
    <input v-model="message" />
    <p>{{ fullMessage }}</p>
  </div>
</template>
 
<script>
import { ref, computed, onMounted } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, ');
    
    // 使用$ref
    onMounted(() => {
      console.log(message.value); // 直接访问message的值
    });
    
    // 使用$computed
    const fullMessage = computed(() => message.value + 'Vue 3!');
    
    return {
      message,
      fullMessage
    };
  }
};
</script>

在这个例子中，message是一个响应式引用，我们使用ref()创建它。fullMessage是一个计算属性，我们使用computed()创建它。在模板中，我们通过v-model绑定message，通过插值表达式显示fullMessage。

源码解析这部分涉及较多，但大致可以分为以下几个步骤：

创建一个响应式引用，例如ref()或reactive()。
使用computed()创建计算属性。
在setup()函数中返回响应式引用和计算属性，以便它们可以在模板中使用。

注意：$在Vue 3中通常是setup()函数的上下文引用，并不是一个特殊的API。在模板中，你可以直接使用模板引用(ref attribute)来访问子组件实例或DOM元素。

- 阅读更多 -

leetcode 题解 628.三个数的最大乘积（Typescript）

System

2024-08-07

所有,typescript

题目描述：

给定一个整数数组 nums，找出三个不同索引 i、j 和 k，使得 nums[i], nums[j] 和 nums[k] 的乘积最大，并返回这个最大的乘积。

示例 1:




输入: nums = [1,2,3]
输出: 6

示例 2:




输入: nums = [1,2,3,4]
输出: 24

提示:

3 <= nums.length <= 104
-1000 <= nums[i] <= 1000

题解：




function maximumProduct(nums: number[]): number {
    nums.sort((a, b) => a - b);
    return Math.max(nums[0] * nums[1] * nums[nums.length - 1], nums[nums.length - 3] * nums[nums.length - 2] * nums[nums.length - 1]);
}

这段代码首先对数组进行排序，然后返回两种可能的最大乘积：

最大的三个数相乘
最小的两个数和第三大的数相乘

这样就可以得到数组中三个数的最大乘积。

- 阅读更多 -

改变this指向的三种方法

System

2024-08-07

所有,typescript

在JavaScript中，可以通过三种方法来改变函数内的this指向：

使用call()方法
使用apply()方法
使用bind()方法

1. 使用`call()`方法

call()方法调用一个对象的一个方法，以另一个对象替换当前对象。




var obj = {
  name: 'John Doe',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
}
 
var obj2 = {
  name: 'Jane Doe'
}
 
obj.greet.call(obj2); // 输出 'Hello, Jane Doe'

2. 使用`apply()`方法

apply()方法调用一个对象的一个方法，以另一个对象替换当前对象。




var obj = {
  name: 'John Doe',
  greet: function(arr) {
    console.log('Hello, ' + this.name + ', nice to meet you ' + arr[0] + ' ' + arr[1]);
  }
}
 
var obj2 = {
  name: 'Jane Doe'
}
 
obj.greet.apply(obj2, ['Alice', 'Smith']); // 输出 'Hello, Jane Doe, nice to meet you Alice Smith'

3. 使用`bind()`方法

bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数则作为新函数的参数。




var obj = {
  name: 'John Doe',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
}
 
var obj2 = {
  name: 'Jane Doe'
}
 
var greetJane = obj.greet.bind(obj2);
greetJane(); // 输出 'Hello, Jane Doe'

以上三种方法都可以改变函数内部的this指向，选择哪种方法取决于具体的使用场景。

- 阅读更多 -

vue3 + tsx语法小记

System

2024-08-07

所有,typescript




<script lang="tsx">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
 
    const increment = () => {
      count.value++;
    };
 
    const decrement = () => {
      count.value--;
    };
 
    return () => (
      <div>
        <p>{count.value}</p>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  },
});
</script>

这个例子展示了如何在Vue 3中使用TSX来创建一个简单的计数器应用。我们使用<script lang="tsx">来指定我们要写TSX代码。defineComponent函数用于定义组件，ref用于创建响应式数据。通过在setup函数中定义increment和decrement方法来改变计数器的值，并在返回的渲染函数中渲染计数器的当前值和控制按钮。

- 阅读更多 -

Vue3:异步加载await ＜suspense＞

System

2024-08-07

所有,typescript

在Vue 3中，可以使用<Suspense>组件来处理异步加载的组件。当你需要等待异步数据或者异步组件加载完成时，可以使用<Suspense>组件配合async setup函数来实现。

以下是一个简单的例子，展示如何使用<Suspense>和async setup来异步加载组件：




<template>
  <Suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <!-- 在组件加载时显示的内容 -->
      <div>Loading...</div>
    </template>
  </Suspense>
</template>
 
<script>
import { defineAsyncComponent } from 'vue';
 
export default {
  components: {
    AsyncComp: defineAsyncComponent(() =>
      import('./AsyncComp.vue').then((c) => {
        // 你也可以在这里处理错误
        return c;
      }).catch((error) => {
        console.error('Error loading component:', error);
        // 返回一个组件，用于在加载失败时显示
        return {
          template: '<div>Error loading component</div>',
        };
      })
    )
  }
};
</script>

在这个例子中，AsyncComp.vue是一个异步加载的组件。defineAsyncComponent用于创建一个异步加载的组件工厂。Suspense组件提供了一个fallback插槽，在AsyncComp组件还没加载完成时显示。如果异步组件加载失败，你可以在catch中处理错误并返回一个错误组件。

- 阅读更多 -

typescript 数组操作

System

2024-08-07

所有,typescript

在TypeScript中，您可以使用多种方法来操作数组。以下是一些常见的操作数组的方法和示例代码：

创建数组：




let arr: number[] = [1, 2, 3];

访问数组元素：




let first = arr[0];

修改数组元素：




arr[0] = 10;

添加元素到数组：




arr.push(4);

从数组中删除元素：




arr.pop(); // 删除最后一个元素

数组连接：




let arr2: number[] = [4, 5, 6];
arr.push(...arr2);

使用map进行转换：




let doubled = arr.map(x => x * 2);

使用filter进行筛选：




let even = arr.filter(x => x % 2 === 0);

使用reduce进行累加：




let sum = arr.reduce((total, current) => total + current, 0);

使用forEach进行遍历：




arr.forEach(x => console.log(x));

这些是操作TypeScript数组的基本方法，您可以根据需要使用它们来处理您的数组数据。

- 阅读更多 -

1. 使用call()方法

2. 使用apply()方法

3. 使用bind()方法

1. 使用`call()`方法

2. 使用`apply()`方法

3. 使用`bind()`方法