分类 typescript 下的文章

Angular引入ant.desigin的Transfer穿梭框和轮播图carousel，【更新】穿梭框数据大表格渲染支持搜索

2024-08-11

在Angular中，你可以使用ng-zorro-antd库中的Transfer List组件和Carousel组件来实现你所描述的需求。以下是如何使用这两个组件的简要示例：

首先，确保你已经安装了ng-zorro-antd。如果还没有安装，可以通过以下命令安装：




ng add ng-zorro-antd

在你的组件中，引入Transfer和Carousel组件：




import { TransferItem } from 'ng-zorro-antd/transfer';
import { CarouselModule } from 'ng-zorro-antd/carousel';

在你的组件模板中，使用Transfer和Carousel组件：




<!-- Transfer List Component -->
<nz-transfer
  [nzDataSource]="transferData"
  [nzListStyle]="{'width.px': 300, 'height.px': 300}">
</nz-transfer>
 
<!-- Carousel Component -->
<nz-carousel [nzAutoPlay]="true" [nzDots]="true">
  <div nz-carousel-content *ngFor="let img of images">
    <img [src]="img" style="width: 100%; height: 100%">
  </div>
</nz-carousel>

在你的组件类中，设置Transfer和Carousel所需的数据：




import { Component } from '@angular/core';
 
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 假设transferData是一个包含多个对象的数组，每个对象都有title和direction属性
  transferData = [...]; // 填充你的数据
 
  // 假设images是一个包含多个图片链接的数组
  images = [...]; // 填充你的图片链接数据
 
  // 如果Transfer的数据量很大，你可以使用虚拟滚动来提高性能
  // 这里省略了虚拟滚动的实现
}

请注意，示例中的transferData和images数据应该根据你的实际数据进行替换。

以上代码提供了Transfer List和Carousel的基本使用方法，你可以根据自己的需求进一步定制它们。如果你需要处理大量数据的性能问题，可以考虑使用虚拟滚动技术，例如Angular CDK的cdkVirtualScrollViewport。

- 阅读更多 -

前端 vite 配置代理服务器解决跨域问题

System

2024-08-11

所有,typescript

在Vite项目中，你可以通过修改Vite配置文件来设置代理服务器，从而解决跨域问题。以下是一个简单的配置示例：

找到项目根目录下的 vite.config.js 文件（如果你使用的是 TypeScript，则可能是 vite.config.ts）。
在配置文件中，添加一个 server 配置对象，并在其中设置 proxy 属性。
在 proxy 对象中，你可以定义要代理的路径和相应的目标服务器。

下面是一个配置代理服务器来解决跨域问题的示例代码：




// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
 
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写
      },
    },
  },
});

在这个配置中，当请求以 /api 开头时，所有的请求都会被代理到 http://backend.example.com。changeOrigin 设置为 true 可以使得代理服务器把接收到的请求的 Host 头部改为目标服务器的地址，这对于解决跨域问题是非常重要的。rewrite 函数用于重写请求路径，这里的例子是去除了路径中的 /api 前缀。

这样配置后，前端应用发出的请求会被 Vite 代理服务器转发到指定的后端服务器，从而避免了跨域错误。

System

2024-08-11

所有,typescript

这个错误信息表明在使用 Vue 3 和 TypeScript 开发时，系统无法找到 "path" 模块的类型声明文件，或者在处理样式文件 @fs/src/style.css 时发生了网络错误 net::ERR_ABOR。

解释：

对于 "path" 模块，通常是因为 Node.js 的 path 模块在 TypeScript 中已有内置定义，但如果你需要特定的类型声明，可能是因为没有安装类型声明文件。你可以通过运行 npm install @types/node --save-dev 来安装 Node.js 类型声明文件。
对于 net::ERR_ABOR 错误，这通常表示浏览器尝试加载资源，但操作被中止。这可能是由于网络问题、资源不存在或者资源被重定向到一个无效的URL。

解决方法：

对于 "path" 模块的问题，确保已经安装了 @types/node 包。
对于样式文件加载错误，检查文件路径是否正确，确保 @fs/src/style.css 文件确实存在于指定位置。
如果是网络问题导致的资源加载失败，检查网络连接，确保服务器正常运行，资源可访问。
如果是重定向问题，检查服务器配置，确保重定向设置正确。

请根据实际情况检查和解决这两个问题。

- 阅读更多 -

【h5长按事件】H5页面监听长按和点击事件

System

2024-08-11

所有,typescript

在H5页面中，可以使用JavaScript监听contextmenu和mousedown事件来分别处理长按和点击事件。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长按和点击事件</title>
<script>
window.onload = function() {
    var longPressTimer;
    var element = document.getElementById('myElement');
 
    element.addEventListener('contextmenu', function(e) {
        e.preventDefault();
        longPressTimer = setTimeout(function() {
            alert('长按事件触发');
        }, 1000); // 设置长按的时间为1000毫秒
    });
 
    element.addEventListener('mouseup', function(e) {
        e.preventDefault();
        clearTimeout(longPressTimer);
        if (e.which == 1) { // 判断是否是鼠标左键点击
            alert('点击事件触发');
        }
    });
};
</script>
</head>
<body>
<div id="myElement" style="width: 200px; height: 100px; background-color: #00FF00;">长按或点击这里</div>
</body>
</html>

在这个示例中，我们为目标元素添加了contextmenu和mouseup事件监听器。当用户长按时，会触发contextmenu事件，并设置一个定时器。如果在设定的时间内用户释放鼠标按钮，则会触发mouseup事件，并清除定时器。如果用户按住鼠标之后并没有释放鼠标按钮，则会执行长按的逻辑。如果是鼠标左键点击（which属性等于1），则会执行点击的逻辑。

- 阅读更多 -

Typescript 学习笔记 - 环境声明

System

2024-08-11

所有,typescript




// 定义全局变量，可以在任何地方使用
declare var require: any;
 
// 定义全局变量，可以在任何地方使用
declare global {
  var process: {
    env: {
      NODE_ENV: string;
    }
  };
}
 
// 定义全局函数，可以在任何地方使用
declare function require(moduleName: string): any;
 
// 定义全局变量，可以在任何地方使用
declare global {
  var globalVar: string;
}
 
// 使用示例
console.log(process.env.NODE_ENV);
console.log(globalVar);

这个代码示例展示了如何在TypeScript中使用declare关键字来声明全局变量和函数。这对于TypeScript开发者在编写Node.js或者浏览器端的代码时非常有用，因为它允许开发者在不包含类型定义文件的情况下，继续使用这些全局变量。

- 阅读更多 -

antd-protable的分页逻辑封装

System

2024-08-11

所有,typescript

在Ant Design Pro Table中，分页逻辑可以通过pagination属性进行配置。你可以将分页逻辑封装在一个自定义的React组件中，并在需要分页的地方使用这个组件。

以下是一个简单的PaginationWrapper组件的示例代码，用于封装分页逻辑：




import React, { useState } from 'react';
import { ProTable } from '@ant-design/pro-table';
 
const PaginationWrapper = ({ tableProps }) => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
 
  const handleTableChange = (pagination, _, snapshot) => {
    setCurrent(pagination.current);
    setPageSize(pagination.pageSize);
  };
 
  return (
    <ProTable
      {...tableProps}
      pagination={{
        current,
        pageSize,
        onChange: handleTableChange,
      }}
    />
  );
};
 
export default PaginationWrapper;

在上述代码中，PaginationWrapper组件使用了React的useState钩子来管理当前页和每页条目数。handleTableChange函数会在分页事件发生时被调用，并更新状态。在ProTable组件中，我们将封装好的状态作为pagination属性传入，从而实现分页的控制。

使用PaginationWrapper组件的方式如下：




import PaginationWrapper from './PaginationWrapper';
 
const MyTable = () => {
  const tableProps = {
    // ... 其他ProTable属性
  };
 
  return <PaginationWrapper tableProps={tableProps} />;
};

在这个例子中，PaginationWrapper组件接收一个tableProps属性，该属性包含了所有传递给ProTable组件的属性，同时PaginationWrapper内部处理分页逻辑。这样，你可以在多个表格中重用分页逻辑，而不需要在每个表格中都写一遍分页的代码。

- 阅读更多 -

记录一次ts代码中因为this指向导致的报错

System

2024-08-11

所有,typescript

错误解释：

在JavaScript（以及TypeScript，它是JavaScript的超集）中，this 关键字引用的是当前代码执行的上下文。如果在一个对象的方法中使用 this，通常它指向当前对象。但是，如果你在回调函数或者异步代码中使用 this，可能会导致 this 不再指向原来的对象，从而引发一个错误。

解决方法：

使用箭头函数：箭头函数没有自己的 this，它会捕获其在定义时所处的上下文中的 this 值。




class MyClass {
  myProperty = 'value';
 
  constructor() {
    setTimeout(() => {
      console.log(this.myProperty); // 正确引用MyClass的实例
    }, 100);
  }
}

使用 .bind()：你可以在创建函数时就绑定 this 的值。




class MyClass {
  myProperty = 'value';
 
  constructor() {
    setTimeout(function() {
      console.log(this.myProperty);
    }.bind(this), 100);
  }
}

使用 self 或其他变量保存 this 的引用：在回调或异步代码中保存 this 的引用到另一个变量。




class MyClass {
  myProperty = 'value';
 
  constructor() {
    const self = this;
    setTimeout(function() {
      console.log(self.myProperty);
    }, 100);
  }
}

使用 async/await 时，使用 await 表达式而不是 .then()，这样 this 仍然会指向正确的上下文。




class MyClass {
  myProperty = 'value';
 
  async myAsyncMethod() {
    const result = await someAsyncCall();
    console.log(this.myProperty); // 正确引用MyClass的实例
  }
}

确保在修复 this 的指向问题时，不要破坏类的封装性和模块的依赖管理。

System

2024-08-11

所有,typescript

报错解释：

这个错误表示 Node.js 运行时不识别文件扩展名 .ts，即 TypeScript 文件。通常这种错误出现在尝试直接运行一个 TypeScript 文件时，因为 Node.js 默认不知道如何执行 TypeScript 代码。

解决方法：

首先确保你已经安装了 TypeScript 编译器 (ts-node) 和 Node.js 类型定义文件 (@types/node)。
```
npm install -g ts-node @types/node
```
然后，使用 ts-node 运行你的 TypeScript 文件，而不是直接使用 node 命令。
```
ts-node your-file.ts
```
如果你希望直接运行编译后的 JavaScript 文件，你需要先使用 TypeScript 编译器 (tsc) 将 TypeScript 代码转换为 JavaScript。
```
tsc your-file.ts
```
这会生成一个同名的 .js 文件，然后你可以用 node 命令运行这个 JavaScript 文件。
```
node your-file.js
```

确保你的环境配置正确，如 tsconfig.json 文件中的设置，以确保 TypeScript 编译器按预期工作。

- 阅读更多 -

vue3+ts-实现搜索关键词变红

System

2024-08-11

所有,typescript

在Vue 3和TypeScript中，可以通过使用一个计算属性来处理搜索关键词并将其变红的需求。以下是一个简单的示例：




<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <div v-html="highlightedContent"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const searchQuery = ref('');
    const content = ref('This is a simple example content.');
 
    const highlightedContent = computed(() => {
      if (!searchQuery.value) {
        return content.value;
      }
      const regex = new RegExp(searchQuery.value, 'gi');
      return content.value.replace(regex, match => `<span class="highlight">${match}</span>`);
    });
 
    return {
      searchQuery,
      highlightedContent,
    };
  },
});
</script>
 
<style>
.highlight {
  color: red;
}
</style>

在这个例子中，我们有一个搜索框和一个显示内容的div。通过v-model绑定的searchQuery用于接收用户输入的搜索词。计算属性highlightedContent根据searchQuery的值和内容content生成一个新的HTML字符串，其中匹配搜索词的部分被<span>标签包裹，并应用了一个.highlight类。在CSS中，.highlight类设置了红色字体。

System

2024-08-11

所有,typescript

《TypeScript入门与实战》是一本针对TypeScript 2.0及更新版本编写的入门书籍。这本书从TypeScript的基础概念开始介绍，逐步深入到高级特性，包括类型声明、类型推断、泛型、装饰器等，并通过大量实例教会读者如何应用这些概念。

这本书的目标读者是对编程有基础知识，但还没有接触或使用TypeScript的开发者。

以下是书中一个简单的TypeScript类型声明示例：




// 定义一个名为User的接口，包含name和age两个属性
interface User {
  name: string;
  age: number;
}
 
// 使用类型声明创建一个user变量
let user: User = {
  name: 'Alice',
  age: 25
};
 
// 修改user的age属性，这里会报类型错误，因为age应该是number类型
user.age = 'twenty-five';

这个示例展示了如何在TypeScript中定义一个接口，并且如何通过接口来声明变量类型，从而在编译时发现类型错误。这有助于提高代码的类型安全性。

- 阅读更多 -