Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >@ ts-check

@ ts-check

原创
作者头像
腾讯IVWEB团队
修改于 2017-10-23 03:24:20
修改于 2017-10-23 03:24:20
2.8K0
举报

前言

由于 JavsScript是弱类型,所以在大型项目中使用时显得能力略有不足。从七月份在腾讯实习到现在,接触到了不少项目的代码,平均算来每天都有 70% 的时间用于阅读、理解他人的代码。每次阅读他人代码的时候,我心中都会冒出来两个强烈的愿望:要是 JavaScript是强类型的多好!要是文档能再详细一点就好了!多亏了 TypeScript和 JSDoc,这两个愿望都有变成现实的可能。

@ts-check 立即上手

使用 TypeScript的最佳方式肯定是直接使用它的语法来编写 .ts 文件,然后通过编译器转换成 .js 文件。然而对于老项目而言,切换构建往往意味着麻烦和巨大的风险,而且假如将来 JavaScript也引入了类型系统(这非常有可能),那又得从 TypeScript切回 JavaScript(回归标准)。那么有没有一种无痛的方式,让我们既可以享受 TypeScript带来的好处,又能不改变项目的现有构建方式呢?

答案就是 // @ts-check,在 .js 文件的头部引入这样一行注释,就可以使用 TypeScript了。

举个例子,在下图中我们首先声明了一个变量 a,然后把数字 1 赋给了它,接着又把字符串 '123' 赋给了它,看起来好像没有什么问题。

未使用 @ts-check

现在让我们加上// @ts-check,咦,怎么 a 下面出现了红色的报错?把鼠标移到 a 处,发现报错是"Type '"123'" is not assignable to type 'number'",也就是说在 TypeScript中这种把字符串 '123' 赋值给数字变量 a 的做法是不妥的。

使用 @ts-check

享受 TypeScript类型系统的好处就是这么简单,不需要改变构建,不需要进行项目的迁移,所需要做的仅仅是在 .js 文件的头部加入 // @ts-check(前提是你使用的是 VS Code,不过其它的编辑器下载相应的插件即可)。

JSDoc 添加类型

如果仅仅使用 // @ts-check的话,我们只能使用它的自动类型推断功能,这对于大型项目来说是远远不够的,我们希望能像强类型语言一样指定每个变量的类型。本着不对项目产生侵入的原则,TypeScript可以通过 JSDoc 风格的注释来完成这一点。接下来的举例说明取自官方的文档

代码语言:txt
AI代码解释
复制
/**
 * 使用 "@type" 来声明类型
 * @type {string}
 */
let var1;

/** @type {Window} */
let var2;

/**
 * 用 “return” 说明函数的返回值类型
 * @return {number}
 */
function fn1() {}

/**
 * 可以像使用 "@return" 一样使用 "@returns"
 * @returns {{a: string, b: number}}
 */
function fn2() {}

/**
 * 可以指定 union 类型,如字符串或者布尔值
 * @type {(string | boolean)}
 */
let var3;

/**
 * 声明元素类型是数字的数组 - 方式1
 * @type {number[]}
 */
let var4;

/**
 * 声明元素类型是数字的数组 - 方式2
 * @type {Array.<number>}
 */
let var5;

/**
 * 声明元素类型是数字的数组 - 方式3
 * @type {Array<number>}
 */
let var6;

/**
 * 声明对象类型
 * @type {{a: string, b: number}}
 */
let var7;

/**
 * 用 "@typedef" 自定义复杂类型
 * @typedef {Object} SpecialType - 创建一个新的类型 'SpecialType'
 * @property {string} prop1 - SpecialType 属性 prop1 是 string 类型
 * @property {number} prop2 - SpecialType 属性 prop2 是 number 类型
 * @property {number=} prop3 - SpecialType 属性 prop3 是可选的 number 类型
 * @prop {number} [prop4] - SpecialType 属性 prop4 是可选的 number 类型
 * @prop {number} [prop5=42] - SpecialType 属性 prop5 是可选的 number 类型(默认值 42))
 */
/** @type {SpecialType} */
let specialTypeObject;


/**
 * 声明函数参数类型
 * @param p0 {string} - TS 风格声明 p0
 * @param {string}  p1 - p1 是 string 类型参数
 * @param {string=} p2 - p2 是可选的 string 类型参数
 * @param {string} [p3] - 另外一种可选参数写法
 * @param {string} [p4="test"] - p4 是可选的 string 类型参数(默认值为 "test")
 * @return {string} - 函数返回值是 string 类型
 */
function fn3(p0, p1, p2, p3, p4){
  // TODO
}

/**
 * 也可以使用模板来声明类型
 * 如 fn4 表示返回值和参数 p1 是相同类型
 * @template T
 * @param {T} p1
 * @return {T}
 */
function fn4(p1){}

写在最后

对于老项目,使用 // @ts-check 和 JSDoc 引入 TypeScript来享受类型系统的好处是最简单、学习成本最低的方法。对于新项目,相较于激进地使用 .ts 文件,我认为 // @ts-check 和 JSDoc 是更好的方法,因为 JavaScript在不久的未来很有可能会引入可选的类型系统(类似于Python 3),到时候可以避免再从 TypeScript回归 JavaScript。

参考链接

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS的静态类型检测,有内味儿了
我们知道 TypeScript 2.3 以后的版本支持使用--checkJs对.js文件进行类型检查和错误提示。 但是由于 JavaScript 是弱类型语言,在编写代码的时候,是无法检测变量的类型的。
Daotin
2019/12/12
1.8K0
你即将使用的ES2020新功能[每日前端夜话0xF3]
翻译:疯狂的技术宅 作者:John Au-Yeung 来源:gitconnected
疯狂的技术宅
2019/12/11
9670
Vue3中defineEmits、defineProps 是怎么做到不用引入就能直接用的
最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势。
前端小智@大迁世界
2022/09/22
2.1K0
十分钟了解 TypeScript 是如怎样工作的
本文概述了 TypeScript 的工作原理:典型的 TypeScript 项目的结构是什么?什么被编译以及怎样编译?我们如何使用 IDE 编写 TypeScript?
疯狂的技术宅
2020/05/11
1.4K0
十分钟了解 TypeScript 是如怎样工作的
@ts-check
IMWeb前端团队
2017/12/29
1.8K0
@ts-check
JSDoc支持_TypeScript笔记19
因此,对于.js文件,需要一种被 JavaScript 语法所兼容的类型标注方式,比如JSDoc:
ayqy贾杰
2019/06/12
4.1K0
不是Typescript用不起,而是JSDoc更有性价比?
2023年,几条关于 Typescript 的新闻打破了沉寂,让没什么新活好整的前端开发圈子又热闹了一番。
江米小枣
2023/12/06
5770
不是Typescript用不起,而是JSDoc更有性价比?
用什么策略把你的 JavaScript 迁移到 TypeScript
本文概述了将代码库从 JavaScript 迁移到 TypeScript 的策略。还提到了需要进一步阅读的材料。
疯狂的技术宅
2020/04/24
8000
用什么策略把你的 JavaScript 迁移到 TypeScript
TS 进阶 - 泛型
在条件类型参与的情况下,通常泛型会被作为条件类型中的判断条件(T extends Condition 或 Type extends T)以及返回值。这也是筛选类型需要依赖的能力之一。
Cellinlab
2023/05/17
2790
【黄啊码】用PHP7性能居然是5.6的三倍?赶紧看看它有什么新特性
大家好,我是黄啊码,最近说到php从入门到拆门,有网友说,门都还没进,怎么拆门?那咱们现在就从php7说起,至于入门的太简单,我就略过了,大家加油,不懂Q我吧。
黄啊码
2022/11/21
1.2K0
【黄啊码】用PHP7性能居然是5.6的三倍?赶紧看看它有什么新特性
ES2020的这些新功能令人期待
最近这几年,随着JavaScript及前端领域的持续迅猛发展,尤其是在2015年ES6发布后,这个发展的进程也变得越来越快起来。许多新功能也将计划包含在ES2020版本中。
葡萄城控件
2020/07/13
9120
TS in JS 实践指北
不知道有多少 TS 爱好者哀叹过这个问题:虽然我很想用 TS,奈何老大只让用 JS。
WecTeam
2019/12/26
4.5K0
TS in JS 实践指北
【TS】217-TypeScript - 一种思维方式
电影《降临》中有一个观点,语言会影响人的思维方式,对于前端工程师来说,使用 typescript 开发无疑就是在尝试换一种思维方式做事情。
pingan8787
2019/07/23
9500
【TS】217-TypeScript - 一种思维方式
深入探讨JavaScript类型检查
通过系统化应用这些方法,开发者可以构建出具备工业级健壮性的JavaScript应用,在提升代码质量的同时降低维护成本。
全栈若城
2025/02/19
950
TS 进阶 - 类型基础
在 TypeScript 中,null 和 undefined 类型是有具体意义的类型。在没有开启 strictNullChecks 检查时,会被视为其他类型的子类型,如 string 类型会被认为包含了 null 和 undefined。
Cellinlab
2023/05/17
1.8K0
检查JavaScript文件_TypeScript笔记18
但为了确保文件内容只含有标准的 JavaScript 代码,.js文件按照 ES 语法规范来检查,因而不允许出现 TypeScript 类型标注:
ayqy贾杰
2019/06/12
2.5K0
分享2023年最新的15种JavaScript 速记技巧
强大且广受欢迎的编程语言 JavaScript 具有庞大的内置函数库,可用于执行各种任务。
艾编程
2023/01/07
2K0
分享2023年最新的15种JavaScript 速记技巧
如何不编译使用 TypeScript
微软的TypeScript编程语言为 JavaScript 带来了静态类型以及静态类型带来的各种优势。虽然它没有强制在运行时进行类型检查,但是它允许我们进行静态分析,这让我们的代码更加安全,并且能够更好的和 IDE 集成。当然 TypeScript 的代码一般来说是要编译成标准的 JavaScript 代码这样它才能在浏览器和 Node.js 环境中运行。鉴于这些 TypeScript 的优势,《TypeScript 正在高速成长》这篇文章的观点就变得不足为奇了。
疯狂的技术宅
2019/03/27
1.9K0
如何不编译使用 TypeScript
PHP匿名类的用法
在PHP7之后,PHP中加入了匿名类的特性。匿名类和匿名方法让PHP成为了更现代化的语言,也让我们的代码开发工作越来越方便。我们先来看看匿名类的简单使用。
硬核项目经理
2020/02/26
9590
TS 进阶 - 类型工具
类型别名除了用于进行特定类型的抽离封装,还能作为工具类型。工具类同样基于类型别名,只是多了个泛型。
Cellinlab
2023/05/17
9030
相关推荐
JS的静态类型检测,有内味儿了
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文