TypeScript入门学习(四):TypeScript 类与接口

TypeScript 类与接口

类定义

class使用关键字 class 声明。

class Person {
  name: string;
  constructor(name: string) {    
     this.name = name; 
  }
  run(): void {    
     console.log(this.name);  
  }
}
const p = new Person('star');
p.run(); // star

类继承 extends

在实现继承时,子类构造函数中必须调用 super 方法。

class Student extends Person {
  constructor(name: string) {   
    // 必须调用    
    super(name);  
  }
}
const stu = new Student('king');
stu.run(); // king

类的修饰符

TypeScript 中定义属性时提供了三种修饰符:

  • public:公有的, 在类里面、子类、类外部都可以访问。
  • protected:受保护的, 在类里面、子类里面可以访问,类外部不可以访问。
  • private:私有的,只能在类里面访问,子类和类外部不可以访问。
    属性不加修饰符时,默认就是公有的(public)。

类的静态方法和静态属性

class Person {  
  name: string;  
  // 静态属性 
  static sex: string;
  constructor(name: string) {    
    this.name = name;  
  }
  
  run(): void {   
   console.log(this.name);
  }
  
  static work(): void {   
   console.log('静态方法!'); 
  }
}

Person.work(); // 静态方法!

在静态方法里面无法直接调用类的非静态属性,可以调用类的静态属性。

抽象类和多态

TypeScript 中的抽象类是提供其他类继承的基类,不能直接被实例化。使用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不能直接实现并且必须在派生类中实现。抽象方法必须放在抽象类中。
多态:子类继承父类的方法,并在方法中有不同的表现。

abstract class Animal {  
  // 抽象的方法  
  abstract eat(): void;
}

class Dog extends Animal {
  eat(): void {    
    console.log('Dog eat'); 
  }
}

接口

接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范。在程序设计里,它起到了一种限制和规范的作用。TypeScript 中的接口类似于 Java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。

属性接口

属性接口其实是对 JSON 的约束。

interface FullName {  
  firstName: string;  
  secondName: string;
}

function printNameInfo(fullname: FullName) {  
  console.log(`${fullname.firstName}---${fullname.secondName}`);
}
// 正确
printNameInfo({secondName: 'zheng', firstName: 'star'});

// 错误
printNameInfo({secondName: 'zheng', firstName: 'star', age: 20});

// 正确
const obj = {secondName: 'zheng', firstName: 'star', age: 20};
printNameInfo(obj);

在传入的对象中必须包含 FullName 接口中的属性,参数顺序可以不一样。
属性接口也可以设置成可选属性接口,只需在属性后面加上 ‘?’:

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

function printNameInfo(fullname: FullName) {  
  console.log(`${fullname.firstName}---${fullname.secondName}`);
}
printNameInfo({firstName: 'star'});

函数类型接口

函数类型接口时对函数的传入参数以及返回值进行约束。

interface encrypt {  
  (key: string, value: string): string;
}

const foo : encrypt = function(key: string, value: string): string {
  return key + '=' + value;
}
console.log(foo('name', 'star'));

可索引接口

可索引接口一般用于对数组和对象的约束,但是一般很少用。

// 对数组进行约束
interface Foo {  
  [index: number]: string;
}
const fooArr : Foo = ['ww', 'ee'];
console.log(fooArr[0]);
// 对对象的约束
interface Foo {  
  [index: string]: string;
}
const fooObj : Foo = {name: 'star', shortName: 'gg'};
console.log(fooObj.shortName); // gg

索引签名的名称(如:{ [index: string]: string } 里的 index )除了可读性外,并没有任何意义。例如:如果有一个用户名,你可以使用 { username: string}: string },这有利于下一个开发者理解你的代码。

类类型接口

类类型接口是对类的约束,它是对属性接口和函数型接口的结合。

interface Animal {  
  name: string;
  eat(food: string): void;
}

// Dog 类实现 Animal 接口,对 Dog 类进行约束
class Dog implements Animal {
  name: string;      
  eat(food: string): void {    
    console.log(`Dog eat ${food}`)  
  }
}
const dog = new Dog();
dog.eat('bone'); // Dog eat bone```
#### 接口扩展
接口可以继承接口。
```ts
interface Animal {  
  eat(food: string): void;
}

interface Person extends Animal {  
  work(): void;
}
class Worker implements Person {
  work(): void {   
  
  } 
  eat(food: string): void {    
  
  }
}
发布了89 篇原创文章 · 获赞 79 · 访问量 17万+

猜你喜欢

转载自blog.csdn.net/oschina_41790905/article/details/97554591