利用Sublime正则表达式批量格式化TypeScript类型定义

轻晨姑娘_2139

轻晨姑娘_2139

2026-08-28

304人浏览

原创

推荐用正则^s*types+([a-za-z0-9_]+)s*=s*(.+?);匹配typescript类型别名等号两侧空格,捕获类型名和右侧表达式,替换为type $1 = $2;,支持泛型且非贪婪匹配至分号。

利用sublime正则表达式批量格式化typescript类型定义

匹配 TypeScript 类型别名中的等号两边空格

Sublime 的正则替换常被用来清理 type 声明里的冗余空格,比如把 type Foo = string; 里 = 前后不一致的空格统一成「= 前 1 空格、后 1 空格」。直接搜 = 容易误伤字符串或注释里的等号,得限定在类型声明行内。

推荐用这个正则模式做查找:

^\s*type\s+([a-zA-Z0-9_]+)\s*=\s*(.+?);
它能捕获类型名和右侧类型表达式,同时忽略行首缩进和中间任意空格。替换为:
type $1 = $2;
注意:如果类型右侧含泛型(如 Array<string></string>)或嵌套括号,这个简单模式仍安全——因为 .+? 是非贪婪匹配,且分号是明确终止符。
  • 别用 .* 替代 .+?,否则可能跨行吞掉后续语句
  • 确保 Sublime 的「Match case」关闭、「Regex」开启、「Whole line」不用勾选
  • 若文件含 declare type,需把查找正则开头改成 ^\s*(?:declare\s+)?type

把 interface 属性冒号对齐变成单空格格式

团队代码规范常要求接口属性写成 name: string; 而非 name : string; 或 name: string;。但直接搜 : 会匹配函数参数、对象字面量甚至三元运算符,必须加上下文约束。

用这个查找正则:

^\s*(?:(?:export\s+)?interface\s+[a-zA-Z0-9_]+|\})\s*$\n(?:[^{\n]*?\n)*?^\s*([a-zA-Z0-9_]+)\s*:([^;{\n]+);
太重了,实际没必要。更稳的做法是分两步:先人工定位到 interface 块内部(用 Ctrl+Shift+P → Go to Symbol),再执行局部替换:

查找:

^\s*([a-zA-Z0-9_]+)\s*:\s*([^;{\n]+);

替换:
$1: $2;
  • 务必开启「In selection」,只对选中的 interface body 生效
  • 如果属性含可选修饰符(name?: string),查找正则要改成
    ^\s*([a-zA-Z0-9_]+\??)\s*:\s*([^;{\n]+);
  • 冒号后多个空格会被压缩成一个,但冒号前零个空格(name:string)不会自动补空格——这是设计使然,避免误改合法紧凑写法

批量删除类型定义末尾的分号,但保留函数类型中的分号

TypeScript 允许类型别名和接口末尾省略分号,但函数类型签名(如 type Fn = (x: number) => void;)里的分号属于语句结束,不能动。直接搜 ; + 行尾 $ 会误删所有分号。

TypeScript
TypeScript

{"answer":"编写类型安全的 TypeScript,合理运用类型收窄、推断模式与严格模式最佳实践。"}

下载

安全做法是只处理「以 type 或 interface 开头、且本行不含 => 或 ( 的行」:

查找:

^(\s*(?:type|interface)\s+[a-zA-Z0-9_]+(?:\s+extends\s+[a-zA-Z0-9_\s,]+)?)\s*;\s*$

替换:
$1
  • 这个正则会放过 type A = (x: number) => void;,因为含 =>;也会放过 interface I { x: number; },因为末尾不是 ; 而是 }
  • 如果 interface 含 extends(如 interface A extends B, C),正则里的 (?:\s+extends\s+[a-zA-Z0-9_\s,]+)? 能覆盖,但不支持多行 extends 列表
  • 执行前建议先 Ctrl+F 预览匹配项,确认没圈中函数类型行

处理泛型参数中的空格和换行(如 )

泛型参数列表常因格式化工具或手写习惯变得混乱:<t></t>、、甚至跨行。Sublime 正则无法解析语法树,但可以基于常见模式做保守规整。

查找:



替换:
再配合一次替换:
,\s+
→
, 
和
\s*=\s*
→
=
  • 第一个正则只匹配尖括号包裹的纯泛型参数(不含 keyof、infer 等关键字),所以 <k extends keyof t></k> 不会被误处理
  • 不要试图用单次正则搞定所有空格——分步替换更可控,也方便撤销某一步
  • 如果泛型含箭头函数(如 <t> => T</t>),尖括号不属于泛型而是 JSX/类型断言,此方案不适用,得人工跳过

真正麻烦的是嵌套泛型(Map<string array>></string>)——Sublime 正则没有递归能力,这种只能靠 ESLint 的 @typescript-eslint/type-annotation-spacing 规则来长期约束,正则仅适合扁平结构。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

272

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

480

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

331

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

246

29

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

518

8

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4016

8

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2023.07.05

2541

4

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

6902

9

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

2023.08.11

792

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程