1. 函数声明

在 ES5 中函数的写法：

function run() {
    console.log("run");
}
var run2= function() {
    console.log("run2");
}

而TypeScript中主要的不同点是函数需要标明参数的类型和返回值类型。

函数声明方式：

function 函数名(参数类型 参数名): 返回值类型 {
  return 值;
}

匿名函数：

let 变量值 = function(参数类型 参数名): 返回值类型 {
  return 值;
}

例如：

function getInfo(name:string, age: number): string {
    return `${name}---${age}`
}

let getInfo2 = function(name:string, age: number): string {
    return `${name}---${age}`
}

2. 函数的可选参数

语法：在选填的参数后添加 ? 即可：

function getInfo(name:string, age?: number): string {
    if(age) {
        return `${name}---${age}`
    }
    else {
        return `${name}---年龄保密`
    }
}

当调用：

getInfo("mike")

运行结果：

而当填入第二个参数时：

console.log(getInfo("mike", 15))

运行结果：

tips: 可选参数必须配置在参数列表的最后面。

3. 函数的默认参数

function getInfo(name:string, age: number=20): string {
    return `${name}---${age}`
}
console.log(getInfo("mike"))

运行结果：

4. 函数的剩余参数

类似其他语言的可变参数：

function sum(...result: number[]):number {
    return result.reduce((preValue, item)=>preValue+item)
}
console.log("sum", sum(1,2,3,4));

运行结果：

此外我们还可以取前面几个参数，然后后面的参数被分配到剩余参数中：

function sum(a: number, b: number,...result: number[]):number {
    console.log("first two number: ", a, b);
    return result.reduce((preValue, item)=>preValue+item)
}
console.log("sum", sum(1,2,3,4));

运行结果：

5. 函数的重载

function fun(name: string): string;
function fun(age: number): string;
function fun(val: any): any {
    if(typeof str === 'string'){
        return 'string类型：'+val;
    }
    else {
        return '我的年龄是：'+val;
    }
}

调用：

console.log(fun("Hello world"));
console.log(fun(18));

运行结果；

二、JavaScript中的类（ES5）

1. 在构造函数中定义成员变量和方法

function Person() {
  this.name = '张三';
  this.age = 15;
}

使用 new 关键字创建一个对象并打印：

var person = new Person();
console.log(person);

添加成员方法：

function Person() {
  this.name = '张三';
  this.age = 15;
  this.run = function() {
    console.log(this.name + '在奔跑');
  }
}

调用：

person.run();

2. 在原型链中定义变量和方法

Person.prototype.sex = "男";
Person.prototype.work = function() {
  console.log(this.name + "在工作");
}
var p = new Person();
p.work();

运行结果：

原型链上面的属性会被多个实例共享，而构造函数中的不会。

3. 静态方法

Person.getInfo = function() {
  console.log("我是静态方法")
}

调用方式：

Person.getInfo();

4. 类的继承

使用原型链+对象冒充的组合继承模式

• 对象冒充方式：

function Student() {
  Person.call(this);// 对象冒充实现继承，可以继承构造函数中定义的成员
}
let student = new Student();
student.run();

但这样无法继承原型链中定义的属性和方法。

• 原型链方式：

function Student() {
}
Student.prototype = new Person();
let student = new Student();
student.work();// 调用原型链中添加的方法

这种方式既可以继承构造函数中定义的成员，也可以继承原型链中定义的成员。

存在的问题：实例化子类的时候没法给父类传参。

• 组合继承模式：

function Student(name, age) {
  Person.call(this, name, age); // 1.对象冒充
}
Student.prototype = new Person(); // 2.原型链
let student = new Student("李四", 18);
student.work();// 调用原型链中添加的方法

三、 TypeScript中的类

1. 类的定义

class Person {
    name: string; // 属性
    constructor(n:string) {
        this.name = n;
    }
    run(): void {
        console.log(this.name + "在奔跑");
    }
}
var person = new Person("张三");
person.run();

可以看到，类的定义和 Java 、C++ 等语言基本相同，非常人性化。

2. 类的方法

class Person {
    ...
    getName():string {
        return this.name;
    }
    setName(name:string):void {
        this.name = name;
    }
}

3. 继承的实现

使用 extends 关键字：

class Student extends Person {
    constructor(name:string) {
        super(name);
    }
}
var student = new Student("李四");
student.run();

不得不说，这才是真正的 ”Java“Script吧？和 Java 代码相似度99%。

方法的重写（即Java中的Override）：

class Student extends Person {
  constructor(name:string) {
    super(name);
  }
  // 重写的方法
  run(): void {
    console.log(this.name + "在奔跑(学生)");
  }
}
var student = new Student("李四");
student.run();

4. 类中的修饰符

• public
• protected
• private

作用与 C++ 和 Java 等中的作用一致。

tips：属性如果不添加修饰符，默认是 public

5. 静态属性和静态方法

class Person {
 // ...
 // 静态属性
 protected static personNum:number = 0;
 constructor(n:string) {
   this.name = n;
   Person.personNum++;
 }
 // ...
 // 静态方法
 static printPersonNum():void {
   console.log(Person.personNum);
 }
}

示例：

var p1 = new Person("张三");
var p2 = new Person("李四");
var p3 = new Person("王五");
Person.printPersonNum();

6. 抽象类的定义

语法：

abstract class 类名{
	abstract 抽象方法名(): 返回值类型 {
    ...
  }
  ...
}

7. 接口的定义

属性接口

语法

interface 接口名 {
    接口中包含的属性...
}

示例：

// 属性接口
interface FullName {
    firstName: string;
    lastName: string;
}
// 使用
function printName(fullName: FullName) {
    console.log(`${fullName.firstName}--${fullName.lastName}`);
}
let obj = {
    age: 15,
    firstName: "mike",
    lastName: "smith"
}
printName(obj);

即约束了传入的对象必须包含接口所规定的参数。

运行结果：

接口的可选属性

语法和可选参数相同，既是在变量名后面加上 ?：

interface FullName {
    firstName: string;
    lastName?: string;
}

使用接口语法模拟封装ajax请求的参数对象：

interface Config {
    type: string;
    url: string;
    data?: string;
    dataType: string;
}
function ajax(config: Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type, config.url, true);
    xhr.send(config.data);
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState==4 && xhr.status == 200){
            console.log("成功");
        }
    }
}

可见使用接口可以很方便地使IDE为我们提供输入参数的类型提示，与 JavaScript 中需要翻看文档形成鲜明的对比。

函数类型接口

interface encrypt {
    (key:string, val:string) : string;
}
var md5:encrypt = function(key:string, value:string) {
    return "使用md5加密后的字符串";
}
var sha1:encrypt = function(key:string, value:string) {
    return "使用sha1加密后的字符串";
}

可索引接口

对数组的约束

interface nameArr {
    [index: number]:string
}
let nameList: nameArr = ["mike","Jack","Sam"];

对对象的约束

interface strMap {
    [index: string]:string;
}
var map:strMap = {
    "mike": "[email protected]",
    "Jack": "[email protected]"
}

类类型接口

和 Java 的接口比较类似，TypeScript 的接口多了属性约束，并使用 implements 关键字来实现接口：

interface Animal {
    name: string;
    eat(food:string):void;
}
class Dog implements Animal {
    name: string;
    constructor(name:string) {
        this.name = name;
    }
    eat(food: string): void {
        console.log(`小狗${this.name}吃${food}`)
    }
}

8. 接口的继承

interface Workable extends Animal {
    work():void;
}