分类 typescript 下的文章

2024-08-17

在Vite中，你可以通过配置来实现代码分割，以将JavaScript和CSS文件进行拆分。以下是如何配置Vite来实现这一目标的步骤：

在vite.config.js中，使用build.rollupOptions.output来指定不同模块的文件名模式。
使用插件如vite-plugin-imp或vite-plugin-style-import来自动处理CSS模块。

以下是一个简单的配置示例：




// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].[hash].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`
      }
    }
  }
});

在这个配置中：

entryFileNames指定了入口文件的名称。
chunkFileNames指定了代码分割生成的代码块的文件名。
assetFileNames指定了其他资源文件的名称，如CSS和图片等。

请注意，[hash]会为每个文件生成一个唯一的hash值，确保文件名的唯一性。

对于CSS，你可以使用以下插件来自动处理：




// vite.config.js
import { defineConfig } from 'vite';
import vitePluginImp from 'vite-plugin-imp';
 
export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style/index.js`,
        },
        // 其他库...
      ],
    }),
  ],
});

vite-plugin-imp插件会自动引入所需的CSS，并且你可以在libList中指定不同库的样式引入规则。这样，你就可以将JavaScript和CSS文件进行拆分，并且管理它们的文件名。

System

2024-08-17

所有,typescript




// 假设我们有一个对象数组，对象中包含name属性，我们要根据name属性的中文首字母进行排序分组
let items = [
  { name: '张三' },
  { name: '李四' },
  { name: '王五' },
  { name: '赵六' },
  { name: '陈七' }
];
 
// 使用Array.prototype.sort()方法和String.prototype.localeCompare()方法进行排序
items.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN', { sensitivity: 'accent' }));
 
// 输出排序后的数组
console.log(items);

这段代码首先定义了一个对象数组items，然后使用sort()方法对数组进行排序，并使用localeCompare()方法在中文环境下比较字符串。localeCompare()的第一个参数是需要比较的字符串，第二个参数指定了语言环境，这里是简体中文 ('zh-Hans-CN')，第三个参数是选项对象，指定了发音敏感性 ('sensitivity')。排序后的数组将按照中文字符的顺序进行排序。

- 阅读更多 -

vite打包拆分js和css

System

2024-08-17

所有,typescript

在Vite中，你可以通过配置来实现代码分割，以将JavaScript和CSS文件进行拆分。以下是如何配置Vite来实现这一目标的步骤：

在vite.config.js中，使用build.rollupOptions.output来指定不同模块的文件名模式。
使用插件如vite-plugin-imp或vite-plugin-style-import来自动处理CSS模块。

以下是一个简单的配置示例：




// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].[hash].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`
      }
    }
  }
});

在这个配置中：

entryFileNames指定了入口文件的名称。
chunkFileNames指定了代码分割生成的代码块的文件名。
assetFileNames指定了其他资源文件的名称，如CSS和图片等。

请注意，[hash]会为每个文件生成一个唯一的hash值，确保文件名的唯一性。

对于CSS，你可以使用以下插件来自动处理：




// vite.config.js
import { defineConfig } from 'vite';
import vitePluginImp from 'vite-plugin-imp';
 
export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style/index.js`,
        },
        // 其他库...
      ],
    }),
  ],
});

vite-plugin-imp插件会自动引入所需的CSS，并且你可以在libList中指定不同库的样式引入规则。这样，你就可以将JavaScript和CSS文件进行拆分，并且管理它们的文件名。

- 阅读更多 -

TypeScript之非空断言

System

2024-08-17

所有,typescript

在TypeScript中，非空断言（Non-null Assertion）是一个简单的方法来告诉TypeScript你确定一个变量永远不会是null或undefined。它的语法是在变量名后面加上一个感叹号（!）。

例如，假设你有一个可能为null的变量maybeNull，你可以使用非空断言告诉TypeScript这个变量在使用时不会是null：




let maybeNull: string | null = getValue();
 
// 使用非空断言来确保不会类型检查错误
let nonNullValue: string = maybeNull!;

在上面的例子中，maybeNull可能是null，也可能是一个字符串。在使用maybeNull之前，我们使用maybeNull!来告诉TypeScript，无论它在运行时是什么，这个变量在此处一定不是null。

请注意，非空断言并不会改变原始变量的类型声明，它只是在编译时忽略null和undefined的类型检查。如果变量可能为null或undefined，那么在访问属性或方法时，你应该先进行检查，例如使用可选链（optional chaining）或条件（三元）运算符来提供一个默认值。

- 阅读更多 -

搭建Koa+Typescript

System

2024-08-17

所有,typescript

要搭建一个使用Koa和TypeScript的基础项目，你可以按照以下步骤操作：

确保你已经安装了Node.js和npm。
创建一个新的项目文件夹，并在终端中运行以下命令来初始化一个新的npm项目：
```
mkdir my-koa-project
cd my-koa-project
npm init -y
```
安装Koa和TypeScript。Koa是一个Node.js的web框架，而TypeScript是JavaScript的一个超集，它提供了类型系统和其他现代JavaScript特性。
```
npm install koa
npm install -D typescript
```
安装ts-node，它可以直接运行TypeScript代码：
```
npm install -D ts-node
```
创建一个tsconfig.json文件来配置TypeScript编译选项。可以使用tsc --init命令生成一个默认配置文件。

创建一个server.ts文件作为你的入口文件，并写入以下基础代码：




import Koa from 'koa';
 
const app = new Koa();
 
app.use(async (ctx) => {
    ctx.body = 'Hello Koa';
});
 
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

在package.json中添加一个脚本来运行你的应用：
```
"scripts": {
    "start": "ts-node server.ts"
}
```
运行你的应用：
```
npm start
```

以上步骤会创建一个简单的Koa服务器，并且使用TypeScript来编写代码。当你运行npm start时，ts-node会启动一个Node.js的进程，并且直接运行你的TypeScript代码。

- 阅读更多 -

vue3中通过ref获取子组件实例，取值为undefined

System

2024-08-17

所有,typescript

在Vue 3中，如果你尝试通过ref获取子组件的实例，但得到的值是undefined，可能是因为以下几个原因：

确保你已经在父组件中正确地导入了子组件。
确保你在模板中注册了子组件，并且使用了正确的引用。
确保你在父组件的setup函数中使用ref来创建引用，并在子组件上设置了ref属性。

以下是一个简单的例子，展示如何在Vue 3中通过ref获取子组件实例：




<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const child = ref(null);
 
onMounted(() => {
  console.log(child.value); // 这里应该能够获取到ChildComponent的实例
});
</script>




<!-- 子组件 -->
<template>
  <div>Child Component</div>
</template>
 
<script>
export default {
  // 子组件的逻辑
};
</script>

确保你的代码结构和引用方式与上述示例相匹配。如果仍然得到undefined，请检查以下几点：

确保没有在子组件上设置v-if或v-for，因为这些可能导致子组件未正确挂载。
确保没有异步的组件加载导致子组件在父组件尝试访问之前未能挂载。

如果以上都确认无误，但仍然出现问题，可能需要进一步检查你的Vue版本或者其他可能的代码问题。

- 阅读更多 -

Vue3 + TS4.8其他踩坑记录

System

2024-08-17

所有,typescript

在Vue3和TypeScript 4.8的环境中，遇到的一些常见问题及其解决方案如下：

类型声明与模块导出不匹配

错误示例：




// MyComponent.vue
<script lang="ts">
export default {
  // ...
}
</script>

解决方案：

确保<script>标签中使用了lang="ts"属性，并且正确导出组件。




// MyComponent.vue
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  // ...
});
</script>

类型不匹配：无法将类型“{}”分配给类型“VueConstructor”

错误示例：




// MyComponent.vue
<script lang="ts">
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  }
};
</script>

解决方案：

使用defineComponent来定义组件，并确保正确使用data函数。




// MyComponent.vue
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  }
});
</script>

类型不匹配：不能将类型“CombinedVueInstance<{}, {}, {}, {}, {}, {}, {}, {}, {}, false, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}>”分配给类型“VueConstructor”

错误示例：




// MyComponent.vue
<script lang="ts">
import { Vue } from 'vue-property-decorator';
 
export default class MyComponent extends Vue {
  // ...
}
</script>

解决方案：

使用Vue.extend来创建扩展类。




// MyComponent.vue
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
 
@Component
export default class MyComponent extends Vue.extend({
  // ...
}) {}
</script>

类型不匹配：不能将类型“VueConstructor<Vue>”分配给类型“VueConstructor<{}>”

错误示例：




// MyComponent.vue
<script lang="ts">
import { Vue } from 'vue-class-component';
 
@Component
export default class MyComponent extends Vue {
  // ...
}
</script>

解决方案：

确保@Component装饰器正确使用，并且所有必要的选项都被正确传递。




// MyComponent.vue
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
 
@Component
export default class MyComponent extends Vue {
  // ...
}
</script>

类型不匹配：不能将类型“VueConstructor<{}>”分配给类型“VueConstructor<Vue>”
错误示例：
```
// MyComponent.vue
<script lang="ts">
import Vue from 'vue';
 
export default Vue
```

System

2024-08-17

所有,typescript

这个警告信息表明你正在尝试在Vue 3的组件中使用inject()函数，但是错误地在组件的生命周期钩子之外使用了它。inject()函数应该只在setup()函数内部或者在其他组合式API如computed、reactive、ref等函数中使用。

解决方法：

确保你在组件的setup()函数内部调用inject()。
如果你正在使用Vue Router，确保你已经正确地在你的Vue应用中安装和配置了Vue Router。

示例代码：




import { inject, defineComponent, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
 
export default defineComponent({
  setup() {
    // 正确使用inject
    const someInjectedThing = inject('someInjectedThing');
 
    // 正确使用Vue Router
    const router = useRouter();
    const route = useRoute();
 
    // 其他组合式API的使用
    const someReactiveData = ref('');
 
    // 你的其他逻辑代码
 
    return {
      someInjectedThing,
      someReactiveData,
      // 更多返回给模板使用的响应式数据
    };
  }
});

确保你的inject()调用位于setup()函数内部，并且不要在任何生命周期钩子之外调用它。如果你正在使用Vue Router，确保使用useRoute和useRouter这样的Composition API来代替this.$router和this.$route。

- 阅读更多 -

umi 框架如何实现跨域请求？

System

2024-08-17

所有,typescript

在 Umi 框架中实现跨域请求，通常有以下几种方法：

配置代理（推荐方式）：
在 Umi 项目的 .umirc.ts 或 config/config.ts 文件中配置代理规则，将跨域请求代理到本地服务器。




export default {
  proxy: {
    '/api': {
      target: 'http://api.example.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
    // 可以配置多个代理规则
  },
};

使用 webpack-dev-server 的代理：
如果你使用的是 webpack 作为构建工具，可以在 webpack.config.js 中配置 devServer.proxy 来实现跨域请求的代理。




module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

使用 axios 的代理配置：
如果跨域请求是动态发起的，可以在发起请求时配置 axios 的代理。




const instance = axios.create({
  baseURL: '/api', // 代理后的地址
});
 
instance.get('/somePath').then(response => {
  // handle response
});

使用 cors 代理服务：
设置一个中间的代理服务器来处理跨域请求，例如使用 https://cors-anywhere.herokuapp.com/。




fetch('https://cors-anywhere.herokuapp.com/http://api.example.com/somePath')
  .then(response => response.json())
  .then(data => console.log(data));

以上方法中，第一种配置代理的方式是最为推荐的，因为它可以直接在开发环境中解决跨域问题，无需更改生产环境的服务器设置。在实际部署时，通常需要在服务器端设置合适的 CORS 策略来允许跨域请求。

- 阅读更多 -

基于 antd Upload 组件的图片墙实现拖拽排序

System

2024-08-17

所有,typescript

以下是一个使用Ant Design的Upload组件和react-dnd实现图片墙拖拽的简化示例：




import React, { useState } from 'react';
import { Upload, Icon, Modal, Button } from 'antd';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import 'antd/dist/antd.css';
 
const { Dragger } = Upload;
 
const ItemTypes = { IMAGE: 'image' };
 
function ImageItem({ isDragging, index, item, moveItem, removeItem }) {
  const ref = useDrag({
    item: { type: ItemTypes.IMAGE, index, id: item.id },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      handlerId: monitor.getHandlerId(),
    }),
  });
 
  const [, drop] = useDrop({
    accept: ItemTypes.IMAGE,
    hover(item, monitor) {
      if (item.type === ItemTypes.IMAGE && index !== monitor.getItem().index) {
        moveItem(item.index, index);
        item.index = index;
      }
    },
  });
 
  const opacity = isDragging ? 0.4 : 1;
  return (
    <div ref={(ref) => drop(ref)} style={{ opacity }}>
      <img src={item.url} alt={item.name} style={{ width: '100%' }} />
      <Button onClick={() => removeItem(index)}>Remove</Button>
    </div>
  );
}
 
const ImageWall = () => {
  const [images, setImages] = useState([
    { id: 1, url: 'image1.jpg' },
    { id: 2, url: 'image2.jpg' },
    // ...
  ]);
 
  const moveItem = (oldIndex, newIndex) => {
    setImages((items) => {
      if (oldIndex === newIndex) return items;
      const newItems = [...items];
      const [removed] = newItems.splice(oldIndex, 1);
      newItems.splice(newIndex, 0, removed);
      return newItems;
    });
  };
 
  const removeItem = (index) => {
    setImages((items) => items.filter((_, i) => i !== index));
  };
 
  return (
    <DndProvider backend={HTML5Backend}>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'space-around' }}>
        {images.map((item, index) => (
          <ImageItem
            key={item.id}
            index={index}
            item={item}
            moveItem={moveItem}
            removeItem={removeItem}
          />
        ))}
      </div>
    </DndProvider>
  );
};
 
export default ImageWall;

这段代码使用了react-dnd

- 阅读更多 -