TypeScript的静态类型检查,在js中经常会遇到的困扰

静态类型检查

在代码运⾏前进⾏检查,发现代码的错误或不合理之处,减⼩运⾏时出现异常的⼏率,简⾔之就是把运⾏时的错误前置。

  • TypeScript 和核⼼就是静态类型检查,将js的弱语言变成【强语言】(类似于c先给变量定义个数据类型在调用)。
  • 同样的功能,TypeScript的代码量要⼤于JavaScript,但由于TypeScript的代码结构更加清晰,在后期代码的维护尤其大型项目中TypeScript却胜于JavaScript。

在js中经常遇到的困扰

  1. 不同数据类型的赋值或调用。
  2. 存在明显的逻辑漏洞。
  3. 访问不存在的属性。
  4. api方法的拼写错误。

1. 不同数据类型的赋值或调用

  • 在js中这样是可行的
  • 在ts中会报错提示不能将类型"number"分配给类型"string"类型 "String" 没有调用签名
js 复制代码
let welcome = 'hello'
weclome = 123
welcome()

2. 存在明显的逻辑漏洞

  • 在js中不会报错,但是else if内的代码快永远不会执行到
  • 在ts中会报错提示此比较似乎是无意的,因为类型""奇数""和""偶数""没有重叠
js 复制代码
const str = Date.now() % 2 ? '奇数' : '偶数'
if (str !== '奇数') {
    alert('hello')
} else if (str === '偶数') {
    alert('world')
}

3. 访问不存在的属性

  • 在js中可以访问到obj的heigth属性值为undefined
  • 在ts中会报错提示属性"heigth"在类型"{ width: number; height: number; }"上不存在。你是否指的是"height"并能一键修复更改为正确的属性名
js 复制代码
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

4. api方法的拼写错误

  • 在js中编写代码时不会报错,但执行代码时会报错str.toUperCase is not a function
  • 在ts中编写代码时就会报错提示属性"toUperCase"在类型""hello,world""上不存在。你是否指的是"toUpperCase"并能一键修复更改为正确的属性名
js 复制代码
const message = 'hello,world'
message.toUperCase()
相关推荐
destinying13 分钟前
性能优化之实战指南:让你的 Vue 应⽤跑得飞起
前端·javascript·vue.js
徐小夕2 小时前
JitWord Office预览引擎:如何用Vue3+Node.js打造丝滑的PDF/Excel/PPT嵌入方案
前端·vue.js·github
晴殇i2 小时前
揭秘JavaScript中那些“不冒泡”的DOM事件
前端·javascript·面试
孟陬2 小时前
国外技术周刊 #1:Paul Graham 重新分享最受欢迎的文章《创作者的品味》、本周被划线最多 YouTube《如何在 19 分钟内学会 AI》、为何我不
java·前端·后端
BER_c2 小时前
前端权限校验最佳实践:一个健壮的柯里化工具函数
前端·javascript
兆子龙2 小时前
别再用 useState / data 管 Tabs 的 activeKey 了:和 URL 绑定才香
前端·架构
sudo_jin2 小时前
前端包管理器演进史:为什么 npm 之后,Yarn 和 pnpm 成了新宠?
前端·npm
敲敲敲敲暴你脑袋3 小时前
写个添加注释的vscode插件
javascript·typescript·visual studio code
叁两3 小时前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记3 小时前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code