告别命名混乱:Type-Fest 字符串处理类型一键统一命名风格

告别命名混乱:Type-Fest 字符串处理类型一键统一命名风格

【免费下载链接】type-fest A collection of essential TypeScript types 【免费下载链接】type-fest 项目地址: https://gitcode.com/gh_mirrors/ty/type-fest

在日常开发中,你是否经常遇到这样的困扰:API 返回的蛇形命名(snake_case)属性需要转换为 JavaScript 常用的驼峰命名(camelCase)?或者数据库字段命名与前端组件属性命名风格不一致?Type-Fest 提供的 CamelCase、KebabCase 和 SnakeCase 类型工具可以帮你在 TypeScript 类型系统层面解决这些问题,确保代码中命名风格的一致性。

什么是 Type-Fest?

Type-Fest 是一个精选的 TypeScript 类型集合(A collection of essential TypeScript types),由 Sindre Sorhus 发起并维护。该项目旨在提供高质量、可重用的类型工具,帮助开发者编写更简洁、更健壮的 TypeScript 代码。项目源码结构清晰,主要类型定义位于 source/ 目录,对应的测试用例位于 test-d/ 目录。

Type-Fest 项目结构

CamelCase:从各种风格到驼峰命名

CamelCase 类型用于将字符串转换为驼峰命名风格(例如将 "foo-bar" 转换为 "fooBar")。它位于 source/camel-case.d.ts,并提供了一个可选配置项 preserveConsecutiveUppercase 来控制是否保留连续的大写字母。

基本用法

import type { CamelCase } from 'type-fest';

// 简单转换
const camelFromKebab: CamelCase<'foo-bar'> = 'fooBar';
const camelFromSnake: CamelCase<'foo_bar'> = 'fooBar';

// 保留连续大写字母
const preserveCase: CamelCase<'foo-BAR', { preserveConsecutiveUppercase: true }> = 'fooBAR';

高级应用:对象属性重命名

通过结合 TypeScript 的映射类型,可以批量转换对象属性的命名风格:

type CamelCasedProperties<T> = {
  [K in keyof T as CamelCase<K>]: T[K]
};

interface RawOptions {
  'dry-run': boolean;
  'full_family_name': string;
  BAR: string;
}

// 转换后所有属性变为驼峰命名
const normalized: CamelCasedProperties<RawOptions> = {
  dryRun: true,
  fullFamilyName: 'John Doe',
  bar: 'value'
};

对应的测试用例可以在 test-d/camel-case.ts 中找到,包含了各种边界情况的验证。

KebabCase:将命名转换为短横线连接风格

KebabCase 类型用于将字符串转换为短横线连接风格(例如将 "fooBar" 转换为 "foo-bar"),定义在 source/kebab-case.d.ts。它支持一个 splitOnNumbers 选项,用于控制是否在数字处分割单词。

基本用法

import type { KebabCase } from 'type-fest';

// 简单转换
const kebabFromCamel: KebabCase<'fooBar'> = 'foo-bar';
const kebabFromPascal: KebabCase<'FooBar'> = 'foo-bar';

// 数字处理
const withNumbers: KebabCase<'foo2Bar'> = 'foo2-bar';
const splitNumbers: KebabCase<'foo2Bar', { splitOnNumbers: true }> = 'foo-2-bar';

适用场景:CSS 类名和 CLI 选项

短横线命名风格在 CSS 类名和命令行选项中非常常见。使用 KebabCase 可以确保这些命名的一致性:

// CLI 选项命名转换
type KebabCasedCliOptions<T> = {
  [K in keyof T as KebabCase<K>]: T[K]
};

interface CliOptions {
  dryRun: boolean;
  includeFile: string;
}

const cliOptions: KebabCasedCliOptions<CliOptions> = {
  'dry-run': true,
  'include-file': 'data.txt'
};

详细的测试用例见 test-d/kebab-case.ts,涵盖了数字处理、特殊字符等多种场景。

SnakeCase:数据库友好的下划线命名风格

SnakeCase 类型用于将字符串转换为下划线连接风格(例如将 "fooBar" 转换为 "foo_bar"),定义在 source/snake-case.d.ts。与 KebabCase 类似,它也支持 splitOnNumbers 选项。

基本用法

import type { SnakeCase } from 'type-fest';

// 简单转换
const snakeFromCamel: SnakeCase<'fooBar'> = 'foo_bar';
const snakeFromKebab: SnakeCase<'foo-bar'> = 'foo_bar';

// 数字处理
const withNumbers: SnakeCase<'foo2Bar'> = 'foo2_bar';
const splitNumbers: SnakeCase<'foo2Bar', { splitOnNumbers: true }> = 'foo_2_bar';

适用场景:数据库字段映射

下划线命名风格在数据库字段命名中广泛使用。使用 SnakeCase 可以轻松实现 TypeScript 接口与数据库表结构的映射:

// 数据库模型属性转换
type SnakeCasedProperties<T> = {
  [K in keyof T as SnakeCase<K>]: T[K]
};

interface User {
  firstName: string;
  lastName: string;
  createdAt: Date;
}

const dbUser: SnakeCasedProperties<User> = {
  first_name: 'John',
  last_name: 'Doe',
  created_at: new Date()
};

对应的测试用例位于 test-d/snake-case.ts,包含了各种复杂场景的验证。

三种命名风格的对比与选择

命名风格示例适用场景类型定义文件
CamelCasefooBarJavaScript/TypeScript 变量和函数名source/camel-case.d.ts
KebabCasefoo-barCSS 类名、HTML 属性、CLI 选项source/kebab-case.d.ts
SnakeCasefoo_bar数据库字段、配置文件键名source/snake-case.d.ts

选择合适的命名风格可以提高代码的可读性和一致性。Type-Fest 提供的这三个类型工具可以帮助你在 TypeScript 项目中轻松实现不同命名风格之间的转换,而无需编写繁琐的字符串处理代码。

总结

Type-Fest 的 CamelCase、KebabCase 和 SnakeCase 类型为字符串命名风格转换提供了强大的类型支持。通过这些工具,你可以:

  1. 在类型层面确保命名风格的一致性
  2. 轻松实现 API 响应与内部数据结构的转换
  3. 简化数据库模型与前端接口的映射
  4. 减少因命名风格不一致导致的 bugs

要了解更多使用细节,可以查阅项目源码中的类型定义和测试用例:

如果你觉得这些工具有用,不妨给 Type-Fest 项目点个赞,关注后续更新。

【免费下载链接】type-fest A collection of essential TypeScript types 【免费下载链接】type-fest 项目地址: https://gitcode.com/gh_mirrors/ty/type-fest

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值