TS系列（1）：TS是什么？如何使用？

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

TypeScript（TS）增强了 JavaScript 的静态类型检查能力，提高了代码的可维护性和可读性。通过类型定义，TS帮助开发者在编写阶段发现并修正错误，促进了大型项目中的团队协作和代码质量，在前端开发中的具有重要意义。

一、TS是什么？

JavaScript 当年诞生时的定位是浏览器脚本语言，用于在网页中嵌入一些简单的逻辑，而且代码量很少。
随着时间的推移，JavaScript 变得越来越流行，如今的 JavaScript 已经全栈编程了。
现如今的 JavaScript 应用场景比当年丰富的多，代码量也比当年大很多，随便一个 JavaScript 项目的代码量，可以轻松达到几万行，甚至几十万行！
然而 JavaScript 当年 "出生简陋"，没考虑到如今的应用场景和代码量，逐渐的就出现了很多困扰。

1.不清不楚的数据类型

let welcome = 'hello'
welcome() // TypeError: welcome is not a function

2.有漏洞的逻辑

const str = Date.now() % 2 ? '奇数' : '偶数'if (str !== '奇数') {console.log('hello')
} else if (str === '偶数') {console.log('world') // 这里永远不会执行，但不会报错
}

3.访问不存在的属性

const obj = {width: 20,height: 10
}const area = obj.width * obj.heigth // 这里并不会报错console.log(area) // NaN

4.低级的拼写错误

const message = 'hello,world'
message.toUperCase() // 拼写错误但不会提示

【静态类型检查】

在代码运行前进行检查，发现代码的错误或不合理之处，减少运行时异常的出现几率，此种检查叫【静态类型检查】，TypeScript 核心就是【静态类型检查】，简言之就是把运行时的错误前置。
同样的功能，TypeScript 的代码量要大于 JavaScript，但由于 TypeScript 的代码结构更加清晰，在后期代码的维护中 TypeScript 却远胜于 JavaScript。

浏览器不能直接运行 TypeScript 代码，需要编译为 JavaScript 再交给浏览器解析器执行。

1.命令行编译

要把 .ts 文件编译为 .js 文件，需要配置 TypeScript 的编译环境，步骤如下：

const person = {name: '小明',age: 6
}
console.log(`我叫${person.name}，我今年${person.age}岁了`)

npm i typescript -g# 查看版本号
tsc -v

tsc demo.ts# 依次编译多个.ts文件
tsc demo.ts demo2.ts demo3.ts

var person = {name: '小明',age: 6
};
console.log("\u6211\u53EB".concat(person.name, "\uFF0C\u6211\u4ECA\u5E74").concat(person.age, "\u5C81\u4E86"));

如果 tsc 命令不能被识别，管理员权限打开 PowerShell 输入：set-ExecutionPolicy RemoteSigned 按回车。

2.自动化编译

tsc --init

tsc --watch

第三步：小优化，当编译出错时不生成 .js 文件（默认情况下出错也会生成 .js 文件）

tsc --noEmitOnError --watch

备注：也可以修改 tsconfig.json 中的 noEmitOnError 配置

3.不编译运行

如果在 Node 环境，可以直接运行.ts 文件吗？答案是可以的。不过需要全局安装 ts-node，然后就可以直接用 node 运行 .ts文件了。

npm i -g ts-nodets-node demo.ts

注意：

相同文件夹下的不同 .ts 文件不能有同名变量，则会提示重复声明变量：

let age: number
// Cannot redeclare block-scoped variable 'age'

其实问题出在了变量命名空间，如果不把文件当作模块使用的话 TypeScript 会认为所有文件里的代码都是在同一个作用域里的，所以即使在不同文件也不能声明同名变量。

好了，分享结束，谢谢点赞，下期再见。