初学 typescript(二)

50 阅读4分钟

typescript 联合类型

联合类型(Union Types)可以通过管道(|)将变量设置成多种类型,赋值时可以随时根据设置的类型来赋值。

注意:只能赋值指定的类型,如果赋值其他类型就会报错。

创建联合类型的语法格式如下:

Type1|Type2|Type3

实例:

声明一个联合类型

var val:string|number
val = 12;
val = 'hello'

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

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])
        }
    }
}

联合类型数组

我们也可以将数组声明为联合类型:

var arr:number[]|string[];
var i:number;
arr = [1,2,4];
arr = ['hello', 'world'];

typescript 接口

接口是一系列抽象方法的声明,是一些方法特征集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。

typescript 接口定义如下:

interface interface_name {

}

实例

以下实例中,我们定义了一个IPerson的接口,接着定义了一个变量 customer,它的类型是 IPerson。cunstomer 实现了接口 IPerson 的属性和方法。

interface IPerson {
    firstName: string,
    lastName: string,
    sayHi: () => string
}

var customer:IPerson = {
    firstName: 'Tom',
    lastName: 'Hanks',
    sayHi: () => {return 'hello world'}
}

console.log("Customer 对象")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())

需要注意接口不能转换为 JavaScript。它只是 TypeScript 的一部分。

联合类型和接口

以下实例演示了如何在接口中使用联合类型:

infterface RunOptions {
    program:string;
    commandline: string[]|string|(() => string)
}
// commandline 是字符串
var options:RunOptions = {program: 'test1', commandline: 'hello'}

// commandline 是字符串数组
options = {program: 'test1', commandline: ['hello', 'world']}

// commandline 是一个函数表达式
options = {program: 'test1', commandline: () => {return 'hello world'}}
var fn:any = options.commandline;
console.log(fn())

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型,索引值可以是数字或字符串。

设置元素为字符串类型:

interface nameList {
    [index:number]:string
}

// 类型一致,正确
var list2:nameList = ['hello', 'Tom', 'tanks'];
// 错误元素 2 不是 string 类型
// var list2:nameList = ['hello', 2, 'yes']
interface ages {
    [index:string]: number
}
var agelist:ages;
agelist['Tom'] = 16;   // 类型正确

// 类型错误,输出 error TS2322: Type '"google"' is not assignable to type 'number'
// agelist[2] = 'google';

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

typescript 允许接口继承多个接口。

继承使用关键字 extends

单接口继承语法格式:

Child_interface_name extends super_interface_name

多接口继承语法格式:

Child_interface_name extends super_interface_name, super_interface2_name, super_interface3_name, ..., super_interfaceN_name

继承的各个接口使用逗号 , 分隔。

单继承实列

interface Person {
    age:number
}

interface Musician extends Person {
    instrunment: string
}

var drummer = <Musician>{};
drummer.age = 27;
drummer.instrument = "Drums"

多继承实例

interface IParent1 {
    v1: number
}
interface IParent2 {
    v2: number
}

interface Child extends IParent1, IParent2 {};

var Iobj:Child = {v1: 12, v2: 23}

typescript 类

typescript 是面向对象的 JavaScript

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

typescript 支持面向对象的所有特征,比如类、接口等。

typescript 类定义方式如下:

class cass_name {
    // 类作用域
}

定义类的关键字为 class,后面紧跟类目,类可以包含一些几个模块(类的数据成员):

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

编译以上代码,得到以下 JavaScript 代码:

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

创建类的数据成员

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

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

此外还在类中定义了一个方法 disp()。

class Car {
    engine:string;
    constructor(engine:string) {
        this.engine = engine;
    }
    disp():void {
        console.log(this.engine)
    }
}

创建实例化对象 我们使用 new 关键词来实例化的对象,语法格式如下:

var objct_name = new class_name([ arguments ])

类实例化时会调用构造函数,例如:

var obj = new Car('engine 1');

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

// 访问属性
obj.field_name

// 访问方法
obj.function_name()

类的继承

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 {
    disp():void {
        console.log(this.Area)
    }
}

var obj = new Circle(123);
obj.disp()   // 123

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

class Root {
    str: string
}

class Child extends Root {}

// 多重继承,继承了Child 和 Root 类
class Left extends Child{}

var obj = new Left();
obj.str = 'hello';

继承类的方法重写

类继承猴,子类可以对父类的方法重写定义,这个过程称为方法的重写.

其中 super 关键字是父类的直接引用, 改关键字可以引用父类的属性和方法.

class PrinterClass {
    doOrint():void {
        console.log('父类的 doPrint() 方法')
    }
}

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

static 关键字

static 关键字用于定义类的数据成员(属性和方法) 为静态的,静态成员可以直接通过类名调用.

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