首页 > 格式化 > TypeScript 代码格式化工具

推荐工具

URL 解析格式化工具JSON转YAMLJSON 与 TOON 互转从 JSON 生成 TypeScript 类型和 JSON SchemaINI 转 JSON 工具SQL 格式化数字转中文Netscape Cookies 格式转换YAML (YML) 格式化工具XML 格式化工具

TypeScript 代码格式化工具

TypeScript 和 TSX 代码格式化美化工具，支持语法高亮、错误检测和自定义格式化选项

格式化选项

工具简介：TypeScript 代码格式化工具

TypeScript 代码格式化工具是一个基于 Prettier 的专业在线代码美化器，专门用于格式化和美化 TypeScript 和 TSX 代码。使用业界标准的 Prettier 格式化引擎，确保代码格式化的专业性和一致性。支持语法高亮、错误检测和丰富的自定义格式化选项，帮助开发者提高代码质量和可读性。

什么是TypeScript 代码格式化工具？

TypeScript 代码格式化用于整理TypeScript 代码内容的缩进与排版，统一风格并提升可读性。

如何使用

  1. 粘贴TypeScript 代码内容到输入区。
  2. 选择缩进与排版风格。
  3. 点击格式化并复制结果。

常见应用场景

  • 提交前统一代码或数据风格
  • 排查语法错误与结构问题
  • 在文档或演示中展示内容

❓ 常见问题 FAQ

Q1：格式化失败或报错？
A：请确认TypeScript 代码语法正确，必要时先校验。

Q2：可以压缩成一行吗？
A：部分工具支持压缩模式，可在选项中切换。

Q3：如何保留注释？
A：选择保留注释的格式化模式或避免压缩。

✨ 主要特性

  • 🎨 Prettier 驱动: 使用业界标准的 Prettier 格式化引擎，确保专业级代码格式化
  • 🔍 语法验证: 实时检测语法错误并提供详细的错误信息
  • ⚙️ 自定义选项: 提供丰富的 Prettier 兼容格式化配置选项
  • 📝 语法高亮: 清晰的代码语法高亮显示
  • 📋 示例代码: 内置 TypeScript 和 TSX 示例代码
  • 💾 导出功能: 支持复制和下载格式化后的代码
  • 🌐 多语言支持: 支持中文、英文等多种语言界面
  • 📱 响应式设计: 完美适配桌面和移动设备
  • ⚡ 高性能: 基于成熟的 Prettier 库，格式化速度快且稳定

📖 使用说明

基本使用

  1. 输入代码: 在输入框中粘贴或输入您的 TypeScript/TSX 代码
  2. 配置选项: 根据需要调整格式化选项
  3. 格式化代码: 点击"格式化代码"按钮进行代码美化
  4. 验证语法: 点击"验证语法"按钮检查代码语法
  5. 复制结果: 使用复制按钮获取格式化后的代码

格式化选项

基础选项

  • 行宽 (Print Width): 设置每行的最大字符数 (40-200)
  • 制表符宽度 (Tab Width): 设置制表符的宽度 (1-8)
  • 使用制表符: 选择使用制表符还是空格进行缩进

语法选项

  • 分号: 选择是否在语句末尾添加分号
  • 引号类型: 选择使用单引号还是双引号
  • JSX 引号: 设置 JSX 属性中的引号类型
  • 尾随逗号: 设置对象和数组末尾是否添加逗号

格式选项

  • 括号间距: 设置对象字面量括号内是否添加空格
  • JSX 括号同行: 设置 JSX 元素的结束括号是否与最后一行内容同行
  • 箭头函数括号: 设置单参数箭头函数是否添加括号

🔧 格式化配置详解

缩进设置

// 使用 2 个空格缩进
interface User {
  id: number;
  name: string;
}

// 使用制表符缩进
interface User {
	id: number;
	name: string;
}

分号设置

// 总是添加分号
const user = { name: 'John' };
const getName = () => user.name;

// 从不添加分号
const user = { name: 'John' }
const getName = () => user.name

引号设置

// 使用单引号
const message = 'Hello, World!';
import { Component } from 'react';

// 使用双引号
const message = "Hello, World!";
import { Component } from "react";

尾随逗号

// ES5 模式 (对象和数组)
const obj = {
  name: 'John',
  age: 30,
};

// 全部模式 (包括函数参数)
function greet(
  name: string,
  age: number,
) {
  return `Hello, ${name}!`;
}

📋 TypeScript 示例

基础类型和接口

// 基础类型
let name: string = 'John';
let age: number = 30;
let isActive: boolean = true;

// 接口定义
interface User {
  id: number;
  name: string;
  email?: string;
  roles: string[];
}

// 类型别名
type Status = 'pending' | 'approved' | 'rejected';

// 泛型接口
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

类和继承

// 抽象类
abstract class Animal {
  protected name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  abstract makeSound(): void;
  
  move(): void {
    console.log(`${this.name} is moving`);
  }
}

// 类继承
class Dog extends Animal {
  private breed: string;
  
  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }
  
  makeSound(): void {
    console.log('Woof!');
  }
  
  getBreed(): string {
    return this.breed;
  }
}

泛型和工具类型

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 泛型约束
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// 工具类型
interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

type PublicUser = Omit<User, 'password'>;
type UserUpdate = Partial<Pick<User, 'name' | 'email'>>;

🚀 TSX 示例

React 组件

import React, { useState, useEffect } from 'react';

// 组件属性接口
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
  children: React.ReactNode;
}

// 函数组件
const Button: React.FC<ButtonProps> = ({
  variant,
  size = 'medium',
  disabled = false,
  onClick,
  children
}) => {
  const className = `btn btn-${variant} btn-${size}`;
  
  return (
    <button
      className={className}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

Hooks 使用

import React, { useState, useEffect, useCallback } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const fetchUsers = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/users');
      
      if (!response.ok) {
        throw new Error('Failed to fetch users');
      }
      
      const userData: User[] = await response.json();
      setUsers(userData);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="user-list">
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

💡 最佳实践

1. 代码组织

  • 使用一致的缩进和格式化规则
  • 合理使用类型注解，提高代码可读性
  • 遵循命名约定，使用有意义的变量和函数名

2. 类型安全

  • 尽量避免使用 any 类型
  • 使用严格的 TypeScript 配置
  • 利用工具类型提高类型安全性

3. 性能优化

  • 合理使用泛型，避免类型冗余
  • 使用 const 断言优化类型推断
  • 避免过度复杂的类型定义

4. 团队协作

  • 建立统一的代码格式化规范
  • 使用 ESLint 和 Prettier 自动化代码检查
  • 定期进行代码审查和重构

🔍 常见问题

1. 格式化失败

问题: 代码格式化时出现错误
解决: 检查代码语法是否正确，修复语法错误后重新格式化

2. 类型错误

问题: TypeScript 类型检查失败
解决: 仔细检查类型注解，确保类型匹配

3. JSX 语法问题

问题: TSX 代码中的 JSX 语法错误
解决: 确保 JSX 元素正确闭合，属性名称正确

📚 相关资源

提示: 本工具提供基础的代码格式化功能，对于复杂的项目建议使用专业的 IDE 和配置文件进行代码格式化。