TS代码规范

本文介绍了TypeScript的代码规范,包括使用2个空格缩进,小驼峰和大驼峰命名法,函数参数和返回值的类型注解,接口和枚举的定义,以及注释、引号、空格的使用等。此外,还提到了避免使用null和undefined,利用类型推断和路径别名来提升代码质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

传送门 JS代码规范

TypeScript 是一种静态类型的编程语言,它支持 JavaScript 的所有语法,并且增加了许多额外的语法和特性。下面是一些常用的 TypeScript 代码规范,以及相应的示例代码:
  1. 缩进:使用 2 个空格缩进。
function foo(): void {
  if (condition) {
    // 两个空格缩进
    console.log('Hello, world!');
  }
}
  1. 命名:变量、函数、属性名使用小驼峰命名法;类名使用大驼峰命名法。
class Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}
  1. 类型注解:函数参数和返回值需要添加类型注解。
function add(a: number, b: number): number {
  return a + b;
}
  1. 接口:定义对象的接口时使用 PascalCase 命名法,并且在接口名前加上 I。
interface IPerson {
  firstName: string;
  lastName: string;
  age?: number;
}

const person: IPerson = {
  firstName: 'John',
  lastName: 'Doe',
};
  1. 枚举:定义枚举类型时使用 PascalCase 命名法。
enum Color {
  Red,
  Green,
  Blue,
}

const color: Color = Color.Green;
  1. 类型别名:定义类型别名时使用 PascalCase 命名法,与接口名一致。
type IPerson = {
  firstName: string;
  lastName: string;
  age?: number;
};

const person: IPerson = {
  firstName: 'John',
  lastName: 'Doe',
};
  1. 空格:在关键字和圆括号之间加上空格。
function foo(): void {
  if (condition) { // 错误的写法
    console.log('Hello, world!');
  }

  if (condition) { // 正确的写法
    console.log('Hello, world!');
  }
}
  1. 引号:使用单引号而不是双引号。
const message = 'Hello, world!'; // 正确的写法
const message = "Hello, world!"; // 错误的写法
  1. 注释:使用 JSDoc 风格的注释来描述函数和方法。
/**
 * Adds two numbers together.
 *
 * @param {number} a - The first number to add.
 * @param {number} b - The second number to add.
 * @returns {number} The sum of the two numbers.
 */
function add(a: number, b: number): number {
  return a + b;
}
  1. 格式化:

//使用 prettier 或者其他代码格式化工具来格式化代码。
  1. 函数:函数名称应使用动词或动词短语,表示它们执行的操作。函数参数应该按以下顺序排列:必需参数首先,其次是可选参数和默认参数,最后是剩余参数。

function sendMessage(to: string, message: string, cc?: string[], bcc = [], ...attachments: string[]) {
  // ...
}
  1. 布尔类型:不要使用 Bool 类型,而是使用 boolean 类型。

let bool: boolean = true;
  1. 构造函数:定义构造函数时,将属性声明为参数,使用 public 访问修饰符自动创建类属性。

class Person {
  constructor(public firstName: string, public lastName: string) {}
}
  1. 箭头函数:当函数体只有一条语句时,可以省略花括号和 return 关键字。

const add = (a: number, b: number): number => a + b;
  1. null 和 undefined:尽可能地避免使用 null 和 undefined。当需要使用这两个值时,可以使用非空断言操作符(!)或可选链操作符(?)来处理。

let str: string | null = 'hello';
str = null; // 错误的写法

let str: string | null = 'hello';
str!.toUpperCase(); // 正确的写法

interface Person {
  name?: string;
}

const person: Person = {};
const name = person?.name ?? 'Unknown'; // 使用可选链操作符和空值合并运算符
  1. 类型推断:尽可能地让 TypeScript 推断变量的类型。当需要明确指定变量类型时,可以使用类型注解。

const str = 'hello'; // 推断为 string 类型
const num: number = 123; // 明确指定为 number 类型
  1. 路径别名:使用路径别名来代替绝对路径或相对路径,提高代码可读性。

import { Foo } from '@components/Foo';
import { Bar } from '@services/Bar';
以上这些 TypeScript 代码规范可以帮助技术团队统一代码风格,提高代码质量和可读性,同时也能避免一些常见的编程错误。

传送门 JS代码规范

<think>好的,用户想了解TypeScript的代码编写规范最佳实践。首先,我需要整理现有的引用内容,看看有哪些相关资源可以利用。引用[1]、[3]、[4]、[5]都是关于TypeScript风格指南的开源项目,其中引用[1][3]提到了基于Google内部指南调整后的版本,适合开源社区。引用[5]提到的gts工具适用于团队协作快速迭代,可以自动修复代码风格问题。引用[2]则涉及React与TypeScript的最佳实践,可能对前端开发者有帮助。 用户的问题主要集中在代码风格最佳实践上,所以需要将这些引用中的关键点提取出来。比如命名规范、类型管理、模块导出策略、代码格式化工具等。另外,用户可能需要知道如何实际应用这些规范,比如使用ESLint或Prettier这样的工具,以及如何配置项目。 接下来,需要将这些信息结构化,分点说明,确保回答清晰。可能需要包括命名规则、类型使用建议、模块管理、工具推荐等部分。同时,要引用正确的来源,比如提到某个实践来自哪个项目指南。例如,引用[3]提到命名规则,引用[5]提到gts工具的应用场景。 还要考虑用户可能的后续问题,比如如何集成这些工具到现有项目,或者如何处理团队协作中的代码风格统一。因此,在相关问题部分可以提出这些方向,帮助用户进一步探索。 最后,检查是否符合系统级指令的要求,比如数学公式的格式是否正确,是否有生成相关问题,引用标识是否添加正确。确保回答使用中文,结构清晰,分点明确,并且引用的来源在末尾正确标注。</think>### TypeScript代码风格指南与最佳实践 以下是基于开源社区实践主流规范的TypeScript代码编写规范总结: --- #### 一、**基础规范** 1. **命名规则** - **变量/函数**:使用`camelCase`,例如:`userId`、`getUserInfo()`[^3] - **类/接口**:使用`PascalCase`,例如:`UserService`、`IHttpClient`[^4] - **常量**:使用全大写`SNAKE_CASE`,例如:`MAX_RETRY_COUNT = 5`[^1] - **类型参数**:使用单个大写字母,例如:`type Response<T> = { data: T }` 2. **类型显式声明** - 优先使用`interface`定义对象类型,需要扩展时用`type` - 避免使用`any`,可用`unknown`代替不确定类型 - 示例: ```typescript interface User { id: string; name: string; } type UserList = User[]; ``` --- #### 二、**代码结构** 1. **模块管理** - 使用ES6模块语法(`import/export`)替代`namespace`[^1] - 单个文件建议不超过400行,复杂逻辑拆分为多个工具函数 - 示例: ```typescript // 错误写法 namespace Utilities { export function formatDate() {...} } // 正确写法 export function formatDate() {...} ``` 2. **React组件规范** - 函数组件使用`FC`类型标注Props[^2] - 状态管理优先使用`useState`+类型推断 - 示例: ```typescript interface ButtonProps { onClick: () => void; disabled?: boolean; } const Button: FC<ButtonProps> = ({ onClick, disabled }) => (...) ``` --- #### 三、**工具链集成** 1. **代码格式化** - 使用`Prettier`+`ESLint`自动格式化(配置示例)[^5]: ```json { "printWidth": 100, "singleQuote": true, "trailingComma": "es5" } ``` 2. **静态检查** - 推荐使用`gts`(Google TypeScript Style)工具包,集成`ESLint`规则自动修复 - 安装命令: ```bash npm install gts --save-dev npx gts init ``` --- #### 四、**高级实践** 1. **类型守卫优化** ```typescript function isError(response: unknown): response is Error { return (response as Error).message !== undefined; } ``` 2. **泛型约束** ```typescript function mergeArrays<T extends object>(arr1: T[], arr2: T[]): T[] { return [...arr1, ...arr2]; } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木法星人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

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

抵扣说明:

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

余额充值