typescript测试之小试牛刀

TypeScript基于接口的强类型定义，能很好的弥补javascript语言的先天不足，并且遵循了es6标准，因此只要掌握了 TypeScript ，就相当于掌握了 JavaScript 语言的最新标准，并且能在老式浏览器上完整运行（先吹一波）。

1.变量定义

const test: string = 'nihao'; // 字符串
const aaa: number = 12121;   // 数字
const member: string[] = ['111', '222', '3333']; // 字符串类型的数组
console.log(member.toString()); // 111,222,3333

若不按给定的类型定义，将报错，如下：

const aaa: number = '12121';  
// 报错： Type '"12121"' is not assignable to type 'number'.

2.接口的使用

例1:

interface SuperHero {
    realName: String;
    superName: String;
}
const superman: SuperHero = {
  realName: 'spiderman',    // 需给出符合 SuperHero接口的数据类型的定义 
  superName: 'superman',
};
console.log(`${superman.realName} is a ${superman.superName}`);
// spiderman is a superman

例2:

interface SuperHero {
        realName: String;
        superName: String;
    }
// 定义一个 SuperHero类型的数组, SuperHero的值，需是符合SuperHero借口定义的对象。
const SuperHeroes: SuperHero[] = [];  
    SuperHeroes.push({
      realName: 'Ah way',
      superName: 'superman',
    });
console.log(`${SuperHeroes[0].realName} is a ${SuperHeroes[0].superName}`);
// Ah way is a superman

3.方法的使用：

例1:

// 定义一个接收两个number参数的方法，并返回数字类型的和
const getSum = function (num1: number, num2: number): number {    
  return num1 + num2;
};
const sum1 = getSum(2, 5); // 7

例2:

// 定义一个方法，其中num2 赋值为2, num3可不传或为number类型的参数
const getSum = function (num1: number, num2 = 2, num3?: number): number { 
  if (typeof num3 !== 'undefined') {
    return num1 + num2 + num3;
  }
  return num1 + num2;
};
const sum1 = getSum(5); // 7
const sum2 = getSum(5, 2, 1); // 8

例3:

// 定义一个方法，接收多个number的参数，并将所有参数整合为数组
const getSum = function (...nums: number[]): void { 
      const sum = nums.reduce((a, b) => a + b, 0);     
    };
getSum(5, 2, 1);  // 8

4.类继承接口的使用

// 定义一个有drive参数的Vehicle接口，其中drive可以是任意的数据类型
interface Vehicle {   
    drive: any;
}
class Car implements Vehicle {  // 定义一个Car继承Vehicle接口
    constructor(private wheels: number){} //构造器去接收wheels参数
    drive() : void { 
        console.log('this.wheels', this.wheels);
    }
}
var car = new Car(4); // 实例化一个Car对象
car.drive(); // this.wheels : 4

5.接收固定参数的方法

function GetType<T>(val: T): string {
  return typeof (val);
}
const testStr = 'test';
const testNum = 123;
GetType(testStr); // string
GetType(testNum); // number

6. 方法继承接口的使用

interface Vehicle {    
    drive: any;
}
class Car implements Vehicle { // 
    constructor(private wheels: number){}
    drive(): void {
        console.log('this.wheels', this.wheels);
    }
}
var car = new Car(4);
  
function GetWheels<w extends Vehicle> (veh: w): number {
    return veh.drive();
}
GetWheels(car); // this.wheels : 4

7. 接收固定参数的类

// 构造一个GenericNumber类，其中有add方法，接收一个参数，作为add方法参数的类型
class GenericNumber<T>{  
    add: (val1: T, val2: T) => T;
}
var aNumber = new GenericNumber<number>(); // new 一个GenericNumber类的实例，并定义add方法接收Number类型的参数
aNumber.add = function(x, y) {
    return x + y;
}
console.log(aNumber.add(5, 4));  // 9
console.log(aNumber.add('5', '4'));  // 报错 Argument of type '"5"' is not assignable to parameter of type 'number'.