静态类型检查
在代码运⾏前进⾏检查,发现代码的错误或不合理之处,减⼩运⾏时出现异常的⼏率,简⾔之就是把运⾏时的错误前置。
- TypeScript 和核⼼就是静态类型检查,将js的弱语言变成【强语言】(类似于c先给变量定义个数据类型在调用)。
- 同样的功能,TypeScript的代码量要⼤于JavaScript,但由于TypeScript的代码结构更加清晰,在后期代码的维护尤其大型项目中TypeScript却胜于JavaScript。
在js中经常遇到的困扰
- 不同数据类型的赋值或调用。
- 存在明显的逻辑漏洞。
- 访问不存在的属性。
- 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()