1. 前言
随着
JS的强大 ,jQ用的越来越少,同时其实TS用的也越来越少
但国内的环境发展是比较缓慢的,目前的趋势TS还是挺常用的,尤其在自己写工具的时候
那就学一学,写一写吧
这里假设大家对JS已经有了较为深入的理解
2.基础概念
Typed JavaScript at Any Scale.
添加了类型系统的 JavaScript，适用于任何规模的项目。
2大特性 出来了
1.类型系统
2.适用任何规模的项目
其实这也是为什么流行的原因 和解决了什么问题的答案
3.TS 和JS的关系
3.1初步理解成加强版的JS
使整个
TS更接近于后端的语言,因为早期其实前端也没有,都是后端写前端的,他们不适应JS,连个类都某有, 所以有了TS
3.2专业的解读
TypeScript是JavaScript的一个超集，支持ECMAScript 6标准。
TypeScript由微软开发的自由和开源的编程语言。
TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上
3.3 TS是静态类型 JS 是动态类型
- 类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型
- 静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。
- 也就是编译时检查, 就是声明变量的时候 类型就确定了,不用等到运行起来,做一些不是本类型的操作编译的时候就会报错
TypeScript在运行前需要先编译为JavaScript，而在编译阶段就会进行类型检查JavaScript动态类型,所以TypeScript是静态类型
JavaScript是一门解释型语言[4]，没有编译阶段,所以它是动态类型
3.4 TypeScript 和JS都是弱类型
类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型
JS和TS下面代码都一样
console.log(10 + '1');
数字
10被隐式转换为字符串"10"
TypeScript是完全兼容JavaScript的，它不会修改JavaScript运行时的特性，所以它们都是弱类型。
强类型 语言
Pyhton java OC .net C++
4. TypeScript应用
其实我们经常用到,只是没有去在意过
Vscode的功能，包括代码补全、接口提示、跳转到定义、代码重构等
脚手架react和vue项目引用的库,大多数也都是TS
vue3.x原生支持TS,脚手架的时候可选TS,node的自带库,点击跳转的时候,都是跳到TS文件了
5. 编译器安装
这里当然推荐的是全局安装了
npm install -g typescript
6. 基本操作
1.
typeScript文件后缀是ts
- 编译指令
tsc文件名.ts- 编译后会生成一个同名的
js文件,运行这个js文件查看效果
当做 后端的nodejs运行就好
7. 简单示例
7.1 ts文件编写 01.ts
function sum(n){
return n + 10
}
let num1 = 10
console.log(sum(num1))
7.2 编译
tsc 01.ts
7.3 执行编译后的JS文件
编译后的JS文件
function sum(n) {
return n + 10;
}
var num1 = 10;
console.log(sum(num1));
执行运行指令
node 01.js
输出 20
8. 问题
- 编译后的
JS文件和之前 的TS文件没有啥区别
因为TypeScript是完全兼容JavaScript的
2.上述没有办法限制参数的类型,如果传入对象,数组,函数呢,这在习惯后端开发的人看来简直不可思议,
所以TS加了类型,接口 ,类 等后端的概念进去
9. 官方资料
1.png
有各种配置非常方便
