分类 typescript 下的文章

React 中使用antd，刷新时被选中的menu二级菜单初始化的展开问题

2024-08-26

在React中使用Ant Design时，如果你遇到刷新页面时，被选中的二级菜单（SubMenu）不会初始化为展开状态的问题，可以通过以下步骤解决：

使用localStorage或者sessionStorage来保存菜单状态。
在组件的componentDidMount生命周期方法中，读取保存的状态并更新菜单的展开状态。
使用SubMenu组件的openKeys属性来控制展开状态。

以下是一个简化的例子：

import React, { Component } from 'react';
import { Menu } from 'antd';
import { SaveOutlined, UserOutlined, LaptopOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

class SiderMenu extends Component {
  state = {
    openKeys: []
  };

  componentDidMount() {
    const openKeys = localStorage.getItem('openKeys');
    if (openKeys) {
      this.setState({ openKeys: openKeys.split(',') });
    }
  }

  onOpenChange = openKeys => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (latestOpenKey) {
      localStorage.setItem('openKeys', openKeys.join(','));
    }

    this.setState({ openKeys });
  };

  render() {
    return (
      <Menu
        mode="inline"
        openKeys={this.state.openKeys}
        onOpenChange={this.onOpenChange}
        style={{ width: 256 }}
      >
        <SubMenu key="sub1" icon={<UserOutlined />} title="Submenu 1">
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<LaptopOutlined />} title="Submenu 2">
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>
        <Menu.Item key="5" icon={<SaveOutlined />}>
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
            Item 5
          </a>
        </Menu.Item>
      </Menu>
    );
  }
}

export default SiderMenu;

在这个例子中，当SubMenu展开时，它的key会被保存到localStorage中。当组件挂载后，会从localStorage中读取保存的openKeys并更新到状态中，从而使相应的SubMenu展开。这样，当页面刷新时，展开状态会被记住。

TS如何解决属性在另一个类型中不存在的问题？

2024-08-26

在TypeScript中，如果你尝试访问一个对象的属性，而这个属性在该对象的类型定义中没有被声明，TypeScript会报错。为了解决这个问题，你可以采取以下几种策略：

使用类型断言来告诉TypeScript你知道该对象具有该属性，即使它在类型定义中没有被声明。
使用可选链（Optional Chaining）操作符来安全地访问可能不存在的属性。
使用类型声明扩展来确保属性在未来的操作中仍然可用。

以下是每种策略的示例代码：

使用类型断言：

interface Person {
    name: string;
}

let person: Person = { name: "Alice" };

let age = (person as any).age; // 使用类型断言，告诉TS你知道有一个age属性

使用可选链：

interface Person {
    name: string;
    age?: number; // 使用可选属性声明
}

let person: Person = { name: "Alice" };

let age = person.age?.toString(); // 使用可选链安全地调用age

使用类型声明扩展：

interface Person {
    name: string;
}

interface PersonWithAge extends Person {
    age: number; // 扩展接口以确保将来的PersonWithAge对象具有age属性
}

let person: Person = { name: "Alice" };
let personWithAge: PersonWithAge = { ...person, age: 25 }; // 将来可以保证有age属性

选择哪种策略取决于具体情况，但总体目标是在不破坏类型安全的前提下，处理可能不存在的属性。

2024-08-26

报错解释：

这个错误通常发生在TypeScript编译器插件（ts-loader或者awesome-typescript-loader）中，表示在解析类型引用指令时遇到了非字符串值的问题。这通常是由于配置不当或者是TypeScript编译器的版本不匹配所导致的。

解决方法：

检查tsconfig.json文件中的types字段是否有错误的值。它应该是一个字符串或者字符串数组，指定需要包含的类型声明文件。
确保TypeScript的版本与你的编译器插件版本兼容。如果你使用的是webpack和ts-loader，请确保它们都是最新的或者至少是相互兼容的版本。
如果你在使用自定义的路径解析，确保resolve.extensions配置正确，并且包含了TypeScript可以理解的文件扩展名。
检查是否有其他的TypeScript编译选项或配置可能导致了不正确的类型引用解析。
如果问题依然存在，尝试清理node\_modules和package-lock.json文件，然后重新安装依赖。

如果上述步骤无法解决问题，可能需要更详细的错误日志或代码环境信息来进一步诊断问题。

【react】全选复选框和单个复选框联动功能

2024-08-26

import React, { useState } from 'react';

const CheckboxList = ({ items, onSelectAll, onSelect }) => {
  const [isSelectAll, setSelectAll] = useState(false);

  const handleSelectAll = () => {
    const isAllSelected = !isSelectAll;
    setSelectAll(isAllSelected);
    onSelectAll(isAllSelected);
  };

  const handleSelect = (item, isSelected) => {
    onSelect(item, isSelected);
    // 当所有子项目都被选中时，自动勾选全选复选框
    const allSelected = items.every(i => i.isSelected);
    if (allSelected !== isSelectAll) {
      setSelectAll(allSelected);
    }
  };

  return (
    <>
      <div>
        <input
          type="checkbox"
          checked={isSelectAll}
          onChange={handleSelectAll}
        />
        <label>Select All</label>
      </div>
      {items.map(item => (
        <div key={item.id}>
          <input
            type="checkbox"
            checked={item.isSelected}
            onChange={() => handleSelect(item, !item.isSelected)}
          />
          <label>{item.label}</label>
        </div>
      ))}
    </>
  );
};

// 使用示例
const items = [
  { id: 1, label: 'Item 1', isSelected: false },
  { id: 2, label: 'Item 2', isSelected: false },
  { id: 3, label: 'Item 3', isSelected: false },
];

const App = () => {
  const [selectedItems, setSelectedItems] = useState(items);

  const selectAllItems = isSelectAll => {
    setSelectedItems(items =>
      items.map(item => ({ ...item, isSelected: isSelectAll }))
    );
  };

  const selectItem = (item, isSelected) => {
    setSelectedItems(items =>
      items.map(i => ({ ...i, isSelected: i.id === item.id ? isSelected : i.isSelected }))
    );
  };

  return (
    <CheckboxList
      items={selectedItems}
      onSelectAll={selectAllItems}
      onSelect={selectItem}
    />
  );
};

export default App;

这段代码实现了一个复选框列表组件CheckboxList，其中包含全选复选框和单个复选框。当全选复选框被点击时，会触发onSelectAll回调，并将所有单个复选框的选中状态更新为全选复选框的状态。同时，单个复选框的选中状态变化也会触发onSelect回调，并更新组件状态。如果所有单个复选框都被选中，全选复选框也会自动被选中；如果有任何一个单个复选框未被选中，全选复选框也会被自动取消选中。这样就实现了全选复选框和单个复选框之间的联动功能。

2024-08-26

在Vue 3.2和Vite项目中使用Element Plus并自定义主题颜色，你需要按照以下步骤操作：

安装Element Plus：

npm install element-plus --save

在项目中创建或编辑vite.config.ts文件，配置Element Plus主题：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// 导入自定义主题色
import { generateElementPlusTheme } from './element-plus/theme';

// 自定义主题色
const theme = generateElementPlusTheme({
  primary: '#你的主色',
  success: '#你的成功色',
  warning: '#你的警告色',
  danger: '#你的危险色',
  info: '#你的信息色',
});

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `${theme}`,
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
});

创建element-plus/theme文件夹和index.ts文件，用于生成Element Plus主题SCSS：

import { generateSCSS } from 'element-plus/theme-chalk/src/index';

export function generateElementPlusTheme(colors) {
  const scssVariables = Object.keys(colors)
    .map((key) => `${key}: ${colors[key]};`)
    .join('\n');

  return `$element-plus-prefix: "ep-";
$--colors: (
  ${scssVariables}
);

@import 'element-plus/theme-chalk/src/index.scss';
`;
}

在你的Vue组件中使用Element Plus组件，它们将采用你自定义的主题色。

请注意，你需要确保element-plus/theme/index.ts文件中的SCSS变量与Element Plus源SCSS变量兼容。如果Element Plus有新的颜色变量，你需要更新generateElementPlusTheme函数以包含它们。

以上步骤将允许你在Vue 3.2和Vite项目中使用自定义主题色的Element Plus组件。

2024-08-25

import { useMutation } from '@apollo/client';
import gql from 'graphql-tag';

// 定义GraphQL mutation
const CREATE_POST_MUTATION = gql`
  mutation CreatePostMutation($input: PostInput!) {
    createPost(input: $input) {
      post {
        id
        title
        contentMarkdown
        author {
          username
        }
      }
    }
  }
`;

// 使用React Hook定义函数组件
function PostCreator() {
  const [createPost] = useMutation(CREATE_POST_MUTATION);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const title = (document.getElementById('title') as HTMLInputElement).value;
    const content = (document.getElementById('content') as HTMLTextAreaElement).value;

    createPost({
      variables: {
        input: {
          title,
          contentMarkdown: content,
        },
      },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        标题:
        <input type="text" id="title" />
      </label>
      <label>
        内容:
        <textarea id="content" />
      </label>
      <button type="submit">发布</button>
    </form>
  );
}

export default PostCreator;

这段代码展示了如何使用Apollo Client的useMutation Hook在React组件中创建一个简单的博客文章提交表单。它使用了GraphQL mutation来将文章数据发送到Hashnode的API，并且展示了如何处理表单提交事件。

koa开发实践1：基于 gulp 搭建 typescript 自动构建环境

2024-08-25

// 引入gulp和相关插件
const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');

// 定义TypeScript项目，用于编译
const tsProject = ts.createProject('tsconfig.json');

// 定义一个默认的gulp任务，用于编译TypeScript代码
gulp.task('default', () => {
  // 使用gulp-sourcemaps创建源映射
  return tsProject.src()
    .pipe(sourcemaps.init()) // 初始化源映射
    .pipe(tsProject()) // 通过gulp-typescript编译TypeScript
    .js.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '.' })) // 写入源映射
    .pipe(gulp.dest('dist')); // 输出到dist目录
});

这段代码定义了一个基于Gulp的自动构建TypeScript的任务，它会在项目中寻找所有的TypeScript文件，并使用gulp-typescript插件来编译它们，同时生成源映射文件，以便开发者可以进行调试。这是开发Node.js应用时使用Gulp和TypeScript进行自动构建的一个基本示例。

使用装饰器(注解)编写express实现nestjs控制器原理

2024-08-25

在Node.js中，我们可以使用Express框架来创建web服务器，并且可以通过装饰器（注解）的形式来装饰我们的路由处理函数，以便为其添加额外的功能。然而，NestJS是一个框架，它提供了更多高级特性，如依赖注入、控制器、模块等，这些在Express中需要手动实现。

在NestJS中，控制器是组织路由逻辑和相应处理函数的地方，通过使用装饰器（注解）来标记类和方法，以告诉NestJS如何处理这些类和方法。

以下是一个使用Express和装饰器模拟NestJS控制器的简单示例：

const express = require('express');
const app = express();

// 模拟NestJS的@Controller装饰器
function Controller(path) {
  return function (target) {
    return target;
  };
}

// 模拟NestJS的@Get装饰器
function Get(path) {
  return function (target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (req, res) {
      originalMethod(req, res);
    };
    return descriptor;
  };
}

// 创建一个控制器
const MyController = Controller('my-path');

// 在控制器中定义路由处理函数
@MyController
class MyExpressController {
  @Get('hello')
  getHello(req, res) {
    res.send('Hello World!');
  }
}

// 应用路由
app.get('/my-path/hello', MyExpressController.prototype.getHello);

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在这个示例中，我们创建了一个模拟NestJS的Controller和Get装饰器。然后我们创建了一个控制器类MyExpressController，并使用这些装饰器来标记其中的路由处理函数。最后，我们使用Express的路由功能来应用这些处理函数。

这个示例只是为了展示如何使用装饰器来模拟NestJS的控制器，并不是NestJS或Express框架的实际使用方式。在实际应用中，你需要使用NestJS提供的CLI工具来生成控制器和服务，并遵循NestJS的最佳实践。

2024-08-25

报错解释：

这个错误通常是由于ESLint配置不正确或者是代码中的某些字符没有按照预期的格式进行书写。在这个具体案例中，可能是因为Vue 3模板中的一个大于号（>）后面没有跟随任何东西，但是ESLint规则期望在这里有一个大于号。

解决方法：

检查Vue组件模板中的大于号（>）是否后面紧跟着了内容。如果没有，你可能需要添加一个占位符或者正确的HTML元素。
如果这个错误是由于不正确的ESLint配置引起的，你可以尝试更新或调整.eslintrc配置文件中的规则，以确保它们与你的代码风格和项目需求相匹配。
如果你确信这个错误是不必要的或是误报，你可以在ESLint配置中禁用对应的规则。

例如，如果你确定这个错误是因为ESLint对Vue模板的解析出现问题，你可以尝试以下步骤：

在.eslintrc文件中找到与模板解析有关的规则，并禁用它。
或者，更新Vite和相关依赖包到最新版本，以确保最佳兼容性。

最后，记得在做任何更改后重新运行ESLint，以检查问题是否已经解决。