Typescript 系列 -- Typescript 相比于 JavaScript 的独特之处
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