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() // 调用静态方法