分类 typescript 下的文章

2024-08-09

在TypeScript中，对象类型的声明可以通过交叉类型（&）或者合并类型（|）进行合并。但是，交叉类型更常用于合并多个类型的共有属性，而合并类型通常用于表示一个类型是多种类型中的任意一个。

交叉类型（&）用于合并多个类型的共有属性：




type A = { name: string; }
type B = { age: number; }
type C = A & B;  // 结果类型为 { name: string; age: number; }

合并类型（|）用于表示一个类型可能是多种类型中的一个：




type A = { name: string; }
type B = { age: number; }
type C = A | B;  // 结果类型为 { name: string; } | { age: number; }

注意事项：

使用交叉类型时，如果有重复属性，它们会被合并为共同的属性，这可能导致属性类型的混合。
使用合并类型时，如果有重复的类型，它们会被展开成两个独立的子类型。
在使用合并类型时，如果想要确保某个属性在所有类型中都存在，可以使用分布式属性来精确控制。

例如，使用分布式属性来确保name属性在所有类型中都存在：




type A = { name: string; }
type B = { age: number; }
type NameExtracted = A & { [P in keyof B]: never };
type C = NameExtracted | B;  // 结果类型为 { name: string; age: number; }

- 阅读更多 -

Nuxt3 简单集成 GoogleMap

System

2024-08-09

所有,typescript

在Nuxt 3中，要简单地集成Google Maps，你可以使用Google Maps JavaScript API。以下是一个基本的集成示例：

首先，确保你已经在Google Developers Console注册了一个项目，并获取了Google Maps JavaScript API的密钥。
在nuxt.config.ts中配置Google Maps API密钥：




export default defineNuxtConfig({
  // ...
  public: {
    // 添加环境变量配置
    env: {
      GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,
    },
  },
  // ...
});

在你的组件中使用Google Maps API：




<template>
  <div id="google-map" style="height: 400px; width: 100%"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
 
const googleMap = ref(null);
 
onMounted(() => {
  // 确保环境变量已经加载
  if (process.client && process.env.GOOGLE_MAPS_API_KEY) {
    loadGoogleMaps();
  }
});
 
function loadGoogleMaps() {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}`;
  script.async = true;
  script.defer = true;
  script.onload = function() {
    googleMap.value = new google.maps.Map(document.getElementById('google-map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  };
  document.head.appendChild(script);
}
</script>

在这个例子中，我们创建了一个Vue组件，在组件加载时（onMounted生命周期钩子中），我们检查是否在客户端环境中并且有API密钥，然后动态加载Google Maps API。加载完成后，我们初始化Google Maps，并将其渲染到页面上的<div>元素中。

请确保你的Nuxt 3项目配置了环境变量，并且在合适的环境中使用了正确的Google Maps API密钥。

System

2024-08-09

所有,typescript




import { defineStore } from 'pinia'
import { persist } from 'pinia-plugin-persistedstate'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
  // 使用 persist 插件进行数据持久化
  persist: {
    enabled: true, // 启用持久化
    strategies: [
      {
        key: 'counter-state', // 本地存储的键名
        storage: localStorage, // 使用 localStorage 存储数据
      },
    ],
  },
})
 
// 创建并使用 store 实例
const useCounterStore = defineStore('counter')
// 使用 store 中的 state 和 actions
const { count, increment } = useCounterStore()

这段代码定义了一个名为 counter 的 Pinia store，并通过 pinia-plugin-persistedstate 插件使其状态可以被持久化。当 store 被创建时，如果之前存在持久化的状态，它将被恢复。用户可以通过 increment action 来增加计数器的值，并且这个变化会被持久化，即使刷新页面或关闭浏览器，计数器的数值也不会丢失。

System

2024-08-09

所有,typescript

在创建Vue 3 + Element Plus + Vite + TypeScript项目时，可以使用官方提供的Vue CLI来快速搭建项目框架。以下是步骤和示例代码：

确保你已经安装了Node.js和npm。
安装或升级到最新版本的Vue CLI：




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

创建一个新的Vue 3项目：




vue create my-vue3-project

在项目创建过程中，选择需要的配置，确保选中了Vue 3、TypeScript和Vite：




Vue 3
TypeScript
Vite

选择Element Plus作为UI框架：




? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择一个代码风格配置，这里我们选择了ESLint + Prettier。

完成项目的设置。
进入项目目录并启动项目：




cd my-vue3-project
npm run dev
# 或者
yarn dev

以上步骤将会创建一个基于Vue 3、TypeScript、Vite和Element Plus的项目，并且启动开发服务器。

- 阅读更多 -

TypeScript（单独运行ts、webpack运行ts）

System

2024-08-09

所有,typescript

在TypeScript中，可以通过以下几种方式来运行TS代码：

使用TypeScript编译器（tsc）独立运行TypeScript文件。
使用Webpack打包工具来打包和运行TypeScript代码。

使用tsc编译器

安装TypeScript:




npm install -g typescript

编译TypeScript文件:




tsc yourfile.ts

使用Webpack运行TypeScript

安装必要的包:




npm install --save-dev typescript webpack webpack-cli ts-loader

webpack.config.js配置:




module.exports = {
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
  },
};

运行Webpack:




npx webpack

以上步骤将会生成一个打包后的JavaScript文件，然后你可以用普通的方式来运行这个文件。例如，在浏览器中通过一个<script>标签，或者在Node.js环境中直接运行。

2024-08-09

在TypeScript中，你可以使用条件类型来根据第一个参数类型来定义第二个参数的类型。这种情况下，你可以使用extends关键字来实现。

下面是一个简单的例子，其中定义了一个ExtractSecondType的条件类型，它根据第一个参数的类型来决定第二个参数的类型：




type ExtractSecondType<T, U> = T extends any ? U : never;
 
// 使用示例
type Result1 = ExtractSecondType<'foo', string>; // 结果是 string
type Result2 = ExtractSecondType<'bar', number>; // 结果是 number

在这个例子中，ExtractSecondType接受两个类型参数T和U。它使用了一个条件类型表达式T extends any ? U : never，这个表达式的意思是如果T可以扩展为任何类型，那么返回U类型，否则返回never。

这个条件类型表达式利用了TypeScript中的类型守卫功能，它会根据第一个参数T的类型来决定使用U还是never作为第二个参数的类型。这样你就可以根据第一个参数来确定第二个参数的类型。

- 阅读更多 -

使用typescript封装axios

System

2024-08-09

所有,typescript

在TypeScript中封装axios，可以创建一个封装了axios实例的类，并且可以添加自定义的配置和拦截器。以下是一个简单的示例：




import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
class HttpClient {
  private static instance: HttpClient;
 
  private constructor() {}
 
  public static getInstance(): HttpClient {
    if (!this.instance) {
      this.instance = new HttpClient();
    }
    return this.instance;
  }
 
  public request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    const instance = axios.create({
      baseURL: 'https://your-api-url.com',
      // 其他默认配置
    });
 
    // 添加请求拦截器
    instance.interceptors.request.use(
      function (config) {
        // 在发送请求之前做些什么
        return config;
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );
 
    // 添加响应拦截器
    instance.interceptors.response.use(
      function (response) {
        // 对响应数据做点什么
        return response;
      },
      function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
      }
    );
 
    return instance(config);
  }
}
 
// 使用方法
const httpClient = HttpClient.getInstance();
httpClient.request({ method: 'get', url: '/someEndpoint' });

在这个封装中，我们创建了一个单例的HttpClient类，其中request方法使用axios创建了一个新的实例，并且可以添加自定义的配置和拦截器。这样，我们就可以在项目中复用这个封装过的axios实例，并且可以方便地添加全局的请求或响应逻辑。

System

2024-08-09

所有,typescript

报错解释：

这个报错通常意味着TypeScript编译器无法在项目的tsconfig.json文件配置的路径中找到模块xxx的类型声明文件。这可能是因为缺少该模块的类型定义文件，或者是模块的导入路径配置错误。

解决方法：

确认模块xxx是否有对应的类型声明文件（通常是.d.ts文件）。如果没有，可以安装相应的类型定义。
检查tsconfig.json文件中的paths和baseUrl配置，确保别名配置正确。
如果是第三方库，可能需要安装类型声明文件：
```
npm install @types/xxx --save-dev
```
替换xxx为缺失类型声明的模块名。
如果是项目内部模块，请检查导入语句的路径是否正确，并确保相应的文件存在于该路径。

确保在修改配置或安装类型定义后重新编译项目，以便更改生效。

- 阅读更多 -

el-table,selection多选通过接口拿到数据后进行反显

System

2024-08-09

所有,typescript

在使用Element UI的el-table组件进行多选操作时，你可以通过selection的change事件来处理反显的逻辑。以下是一个简单的示例：




<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRows: [] // 已选行数据
    };
  },
  methods: {
    // 通过接口获取数据
    fetchData() {
      // 假设通过apiGetData获取数据
      apiGetData().then(response => {
        this.tableData = response.data;
        // 这里可以处理已选数据的反显逻辑
        this.selectedRows = this.tableData.filter(item => item.selected);
      });
    },
    // 多选改变时的处理函数
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
  },
  created() {
    this.fetchData();
  }
};
</script>

在这个示例中，fetchData方法用于通过接口获取表格数据，并在获取数据后进行反显。handleSelectionChange方法用于处理用户的多选操作，更新selectedRows数组。

请注意，示例中的apiGetData和item.selected需要替换为实际的API调用和数据标识。实际使用时，你可能需要根据你的数据结构和接口来调整这些部分。

- 阅读更多 -

Ant Design的layout布局 --- 根据路由配置渲染

System

2024-08-09

所有,typescript

在Ant Design中，可以使用Layout组件来构建布局，并且可以根据路由配置来动态渲染不同的组件。以下是一个简单的例子，展示如何使用Ant Design的Layout和Route组件来实现这一功能：




import React from 'react';
import { Layout, Menu, Switch, Route } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from '@ant-design/icons';
 
const { Content, Sider } = Layout;
 
const Home = () => <h2>Home Page</h2>;
const User = () => <h2>User Page</h2>;
const Dashboard = () => <h2>Dashboard</h2>;
const Notification = () => <h2>Notification</h2>;
 
const App = () => {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1" icon={<UserOutlined />}>
            <Link to="/home">Home</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<LaptopOutlined />}>
            <Link to="/dashboard">Dashboard</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<NotificationOutlined />}>
            <Link to="/notification">Notification</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: 24 }}>
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/user" component={User} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/notification" component={Notification} />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
};
 
export default App;

在这个例子中，我们定义了一个App组件，它使用了Layout组件来构建页面布局。Sider组件包含了一个Menu，用于导航。Switch组件用于根据Route的path来渲染对应的组件。这里使用了Ant Design的Menu组件的defaultSelectedKeys属性来标记当前选中的菜单项。

请注意，这个例子假设你正在使用React Router来处理路由。如果你没有使用React Router，你需要根据你的路由管理库来相应地修改代码。

- 阅读更多 -