文章目录
枚举
枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等
枚举例子
枚举使用 enum 关键字来定义
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat} 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射
enum Days {Sun, Mon, Tue, Wed, Thu, Fri,Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true手动赋值
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"]); // 7
console.log(Days[1]); // Mon枚举类型提供的一个便利是你可以由枚举的值得到它的名字
enum Color { Red = 1, Green, Blue }
let colorName: string = Color[2];
console.log(colorName); // Green联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种
当我们需要定义的数据并不确定是那种类型的时候，可以使用联合类型
var age:number | string = 20;
age = "20岁"
console.log(age)甚至可以是更多种类型的联合
var age:number | string | boolean | [] = 20;
age = "20岁"
console.log(age)函数中的联合类型
联合类型其实最常用的场景就是在函数中
function
info(age:number|string):number|string{
return age;
}
info(20)
info("20")函数_基础
函数是 JavaScript 应用程序的基础。在 TypeScript 里函数仍然是主要的定义行为的地方
常见函数定义形式
function add(x, y) {
return x + y;
}
let add = function(x, y) {
return x + y;
};TypeScript定义函数
让我们为上面那个函数添加类型
function add(x:number, y:number):number {
return x + y;
}我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript 能够根据返回语句自动推断出返回值类型，因此我们通常省略它
注意，输入多余的（或者少于要求的）参数，是不被允许的
function add(x:number, y:number):number {
return x + y;
}
add(10,20,30) // 编译报错箭头函数
const add = (x:number, y:number) =>{
return x + y
}温馨提示
返回值一般会自行推断
函数_参数说明
函数的参数在ES6中就有很大的改动了，在TypeScript中也依然适用
可选参数
前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？
我们用 ? 表示可选的参数
const add = (x:number, y:number,z?:number) =>
{
return x + y
}
add(10,20)
add(10,20,30)温馨提示
可选参数必须接在必需参数后面，可选参数后面不允许再出现必需参数了
参数默认值
在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数
function info(name: string, age: number = 20)
{
return name + age
}
info("iwen")
info("iwen",30)此时就不受「可选参数必须接在必需参数后面」的限制了
剩余参数
ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）
function push(array:any[], ...items:any[]) {
items.forEach(function(item) {
array.push(item);
});
return array
}
let a: any[] = [];
const currentArray = push(a, 1, 2, 3);注意，rest 参数只能是最后一个参数
重载
重载允许一个函数接受不同数量或类型的参数时，作出不同的处理
function reverse(x: number | string): number | string | void {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串
function reverse(x:number):number;
function reverse(x:string):string;
function reverse(x:number|string): number | string |void{
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
const numReverse = reverse(123);
const stringReverse = reverse("Hello");类的概念
虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍
类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
对象（Object）：类的实例，通过 new 生成
面向对象（OOP）的三大特性：封装、继承、多态
封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改
对象内部的数据
继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比
如 Cat 和 Dog 都继承自 Animal ，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog ，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
存取器（getter & setter）：用以改变属性的读取和赋值行为
修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口
class Animal {
public name;
constructor(name) {
this.name = name;
}
sayHi() {
return `My name is ${this.name}`;
}
get _name() {
return 'Jack';
}
set _name(value) {
console.log('setter: ' + value);
}
}
let a = new Animal('Jack');
class Cat extends Animal {
constructor(name) {
super(name); // 调用父类的constructor(name)
console.log(this.name);
}
sayHi() {
return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
}
}
let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom类的创建
传统的 JavaScript 程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从
ECMAScript 2015，也就是 ECMAScript 6 开始，JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行
ES5类
基于原型的类创建
function People(name,age) {
// 属性
this.name = name;
this.age = age;
// 方法;
this.sayHello = function(){
console.log("Hello");
}
}
People.prototype.sayHi = function(){
console.log("hi")
}
var p1 = new People("张三",20);ES6类
基于 class 传统创建方式
class Animal {
public name;
constructor(name) {
this.name = name;
}
sayHi() {
return `My name is ${this.name}`;
}
}
let a = new Animal('Jack');
console.log(a.sayHi());TypeScript类
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
