首页 > 其他分享 >2023.04.16 - TS编译之后的JS不具备校验功能

2023.04.16 - TS编译之后的JS不具备校验功能

时间:2023-04-16 15:59:49浏览次数:64  
标签:检查 16 flow JavaScript Flow TS add 2023.04 类型

TypeScript 编译后的 JavaScript 文件并不具备类型检查的功能,因为 JavaScript 语言本身是动态类型、弱类型的,在运行时无法推断变量的类型,只能在编译时推断。而将 TypeScript 文件编译成 JavaScript 文件时,会把 TypeScript 中的类型声明和类型检查都去掉,只保留 JavaScript 代码,所以 TypeScript 编译后的JavaScript文件并不能进行类型检查。
如果需要在 JavaScript 中进行类型检查,可以使用像 JSDoc、Flow、PropTypes 等第三方工具进行类型声明和类型检查,但与 TypeScript 相比,它们的类型检查功能都比较有限。因此,如果需要更严格的类型检查,更推荐使用 TypeScript

当使用 JSDoc 进行类型声明时,我们需要在注释中使用特定的语法来描述参数和返回值类型。下面是一个使用 JSDoc 进行类型校验的例子:

/**
 * 返回两数之和
 * @param {number} a 第一个加数
 * @param {number} b 第二个加数
 * @returns {number} 两数之和
 */
function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add(1, "2")); // "12"

在上面的例子中,我们使用 @param 注释描述了第一个加数 a 和第二个加数 b 的类型,使用 @returns 注释描述了函数返回值的类型。在代码中,如果我们传入了不符合类型要求的参数,比如使用字符串 "2" 代替数字 2,则会得到一个错误的结果。

需要注意的是,JSDoc 只提供了注释的形式进行类型声明,并不会进行类型检查。即使我们通过注释声明了参数和返回值类型,但 JavaScript 并不会对其进行类型检查,仍将维持原本的动态、弱类型特性。

JSDoc也可以参考类似于 JSDoc 文档参考这样的文档

下面是一个使用 Flow 进行类型检查的完整项目例子:

  1. 安装 Flow:
npm install -g flow-bin
  1. 在项目根目录下创建 .flowconfig 配置文件,并添加以下配置:
[ignore]
<PROJECT_ROOT>/node_modules/.*

[include]

[libs]

[options]
module.system=node
  1. 在项目中初始化 package.json 文件:
npm init -y
  1. 安装项目依赖:
npm install --save-dev flow-bin
  1. package.json 文件中添加 scripts 配置:
{
  "name": "flow-example",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "flow": "flow"
  },
  "devDependencies": {
    "flow-bin": "^0.153.0"
  }
}
  1. src 目录下创建 index.js 文件,并添加以下代码:
// @flow

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 2));
console.log(add(1, "2"));

在上面的代码中,我们添加了 @flow 注释告诉 Flow 进行类型检查,声明了 add 函数的参数和返回值类型。在 console.log 语句中使用不符合类型要求的参数时,会在控制台输出类型错误提示。

  1. 启动 Flow 服务:
npm run flow

启动后,Flow 会对项目中的 JavaScript 文件进行类型检查,并输出类型错误提示。如果遇到问题,可以根据提示信息修复代码,然后重新运行 Flow 服务来进行验证。

  1. 执行程序:
node src/index.js

上述例子仅为了演示如何使用 Flow,在实际项目中,我们应该尽可能完善注释、引用 Flow 的类型库以及在代码中遵循 Flow 的规范来提高项目的类型检查覆盖率。

标签:检查,16,flow,JavaScript,Flow,TS,add,2023.04,类型
From: https://www.cnblogs.com/yehuda/p/17323372.html

相关文章

  • Deeper Insights into Graph Convolutional Networks for Semi-Supervised Learning
    目录概符号说明Laplaciansmoothing代码LiQ.,HanZ.andWuX.Deeperinsightsintographconvolutionalnetworksforsemi-supervisedlearning.AAAI,2018.概本文分析了GCN的实际上就是一种Smoothing,但是如果层数过多就会导致over-smoothing.符号说明\(\mat......
  • 2023-3-16 #45 花花绿绿的色块勉勉强强拼凑成
    这是之前的博客。鸽了一年的ZYLOI终于举办了!讲完题的一刻,感觉心中的大石头终于落下来了!265P9150邮箱题很不错的题!!分置换环考虑,我们将一个置换环上的结点重新编号为\(1,2,\cdots,n\),倍长后断环为链。我们尝试维护若干条有序的链,每条链由一些点双连成。从后往前扫描每个点,......
  • Udhcpc.user script documentation and how to hotplug for DHCP events
    Udhcpc.userscriptdocumentationandhowtohotplugforDHCPeventshttps://forum.openwrt.org/t/udhcpc-user-script-documentation-and-how-to-hotplug-for-dhcp-events/47952/10 Hi,guys!I'vebeenlookingforwaystoexecuteprogrammes/scriptsonDHCP......
  • react+ts+hook封装一个table分页组件(建议收藏,直接使用)
    前言大家好我是歌谣我是一名坚持写博客四年的博主最好的种树是十年前其次是现在,今天继续对antdesigntable的分页封装进行讲解封装准备(多看官网)jsx风格的api<><Table<User>columns={columns}dataSource={data}/>/*使用JSX风格的API*/<Table<User>data......
  • CF1816F Xor Counting - dp - 分治 -
    题目链接:https://codeforces.com/contest/1816/problem/F题解:一道有趣的题。首先发现\(m=1\)和\(m\geq3\)时结论是平凡的。\(m=1\)时结论显然,下面讨论一下\(m\geq3\)时:首先可以构造\([x,(n-x)/2,(n-x)/2,\cdots]\),其中\(x\)和\(n\)同奇偶,显然此时异或值可以......
  • 建民打卡日记4.16
    一、问题描述某人从1990年一月一日开始“三天打鱼两天晒网”,问某天以后是打鱼还是晒网?二、设计思路1.输入日期2.求1990年一月一日到该日期天数3.对天数求余,根据余数输出“打鱼”或“晒网”三、程序流程图四、代码实现#include<iostream>usingnamespacestd;intrunY......
  • Value targets in off-policy AlphaZero: a new greedy backup
    发表时间:2021文章要点:这篇文章给AlphaZero设计了一个新的valuetargets,AlphaZerowithgreedybackups(A0GB)。AlphaZero的树里面有探索,而value又是所有结果的平均,所以并不准确。而选动作也是依概率选的,但真正测试的时候是选的访问次数最多的动作,所以这个方法是off-policy,也会......
  • TTL反相器、OC门、TS门、推挽输出、开漏输出
    TTL反相器这是一个TTL反相器,这是经过了很多工程师多种设计最终沉淀出来的电路,这个电路是比较成熟的。我们只需要对这个电路进行解析即可,不需要再去研究当初是如何设计出来的。学过CMOS应该知道,右侧的输出级其实也是个推挽输出,因为长得像图腾柱,因此也有人称呼它为图腾柱。推挽输出的......
  • ts类型体操Concat
    /*533-Concat-------byAndreyKrasovsky(@bre30kra69cs)#easy#array###QuestionImplementtheJavaScript`Array.concat`functioninthetypesystem.Atypetakesthetwoarguments.Theoutputshouldbeanewarraythatincludesinputsin......
  • ts类型体操 Awaited
    /*189-Awaited-------byMaciejSikora(@maciejsikora)#easy#promise#built-in###QuestionIfwehaveatypewhichiswrappedtypelikePromise.Howwecangetatypewhichisinsidethewrappedtype?Forexample:ifwehave`Promise&l......