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 是动态类型

1. 类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型
2. 静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。
3. 也就是编译时检查, 就是声明变量的时候 类型就确定了,不用等到运行起来,做一些不是本类型的操作编译的时候就会报错
4. TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查JavaScript动态类型,所以 TypeScript 是静态类型
5. 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

2. 编译指令 tsc   文件名.ts
3. 编译后会生成一个同名的 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. 问题

1. 编译后的JS文件和之前 的TS文件没有啥区别
   因为TypeScript是完全兼容JavaScript的

2.上述没有办法限制参数的类型,如果传入对象,数组,函数呢,这在习惯后端开发的人看来简直不可思议,

所以TS 加了类型,接口 ,类 等后端的概念进去

9. 官方资料

官网

官方在线测试

1.png

有各种配置非常方便