TypeScript与js对比介绍

什么是TypeScript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
TS在JS的基础上，主要做出了以下改动：

1. 明确了数据的类型。所有的变量在声明时要指定具体的类型，是数字还是字符串，不像原来JS中，变量类型是不固定的，要根据变量的值判断。
2. 加入了面向对象的编程理念。有一套完整的面向对象语法，有接口、继承、类、重写这些概念。大项目更容易维护。
3. 明确了方法的参数以及返回。JS中是不指定参数和返回的，方法的传参和返回非常随意。
   我认为整个前端的发展过程都是在逐渐规范化，工程化的过程。从H5，css3，es6这些有一些新特性的加入，但更多的是提出规范的约束。不过jdk11借鉴了js的var声明变量。

TypeScript的使用

如果单独使用TS，要先安装TS的依赖，TS代码要先编译成js才可运行。

1. ts使用前需要先安装。npm install -g typescript。tsc -v 查看当前typescript的版本
2. tsc test.ts将ts编译成浏览器可以执行的js

const hello : string = "Hello World!"
console.log(hello)
1
2

详细介绍

1. 数据类型：
   新的数据类型有：any，number，string，boolean，数组，元组，enum，null，undefined

   var uname:string = “Runoob”; var score1:number = 50; var
   score2:number = 42.50 var sum = score1 + score2 console.log("名字:
   "+uname) console.log("第一个科目成绩: "+score1) console.log("第二个科目成绩:
   "+score2) console.log("总成绩: "+sum)

2. 方法:
   TS在方法中要规定参数以及返回的类型，并且在调用时，要严格的按照声明的格式调用。 function add(x: number,
   y: number): number { return x + y; } console.log(add(1,2)) function
   add(x,y,z){ return x+y } add(x) add(x,y)
   如果确实存在有的情况参数可以不传，那么可以使用可选参数，示例：

   function buildName(firstName: string, lastName?: string) { if
   (lastName)return firstName + " " + lastName;
   elsereturn firstName; } let result1 = buildName(“Bob”); // 正确 let result2 = buildName(“Bob”, “Adams”, “Sr.”); // 错误，参数太多了 let
   result3 = buildName(“Bob”, “Adams”); // 正确
   如果参数不需要传，但是有个默认值，可以使用默认参数。默认参数也可以用于可选参数的情况

   function calculate_discount(price:number,rate:number = 0.50) { var
   discount = price * rate;
   console.log("计算结果: ",discount); } calculate_discount(1000) calculate_discount(1000,0.30)
   除了上述的这些，还有剩余参数，匿名函数，箭头函数，函数重载，递归调用等。语法十分丰富。

3. 面向对象：
   在js中我们也可以实现面向对象编程，但是语法和语义上很别扭。因为JS设计之初是脚本语言，面向过程的。 定义一个猫类：

  		function Cat(name,color){ 
	         this.name = name; 
	         this.color = color; 
        }  
        Cat.prototype.type = "猫科动物"; 
	         Cat.prototype.eat = "老鼠"; 
	         Cat.prototype.hello = function () {
	        	console.log(`hello,我是${this.name},我爱吃${this.eat}`)
	         }
    	var cat = new Cat("小猫", "red") cat.hello()
1
2
3
4
5
6
7
8
9
10

在js中，对象的继承也有很多方法，但是都很别扭，所以使用的不多。TS为我们解决了这一困难，在TS中使用class、extends、static、public、private、interface、implements等我们熟悉的关键字进行面向对象编程。举个栗子：

   	    class Shape {
	        Area:number
	        constructor(a:number) {
	            this.Area = a
	        }
        } 
        class Circle extends Shape {
	        disp():void {
	            console.log("圆的面积:  "+this.Area)
	        } 
        } 
        var obj = new Circle(223);  obj.disp()
1
2
3
4
5
6
7
8
9
10
11
12

TypeScript的项目

大名鼎鼎的有：VSCode、Angular2（前端三剑客vue，react，angular）、ant-design（我们管理系统前端用到这个了）、tslint（前端eslint代码校验工具）