四两拨千斤——你不知道的VScode编码TypeScript的技巧

时间  2021-04-21 标签 前端 typescript json 数组 函数 优化 编码 spa 设计 eslint

若是你体验过JAVA这种强类型语言带来的便利，包括其丰富的类型变量、抽象与接口，转而使用JavaScript时，必定会以为不够满意。尤为是JavaScript声明的变量Number能够垂手可得的分配给String，IDE如何执行任何类型的IntelliSense都让人十分困扰。前端

面对这个技术障碍，咱们就没法忽视TypeScript带来的便利。相比较于JavaScript，最为明显的一点就是咱们能够赋予IDE实际使用的能力， 本文将要介绍一些TypeScript的编码技巧，帮助您更加快速高效的进行工做。typescript

建立自定义代码段

获取默认的代码段以及自定义代码段是VScode的IntelliSense功能的重要部分，代码片能够大幅缩减编写代码的时间，只须要记住使用前缀，用什么触发就能够。json

经过从命令菜单中选择“插入代码段”，便可查看，该列表内容丰富，能在平常工做提供很大帮助。数组

image.png

另外一个重要内容是添加自定义代码段。函数

使用方法：选择“文件” > “首选项”下的“用户代码段”（在macOS上为“代码” > “首选项”），选择代码段可访问的语言，或是全局语言。优化

添加自定义代码段，只须要在文件内添加一个JSON定义。编码

image.png

新的snippets文件就新建在了项目文件夹中，具备自定义扩展名，支持JSON的内联注释。spa

须要定义的内容包括：设计

  • 名称，若是没有描述将做为IntelliSense下拉列表的一部分
  • 范围，默认为全句代码段
  • 前缀，做为触发片断的单词，能够定义为字符串组或值
  • 主体，包含代码行列表，能够添加VScode标记，使用TAB移动
  • 描述，此项为可选内容，若是不使用则在IntelliSense下拉菜单中列出的项目出现时显示其名称

上面的示例中咱们建立了一个自定义代码段，当开始编写“ mylog”就会触发该代码段。有人可能对代码中console.log有疑问，但要注意还有一个预约义的变量：TM_SELECTED_TEXT，它引用当前选定的文本。所以，若是咱们在选择代码时手动触发此代码段，它将将该选择封装在一条console.log语句中。eslint

这里整理了一些开发中经常使用代码段的预约义变量：

  • TM_SELECTED_TEXT 当前选择的文本或空字符串
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标下的单词内容或空字符串
  • TM_LINE_INDEX 基于零索引的行号
  • TM_LINE_NUMBER 基于一索引的行号
  • TM_FILENAME 当前文档的文件名
  • TM_FILENAME_BASE 当前文档的文件名，不带扩展名
  • TM_DIRECTORY 当前文件的目录
  • TM_FILEPATH 当前文档的完整文件路径
  • CLIPBOARD 剪贴板中的内容
  • WORKSPACE_NAME 打开的工做空间或文件夹的名称

日期和时间的引用：

  • CURRENT_YEAR 本年度
  • CURRENT_YEAR_SHORT 本年度的最后两位数字
  • CURRENT_MONTH 以两位数表示的月份（例如“ 02”）
  • CURRENT_MONTH_NAME 月的全名（例如“七月”）
  • CURRENT_MONTH_NAME_SHORT 该月的简称（例如“ Jul”）
  • CURRENT_DATE 一个月中的某天
  • CURRENT_DAY_NAME 一天的名称（例如“周一”）
  • CURRENT_DAY_NAME_SHORT 一天的简称（例如“ Mon”）
  • CURRENT_HOUR 当前小时（24小时制）
  • CURRENT_MINUTE 当前分钟
  • CURRENT_SECOND 当前秒
  • CURRENT_SECONDS_UNIX 自Unix时代以来的秒数

动态添加有效的注释标签：

  • BLOCK_COMMENT_START输出示例：JavaScript/*或HTML<!--
  • BLOCK_COMMENT_END输出示例：JavaScript*/或HTML-->
  • LINE_COMMENT 示例输出：在JavaScript中 //

举一些例子加以说明：

image.png

经过“ doc”，触发建立注释块，光标定位在的$1位置，若是在其中写内容并按TAB键，将跳转到position $2。

最终结果以下所示：

image.png

自定义TypeScript格式

根据我的风格和编码习惯自定义本身的编码格式

在设置窗口中，键入“ typescript.formatting ”， TypeScript提供了24种格式化选项。

image.png

可选择的范围包括：在打开和关闭字符串括号后添加空格，在函数的新行添加括号，处理分号（可选择忽略，添加缺失的括号或自动将其所有删除）。

经过此列表，咱们能够自定义VSCode，使代码风格更符合我的编码习惯。完成后，经过选择命令面板上的“设置文档格式”选项生效。

易重构性强

在大型代码库上进行重构尤为麻烦，进行简单的更改（例如，将类定义从一个文件夹移动到另外一个文件夹）会影响不少文件。

而VSCode提供了一组很是好用且无需进行任何额外的扩展的功能。

1.重命名现有符号

经过简单的Search＆Replace能够在代码中重命名变量或类名，除非名称是其余实体的一部分，例如命名类Car，而后将其oCar做为实例的变量。若是仅打算重命名实际的类，则会致使一些问题。

VSCode简化了不少工做，咱们要作的只是选中要重命名的实体之一，而后按F2（或右键单击它并选择“重命名符号”，mac的操做有些不一样）。选择新名称，该过程当中使用的任何地方（包括定义，若是最初未单击它的话）都将被正确重命名。

image.png

2.抽象的构建

若是不止一次使用，须要对其进行抽象。常见的重构技术是提取逻辑成为如一个函数或一个方法。

经过选择要重复使用的代码并单击其旁边的灯泡进行抽象。例如如下代码，须要提取最后两行：

image.png

image.png

选择提取在全局范围生效，输入新的函数名，将得到如下内容：
image.png

同时countCharacters功能须要一些修饰，在更复杂的用例下好处也很明显。

灯泡的菜单选项是上下文感知的，若是咱们正在使用类，则还能够选择将代码提取为新方法，或将类型转换为接口，以及将单个值转换为常量。

3.简化功能签名

将过多参数经过将对象分解添加到混合中进行简化：

image.png

选择全部参数，而后单击灯泡，选择“将参数转换为变形的对象”

image.png

进一步优化，打开类型声明，而后将其转换为外部类型，能够再次选择类型定义

image.png

点击“提取到类型别名”将询问新的类型名称，它将建立该名称并将其放置在函数的签名上

image.png

进一步简化此代码
image.png

保存文件后自动操做

咱们都经历过在将代码提交到存储库以前，忘记格式化文件或运行linter的尴尬状况，而在使用VSCode时，咱们定义在文件保存后当即执行的预设操做，这样就避免了开发的的疏漏。

设置过程是编辑settings.json器编辑文件，添加editor.codeActionsOnSave就能够在保存文件后设置要执行的操做列表，包括运行ESLint或添加缺乏的导入等操做。

能够将其设置为以下数组：

“ editor.codeActionsOnSave”：[“ source.fixAll.eslint”，“ source.addMissingImports”]

同时，若是咱们但愿在保存文件时自动添加前面提到的格式化选项（而不是手动格式化文档），则能够将如下条目添加到咱们的settings.json：

"editor.formatOnSave": true

例如，实现将分号设置为自动插入。

CodeLens计数器

VSL默认状况下不会激活CodeLens，对于大型代码库这将很是不便，这里将提供一些重构思路：

经过启用列出类，函数，类型和其余构造的实现和引用的计数器的功能，有小标记。

要启用此功能，只需在设置屏幕上查找单词“ CodeLens”。启用全部计数器。

将获得如下内容：
image.png

“3 references” 和“1 reference”是由VSCode直接添加的，一旦单击它们，将得到引用构造的代码的扩展视图（在此示例中为定义的类型）：

image.png

扩展阅读

若是您已熟练掌握TypeScript的编码开发技巧，并但愿在您的 Web 项目中实现 Excel 报表在线设计和数据填报，那么欢迎您下载试用这款纯前端表格控件 SpreadJS，您可经过QQ群（720389894）向咱们反馈你的产品使用建议。

总结

本文总结的这些TypeScript的编码技巧能够有效的提高您的编码效率，从此咱们将会为您带来更多相关技巧，助力开发者。

联系我们 沪ICP备2021010478号-7