Woodman's Second Brain | 第二大脑

1.01 使用接口与类型别名的函数之间的区别是什么？有复杂的高级函数案例介绍么？

22分钟阅读

1.1 ChatGPT 给出的答案

在 TypeScript 中，接口（interface）和类型别名（type alias）都可以用于定义函数类型。它们在大多数情况下是可以互换的，但在一些细节上存在差异。我们将讨论这些差异，并提供一个复杂的高级函数案例。

接口与类型别名定义函数类型的区别

使用接口定义函数类型

接口用于定义对象的形状，其中也包括函数类型。接口可以被继承，并且可以通过声明合并扩展已有的接口。

interface SearchFunc {
    (source: string, subString: string): boolean;
}
 
let mySearch: SearchFunc;
mySearch = function(src, sub) {
    return src.search(sub) !== -1;
};

使用类型别名定义函数类型

类型别名可以用于定义任何类型，包括基本类型、联合类型、元组类型以及函数类型。类型别名不能被继承，但可以通过交叉类型扩展。

type SearchFunc = (source: string, subString: string) => boolean;
 
let mySearch: SearchFunc;
mySearch = function(src, sub) {
    return src.search(sub) !== -1;
};

主要区别

  1. 声明合并：接口可以进行声明合并，而类型别名不可以。

    interface A {
    x: number;
}
 
interface A {
    y: number;
}
 
const obj: A = { x: 1, y: 2 }; // 正常

    类型别名则不支持这种合并：

    type B = { x: number };
// type B = { y: number }; // Error: Duplicate identifier 'B'.

  2. 表达能力：类型别名可以使用联合类型、交叉类型等复杂的类型表达方式，而接口主要用于描述对象的形状。

    type UnionType = string | number;
type IntersectionType = { x: number } & { y: number };
 
interface C extends UnionType {} // Error: An interface can only extend an object type or intersection of object types with statically known members.

高级函数案例

下面是一个结合了泛型、接口和类型别名的高级函数案例，展示了如何定义和使用复杂的高阶函数。

高阶函数与泛型

定义一个用于组合多个函数的高阶函数 compose，该函数接收任意数量的单参数函数，并返回一个组合后的新函数。

// 定义一个单参数函数的接口
interface UnaryFunction<T, R> {
    (arg: T): R;
}
 
// 使用类型别名定义函数组合的类型
type Compose = {
    <T, R>(f1: UnaryFunction<T, R>): UnaryFunction<T, R>;
    <T, U, R>(f1: UnaryFunction<U, R>, f2: UnaryFunction<T, U>): UnaryFunction<T, R>;
    <T, U, V, R>(f1: UnaryFunction<V, R>, f2: UnaryFunction<U, V>, f3: UnaryFunction<T, U>): UnaryFunction<T, R>;
    // 继续添加更多重载签名以支持更多参数...
};
 
const compose: Compose = (...funcs: UnaryFunction<any, any>[]) => {
    return (arg: any) => funcs.reduceRight((acc, fn) => fn(acc), arg);
};
 
// 示例函数
const double = (x: number): number => x * 2;
const increment = (x: number): number => x + 1;
const toString = (x: number): string => x.toString();
 
// 组合函数
const composedFunction = compose(toString, double, increment);
 
const result = composedFunction(3); // "8"
console.log(result); // Output: "8"

解释

  1. 接口 UnaryFunction：定义了一个单参数函数的接口，泛型参数 T 表示参数类型，R 表示返回值类型。
  2. 类型别名 Compose：定义了一个 Compose 类型，包含了多个重载签名，以支持不同数量的函数组合。
  3. compose 实现：使用 reduceRight 方法，从右向左依次调用函数，将每个函数的输出作为下一个函数的输入。
  4. 示例函数：定义了三个简单的函数：double、increment 和 toString。
  5. 组合函数 composedFunction：将三个函数组合成一个新函数，并对输入值 3 进行处理，最终得到字符串 "8"。

这个案例展示了如何使用泛型和高阶函数来创建灵活的函数组合工具，以及接口和类型别名在其中的应用。

1.2 Perplexity. Ai

以下是关于 TypeScript 中使用类型别名和接口的高级函数示例及解析：

类型别名与接口的比较

在 TypeScript 中，类型别名和接口都可以用来定义复杂类型，但它们有一些细微的差别[1]：

  1. 接口创建新名称，可在其他地方使用，而类型别名不创建新名称。
  2. 接口可以被继承和实现，而类型别名在旧版 TypeScript 中不能（从 TypeScript 2.7 开始，类型别名可以通过交叉类型实现类似继承的效果）。

高级函数示例

让我们通过一个高级函数示例来展示类型别名和接口的使用：

// 使用接口定义对象结构
interface Vehicle {
  manufacturer: string;
  model: string;
  year: number;
}
 
// 使用类型别名定义联合类型
type VehicleProperty = keyof Vehicle;
 
// 高级函数：从对象中提取指定属性
function pluck<T, K extends keyof T>(obj: T, propertyNames: K[]): T[K][] {
  return propertyNames.map(name => obj[name]);
}
 
// 使用示例
const car: Vehicle = {
  manufacturer: '丰田',
  model: '凯美瑞',
  year: 2024
};
 
const result = pluck(car, ['manufacturer', 'model']);
console.log(result); // ['丰田', '凯美瑞']

解析

  1. 我们使用接口 Vehicle 定义了车辆对象的结构[1]。

  2. 使用类型别名 VehicleProperty 定义了 Vehicle 接口的所有属性名称的联合类型[1]。

  3. pluck 函数是一个泛型函数，它接受两个类型参数：

    • T：表示对象的类型
    • K extends keyof T：表示 T 类型的属性名称联合类型

  4. 函数参数：

    • obj: T：要提取属性的对象
    • propertyNames: K[]：要提取的属性名称数组

  5. 函数返回类型 T[K][] 表示提取的属性值数组[1]。

  6. 函数实现使用 map 方法遍历属性名称数组，并从对象中提取相应的值。

  7. 在使用示例中，我们创建了一个 Vehicle 类型的对象，并使用 pluck 函数提取了 manufacturer 和 model 属性。

这个例子展示了如何在 TypeScript 中结合使用接口、类型别名和泛型来创建灵活且类型安全的高级函数。通过使用 keyof 操作符和索引类型，我们能够在编译时捕获潜在的类型错误，提高代码的可靠性[1]。

Citations: [1] https://bosens-china.github.io/Typescript-manual/download/zh/reference/advanced-types.html [2] https://brinkqiang.github.io

定义一个10个元素的数组，并对其进行遍历

当然，我可以为您展示如何定义一个包含 10 个 Vehicle 类型元素的数组，并对其进行遍历。以下是一个详细的示例：

// 首先，让我们再次定义Vehicle接口
interface Vehicle {
  manufacturer: string;
  model: string;
  year: number;
}
 
// 创建一个包含10个Vehicle对象的数组
const vehicles: Vehicle[] = [
  { manufacturer: '丰田', model: '凯美瑞', year: 2024 },
  { manufacturer: '本田', model: '雅阁', year: 2023 },
  { manufacturer: '大众', model: '帕萨特', year: 2024 },
  { manufacturer: '特斯拉', model: 'Model 3', year: 2025 },
  { manufacturer: '比亚迪', model: '汉', year: 2023 },
  { manufacturer: '奔驰', model: 'C级', year: 2024 },
  { manufacturer: '宝马', model: '3系', year: 2023 },
  { manufacturer: '奥迪', model: 'A4', year: 2024 },
  { manufacturer: '日产', model: '天籁', year: 2023 },
  { manufacturer: '福特', model: '蒙迪欧', year: 2024 }
];
 
// 现在，让我们使用不同的方法遍历这个数组
 
console.log('1. 使用for循环遍历：');
for (let i = 0; i < vehicles.length; i++) {
  console.log(`${i + 1}. ${vehicles[i].manufacturer} ${vehicles[i].model} (${vehicles[i].year})`);
}
 
console.log('\n2. 使用for...of循环遍历：');
for (const vehicle of vehicles) {
  console.log(`${vehicle.manufacturer} ${vehicle.model} (${vehicle.year})`);
}
 
console.log('\n3. 使用forEach方法遍历：');
vehicles.forEach((vehicle, index) => {
  console.log(`${index + 1}. ${vehicle.manufacturer} ${vehicle.model} (${vehicle.year})`);
});
 
console.log('\n4. 使用map方法创建新数组：');
const vehicleDescriptions = vehicles.map(vehicle => 
  `${vehicle.manufacturer} ${vehicle.model} (${vehicle.year})`
);
console.log(vehicleDescriptions);
 
console.log('\n5. 使用filter方法筛选：');
const newer2024Vehicles = vehicles.filter(vehicle => vehicle.year >= 2024);
console.log(newer2024Vehicles);
 
console.log('\n6. 使用reduce方法计算平均年份：');
const averageYear = vehicles.reduce((sum, vehicle) => sum + vehicle.year, 0) / vehicles.length;
console.log(`平均年份：${averageYear.toFixed(2)}`);

这个示例展示了多种遍历和操作 Vehicle 数组的方法：

  1. 使用传统的 for 循环
  2. 使用 for...of 循环
  3. 使用 forEach 方法
  4. 使用 map 方法创建新数组
  5. 使用 filter 方法筛选数组
  6. 使用 reduce 方法进行计算

每种方法都有其特定的用途和优势。例如：

  • for 循环适合需要精确控制迭代过程的情况
  • for...of 循环提供了简洁的语法来遍历数组元素
  • forEach 方法适合对每个元素执行操作但不需要返回新数组
  • map 方法适合创建基于原数组的新数组
  • filter 方法适合根据条件筛选元素
  • reduce 方法适合将数组归约为单个值

通过这些不同的方法，您可以根据具体需求选择最合适的遍历和处理数组的方式。这些方法都是类型安全的，TypeScript 会确保您正确地访问和使用 Vehicle 对象的属性。

更复杂的箭头函数实例

好的, 我来为您提供几个更复杂的 TypeScript 箭头函数示例:

1. 高阶函数

const applyOperation = (x: number, y: number, operation: (a: number, b: number) => number): number => {
  return operation(x, y);
};
 
const add = (a: number, b: number): number => a + b;
const multiply = (a: number, b: number): number => a * b;
 
console.log(applyOperation(5, 3, add)); // 输出: 8
console.log(applyOperation(5, 3, multiply)); // 输出: 15

这个例子展示了一个接受两个数字和一个操作函数作为参数的高阶函数。

2. 柯里化函数

const curry = (fn: Function) => {
  return function curried(...args: any[]) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return (...args2: any[]) => curried.apply(this, args.concat(args2));
    }
  };
};
 
const sum = (a: number, b: number, c: number): number => a + b + c;
const curriedSum = curry(sum);
 
console.log(curriedSum(1)(2)(3)); // 输出: 6
console.log(curriedSum(1, 2)(3)); // 输出: 6
console.log(curriedSum(1, 2, 3)); // 输出: 6

这个例子实现了一个柯里化函数, 可以将多参数函数转换为一系列单参数函数。

3. 异步箭头函数

interface User {
  id: number;
  name: string;
}
 
const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json() as User;
};
 
const printUserName = async (id: number): Promise<void> => {
  try {
    const user = await fetchUser(id);
    console.log(`用户名: ${user.name}`);
  } catch (error) {
    console.error(`获取用户信息失败: ${error}`);
  }
};
 
printUserName(1);

这个例子展示了如何使用异步箭头函数处理 API 请求。

4. 泛型箭头函数

const identity = <T>(arg: T): T => arg;
 
console.log(identity<string>("Hello")); // 输出: Hello
console.log(identity<number>(42)); // 输出: 42
 
const map = <T, U>(array: T[], fn: (item: T) => U): U[] => {
  return array.map(fn);
};
 
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = map(numbers, (n) => n * n);
console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

这个例子展示了如何创建泛型箭头函数, 使函数可以处理多种类型。

5. 箭头函数与 this 绑定

class Counter {
  private count: number = 0;
 
  increment = (): void => {
    this.count++;
  }
 
  decrement = (): void => {
    this.count--;
  }
 
  getCount = (): number => {
    return this.count;
  }
 
  delayedIncrement = (delay: number): void => {
    setTimeout(() => {
      this.increment();
      console.log(`计数延迟${delay}ms后增加到: ${this.getCount()}`);
    }, delay);
  }
}
 
const counter = new Counter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 输出: 2
counter.delayedIncrement(1000); // 1秒后输出: 计数延迟1000ms后增加到: 3

这个例子展示了箭头函数如何保持 this 的绑定, 即使在异步操作中也能正确引用类的实例。

这些复杂的箭头函数示例展示了TypeScript中箭头函数的多种用法,包括高阶函数、柯里化、异步操作、泛型和this绑定等高级特性。这些特性使得箭头函数成为TypeScript中非常强大和灵活的工具。

Citations: [1] https://www.javatpoint.com/typescript-arrow-function [2] https://www.scaler.com/topics/typescript/typescript-arrow-function/ [3] https://www.geeksforgeeks.org/explain-the-arrow-function-syntax-in-typescript/ [4] https://www.tutorialspoint.com/explain-the-arrow-function-syntax-in-typescript [5] https://www.tutorialsteacher.com/typescript/arrow-function

1.3 与 HTMX 相结合的复杂高级函数实例

结合 HTMX 和 TypeScript 的高级函数实例可以展示出强大的前端交互能力。以下是一些复杂的示例:

// 定义HTMX响应的接口
interface HtmxResponse {
  html: string;
  triggerEvents: string[];
  headers: Record<string, string>;
}
 
// 创建一个通用的HTMX请求函数
const htmxRequest = async <T>(
  url: string, 
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET',
  body?: BodyInit
): Promise<T> => {
  const response = await fetch(url, {
    method,
    headers: {
      'HX-Request': 'true',
      'Content-Type': 'application/json'
    },
    body
  });
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  
  return await response.json() as T;
};
 
// 创建一个处理HTMX响应的高阶函数
const handleHtmxResponse = (
  targetSelector: string,
  onSuccess?: (response: HtmxResponse) => void,
  onError?: (error: Error) => void
) => {
  return async (url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', body?: BodyInit) => {
    try {
      const response = await htmxRequest<HtmxResponse>(url, method, body);
      const target = document.querySelector(targetSelector);
      
      if (target) {
        target.innerHTML = response.html;
      }
      
      response.triggerEvents.forEach(event => {
        document.body.dispatchEvent(new Event(event));
      });
      
      if (onSuccess) {
        onSuccess(response);
      }
    } catch (error) {
      if (onError && error instanceof Error) {
        onError(error);
      }
    }
  };
};
 
// 使用示例
const updateUserProfile = handleHtmxResponse(
  '#user-profile',
  (response) => {
    console.log('Profile updated successfully');
    // 可以在这里添加额外的成功处理逻辑
  },
  (error) => {
    console.error('Failed to update profile:', error.message);
    // 可以在这里添加错误处理逻辑
  }
);
 
// 定义一个防抖函数
const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: ReturnType<typeof setTimeout> | null = null;
  
  return (...args: Parameters<T>) => {
    if (timeout) {
      clearTimeout(timeout);
    }
    
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
};
 
// 创建一个带有防抖的HTMX搜索函数
const debouncedSearch = debounce((query: string) => {
  updateUserProfile('/api/search', 'POST', JSON.stringify({ query }));
}, 300);
 
// 在页面加载时设置事件监听器
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.querySelector<HTMLInputElement>('#search-input');
  
  if (searchInput) {
    searchInput.addEventListener('input', (event) => {
      const query = (event.target as HTMLInputElement).value;
      debouncedSearch(query);
    });
  }
  
  // 设置表单提交事件
  const profileForm = document.querySelector<HTMLFormElement>('#profile-form');
  
  if (profileForm) {
    profileForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const formData = new FormData(profileForm);
      updateUserProfile('/api/update-profile', 'POST', formData);
    });
  }
});

这个复杂的示例展示了以下几个高级概念:

  1. 使用泛型创建通用的 HTMX 请求函数。

  2. 创建一个高阶函数来处理 HTMX 响应, 包括更新 DOM、触发事件和错误处理。

  3. 实现了一个防抖函数, 可以用于优化频繁的 HTMX 请求。

  4. 将 HTMX 功能与 TypeScript 的类型系统结合, 提供了类型安全的 API 调用。

  5. 使用事件委托来处理动态加载的内容。

  6. 演示了如何处理表单提交和实时搜索等常见 HTMX 使用场景。

这个示例展示了如何将 TypeScript 的高级类型系统与 HTMX 的动态 HTML 更新功能结合起来, 创建出类型安全、高性能且易于维护的交互式 web 应用。通过这种方式, 我们可以充分利用两种技术的优势, 在保持代码质量的同时提供流畅的用户体验。

Citations: [1] https://juejin.cn/post/6926794697553739784 [2] https://blog.csdn.net/weixin_50636581/article/details/124007439 [3] https://www.51cto.com/article/750369.html [4] https://www.cnblogs.com/xiaonian8/p/14096702.html [5] https://bosens-china.github.io/Typescript-manual/download/zh/reference/advanced-types.html

1.3 HTMX 和 TypeScript 高级用法结合实例

结合 HTMX 和 TypeScript 的高级用法, 我们可以创建一个更加强大和类型安全的前端应用程序。以下是一个综合示例, 展示了如何将两者结合使用:

// 定义API响应的接口
interface ApiResponse<T> {
  data: T;
  message: string;
  status: number;
}
 
// 用户数据接口
interface User {
  id: number;
  name: string;
  email: string;
}
 
// 创建一个通用的HTMX请求函数
const htmxRequest = async <T>(
  url: string, 
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET',
  body?: BodyInit
): Promise<ApiResponse<T>> => {
  const response = await fetch(url, {
    method,
    headers: {
      'HX-Request': 'true',
      'Content-Type': 'application/json'
    },
    body
  });
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  
  return await response.json() as ApiResponse<T>;
};
 
// 创建一个处理HTMX响应的高阶函数
const handleHtmxResponse = <T>(
  targetSelector: string,
  onSuccess?: (data: T) => void,
  onError?: (error: Error) => void
) => {
  return async (url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', body?: BodyInit) => {
    try {
      const response = await htmxRequest<T>(url, method, body);
      const target = document.querySelector<HTMLElement>(targetSelector);
      
      if (target) {
        target.innerHTML = response.data as unknown as string;
      }
      
      if (onSuccess) {
        onSuccess(response.data);
      }
    } catch (error) {
      if (onError && error instanceof Error) {
        onError(error);
      }
    }
  };
};
 
// 使用示例: 更新用户资料
const updateUserProfile = handleHtmxResponse<User>(
  '#user-profile',
  (user) => {
    console.log('Profile updated successfully:', user);
    // 可以在这里添加额外的成功处理逻辑
  },
  (error) => {
    console.error('Failed to update profile:', error.message);
    // 可以在这里添加错误处理逻辑
  }
);
 
// 定义一个防抖函数
const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: ReturnType<typeof setTimeout> | null = null;
  
  return (...args: Parameters<T>) => {
    if (timeout) {
      clearTimeout(timeout);
    }
    
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
};
 
// 创建一个带有防抖的HTMX搜索函数
const debouncedSearch = debounce((query: string) => {
  updateUserProfile('/api/search', 'POST', JSON.stringify({ query }));
}, 300);
 
// 在页面加载时设置事件监听器
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.querySelector<HTMLInputElement>('#search-input');
  
  if (searchInput) {
    searchInput.addEventListener('input', (event) => {
      const query = (event.target as HTMLInputElement).value;
      debouncedSearch(query);
    });
  }
  
  // 设置表单提交事件
  const profileForm = document.querySelector<HTMLFormElement>('#profile-form');
  
  if (profileForm) {
    profileForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const formData = new FormData(profileForm);
      updateUserProfile('/api/update-profile', 'POST', formData);
    });
  }
});

这个示例展示了以下几个高级概念:

  1. 使用泛型创建通用的 HTMX 请求函数, 提供类型安全的 API 调用[1][2]。

  2. 创建一个高阶函数来处理 HTMX 响应, 包括更新 DOM、错误处理和类型检查[2]。

  3. 实现了一个防抖函数, 可以用于优化频繁的 HTMX 请求[4]。

  4. 使用 TypeScript 的接口定义 API 响应和用户数据结构, 增强代码的可读性和可维护性[3]。

  5. 利用 TypeScript 的类型推断和类型断言来处理 DOM 元素[5]。

  6. 演示了如何处理表单提交和实时搜索等常见 HTMX 使用场景。

这个综合示例展示了如何将 TypeScript 的高级类型系统与 HTMX 的动态 HTML 更新功能结合起来, 创建出类型安全、高性能且易于维护的交互式 web 应用。通过这种方式, 我们可以充分利用两种技术的优势, 在保持代码质量的同时提供流畅的用户体验[2][3]。

Citations: [1] https://blog.csdn.net/weixin_50636581/article/details/124007439 [2] https://juejin.cn/post/6926794697553739784 [3] https://www.51cto.com/article/637700.html [4] https://www.cnblogs.com/xiaonian8/p/14096702.html [5] https://www.51cto.com/article/750369.html

关系图谱

反向链接