Typescript 和 JavaScript 的区别

类型系统

JavaScript 是一种动态类型语言，这意味着变量类型是在运行时确定的。这可能会导致运行时错误，并使在开发过程中更难发现错误

为了解决这一点，于是出现 TypeScript，一种静态类型语言，使开发人员能够在开发过程中提前捕获与类型相关的错误，而不是在运行时。这可以产生更健壮和可维护的代码

额外特性

由于 TypeScript 是 JavaScript 的超集，它包括 JavaScript 的所有功能并添加了一些自己的功能。这些额外的特性，如接口、装饰器和命名空间，可以使 TypeScript 更适合大规模应用程序开发，并提供更好的代码组织和维护

普适性

前端开发上：所有现代 Web 浏览器都支持 JavaScript，使其成为客户端 Web 开发的实际标准。所以即使用 TypeScript 开发的 web 项目最终也必须得转换成 JavaScript

另外，在服务端开发上：借助 Node.js，JavaScript 也可用于服务器端开发

TypeScript 的特别之处

Typescript 基础类型

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号来定义多行文本和内嵌表达式。
布尔类型	boolean	表示逻辑值：true 和 false。
数组类型	无	声明变量为数组。
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
枚举	enum	枚举类型用于定义数值集合。
void	void	用于标识方法返回值的类型，表示该方法没有返回值。
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

Typescript 变量声明

var name:string = "Runoob";  
var age:number = 23;

var person:PersonT;
type PersonT = {
  id: string;
  age: number;
  name: string;
  avatarUrl: string;
};
var persons:PersonT[] = [];

此代码规定了一个对象变量 person 的类型 PersonT 的结构（所有字段及其类型）

persons 则是由多个相同类型的对象组合起来的数组

Typescript 函数

如何规定函数的参数类型和返回值类型，语法格式如下：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可选参数

两个参数 firstName、lastName，lastName 参数有可能没传

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

参数默认值

两个参数 price、rate，rate 参数有可能没传，没传的情况下设置其默认值为 0.5

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

运行结果：

计算结果:  500
计算结果:  300

Typescript 对象

声明：

type ObjT = {
  key1: string;
  key2: number;
  key3: function() {}; // 无参数、返回值的普通函数
  key4: function add(x: number, y: number): number { return x + y; } // 有参数、返回值的普通函数
  key5: () = > void; // 无参数、返回值的箭头函数
  key6: (x: number, y: number) => number; // 有参数、返回值的箭头函数
  key7: { id: string; age: number; } // 对象某个字段的值也是对象
};
var obj:objT;

鸭子类型(多态性)

鸭子类型是动态类型的一种风格，是多态性的一种形式

鸭子类型中，关注点在于对象的行为能做什么，而不是关注对象所属的类型

interface IPoint { 
    x:number 
    y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
    var x = p1.x + p2.x 
    var y = p1.y + p2.y 
    return {x:x,y:y} 
} 

var newPoint = addPoints({x:3,y:4},{x:5,y:1}) // 正确 
var newPoint2 = addPoints({x:1},{x:4,y:3}) // 错误

Typescript 联合类型

一个变量可能是 number 也可能是 string，那么这个变量在声明时应该这么写：

var val: string | number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)
val = true // 报错

person 对象可能有完整结构，也有可能是 undefined：

var person: PersonT | undefined;
type PersonT = {
  id: string;
  age: number;
  name: string;
  avatarUrl?: string;
};

其中 ? 表示 avatarUrl 字段有可能不存在或者为空，等价于以下写法：

var person: PersonT | undefined;
type PersonT = {
  id: string;
  age: number;
  name: string;
  avatarUrl: string | undefined;
};

也可以将联合类型作为函数参数使用：

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("输出数组....") 
disp(["Runoob","Google","Taobao","Facebook"])

运行结果：

Runoob
输出数组....
Runoob
Google
Taobao
Facebook

Typescript 模块

有时候一个对象的结构极其复杂，如果在业务逻辑的 ts 写这个结构类型则显得这个 ts 非常拥挤，所以我们通常把书写这个结构类型的代码移到另外的 ts 文件里，进行 export 导出和 import 导入

type.ts

export type PersonT = {
  id: string;
  age: number;
  name: string;
  avatarUrl?: string;
};
export type StudentT = {
  id: string;
  name: string;
  grade: number;
};

main.ts 文件引入 type.ts 文件中声明好的 PersonT、StudentT 类型

import { PersonT, StudentT } from './types';

var person: PersonT;
var student: StudentT;

Typescript 变量作用域

TypeScript 有以下三种作用域：

• 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
• 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
• 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

以下实例说明了三种作用域的使用：

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

以上代码使用 tsc 命令编译为 JavaScript 代码为：

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);

运行结果：

全局变量为: 12
10
实例变量: 13

Typescript 类

TypeScript 是面向对象的 JavaScript

类描述了所创建的对象共同的属性和方法

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
• 构造函数 − 类实例化时调用，可以为类的对象分配内存。
• 方法 − 方法为对象要执行的操作。

定义一个类

创建一个 Person 类：

class Person {
}

编译以上代码，得到以下 JavaScript 代码：

var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());

创建类的数据成员

以下实例我们声明了类 Car，包含字段为 engine，构造函数在类实例化后初始化字段 engine。

this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同，this.engine 表示类的字段。

此外我们也在类中定义了一个方法 display()

class Car { 
    // 字段 
    engine:string; 
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    display():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}

编译以上代码，得到以下 JavaScript 代码：

var Car = /** @class */ (function () {
    // 构造函数 
    function Car(engine) {
        this.engine = engine;
    }
    // 方法 
    Car.prototype.display = function () {
        console.log("发动机为 :   " + this.engine);
    };
    return Car;
}());

创建实例化对象

我们使用 new 关键字来实例化类的对象，语法格式如下：

var object_name = new class_name([ arguments ])

类实例化时会调用构造函数，例如：

var obj = new Car("Engine 1")

类中的字段属性和方法可以使用 . 号来访问：

// 访问属性
obj.field_name 

// 访问方法
obj.function_name()

以下实例创建来一个 Car 类，然后通过关键字 new 来创建一个对象并访问属性和方法：

class Car { 
   // 字段
   engine:string; 
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }
   // 方法
   display():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
}
// 创建一个对象
var obj = new Car("XXSY1")
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
// 访问方法
obj.display()

编译以上代码，得到以下 JavaScript 代码：

var Car = /** @class */ (function () {
    // 构造函数
    function Car(engine) {
        this.engine = engine;
    }
    // 方法
    Car.prototype.display = function () {
        console.log("函数中显示发动机型号  :   " + this.engine);
    };
    return Car;
}());
// 创建一个对象
var obj = new Car("XXSY1");
// 访问字段
console.log("读取发动机型号 :  " + obj.engine);
// 访问方法
obj.display();

输出结果为：

读取发动机型号 :  XXSY1
函数中显示发动机型号  :   XXSY1

类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

语法格式如下：

class child_class_name extends parent_class_name

类的继承：实例中创建了 Shape 类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性：

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   display():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.display()

运行结果为：

圆的面积:  223

需要注意的是子类只能继承一个父类，TypeScript 不支持继承多个类，但支持多重继承，如下实例：

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

运行结果为：

hello

---

继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。

其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

运行结果为：

父类的 doPrint() 方法。
子类的 doPrint()方法。

static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static display():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.display()       // 调用静态方法

编译以上代码，得到以下 JavaScript 代码：

var StaticMem = /** @class */ (function () {
    function StaticMem() {
    }
    StaticMem.display = function () {
        console.log("num 值为 " + StaticMem.num);
    };
    return StaticMem;
}());
StaticMem.num = 12; // 初始化静态变量
StaticMem.display(); // 调用静态方法

输出结果为：

num 值为 12

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

编译以上代码，得到以下 JavaScript 代码：

var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());
var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj 对象是 Person 类实例化来的吗？ " + isPerson);

输出结果为：

obj 对象是 Person 类实例化来的吗？ true

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

• public（默认）  : 公有，可以在任何地方被访问。
• protected : 受保护，可以被其自身以及其子类访问。
• private : 私有，只能被其定义所在的类访问。

以下实例定义了两个变量 str1 和 str2，str1 为 public，str2 为 private，实例化后可以访问 str1，如果要访问 str2 则会编译错误。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

以下实例中 AgriLoan 类实现了 ILoan 接口：

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

编译以上代码，得到以下 JavaScript 代码：

var AgriLoan = /** @class */ (function () {
    function AgriLoan(interest, rebate) {
        this.interest = interest;
        this.rebate = rebate;
    }
    return AgriLoan;
}());
var obj = new AgriLoan(10, 1);
console.log("利润为 : " + obj.interest + "，抽成为 : " + obj.rebate);

输出结果为：

利润为 : 10，抽成为 : 1