第四节：TypeScipt类、接口、枚举类型详解
一. ts类详解
1. 类的定义
class Person { // 属性 name: string age: number // 构造函数 constructor(name: string, age: number) { this.name = name; this.age = age; } // 普通方法 eating() { console.log(`${this.name}[${this.age}岁], is eating`); } } // 调用 const p=new Person('ypf',18); console.log(p.name); console.log(p.age); p.eating();
2. 类的继承
通过extends关键字继承父类
// 1.父类 class Person { // 属性 name: string = '' age: number = 0 // 构造函数 constructor(name: string, age: number) { this.name = name; this.age = age; } // 普通方法 eating() { console.log(`${this.name}[${this.age}岁], is eating`); } } // 2. 子类 // 通过extends关键字继承父类 class Student extends Person { sno: number = 0 constructor(name: string, age: number, sno: number) { super(name, age); this.sno = sno; } studying() { console.log(`姓名为：${this.name},年龄为:${this.age},学号为:${this.sno} 正在学习中....`) } } // 调用 const student = new Student('ypf', 18, 1001); student.studying();
3. 类的多态
class Animal { action() { console.log("animal action") } } class Dog extends Animal { action() { console.log("dog running!!!") } } class Fish extends Animal { action() { console.log("fish swimming") } } class Person extends Animal { } // animal: dog/fish // 多态的目的是为了写出更加具备通用性的代码 function makeActions(animals: Animal[]) { animals.forEach(animal => { animal.action() }) } makeActions([new Dog(), new Fish(), new Person()])
4. 成员修饰符
(1). 在TypeScript中，类的属性和方法支持三种修饰符： public、private、protected
public 修饰的是在任何地方可见、公有的属性或方法，默认编写的属性就是public的；
private 修饰的是仅在同一类中可见、私有的属性或方法；
protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法；
(2). 只读属性readonly
如果有一个属性我们不希望外界可以任意的修改，只希望确定值后直接使用，那么可以使用readonly
class Person { // 属性 public name: string private age: number protected sex: string readonly address: string // 普通方法 eating() { console.log(`${this.name}[${this.age}岁], is eating`); } }
5. get和set
一些私有属性我们是不能直接访问的，或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这个时候我们可以使用存取器。
class Person { private _name: string constructor(name: string) { this._name = name } // 访问器 // set set name(newName) { this._name = newName } // get get name() { return this._name } } const p = new Person("why") p.name = "ypf" console.log(p.name)
6. 静态成员static
//普通类+静态成员 class Student{ static time:string='12:28' static getMsg(){ console.log('学习中....') } } // 调用 console.log(Student.time); Student.getMsg();
7. 抽象类abstract
(1). 特点：
抽象类是不能被实例的话（也就是不能通过new创建）
抽象方法必须被子类实现，否则该类必须是一个抽象类；
(2). 关键字： abstract
abstract class Shape { abstract getArea(): number } class Rectangle extends Shape { private width: number private height: number constructor(width: number, height: number) { super() this.width = width this.height = height } getArea() { return this.width * this.height } } const rectangle = new Rectangle(20, 30) console.log(rectangle.getArea())
8. 类的类型
类本身也是可以作为一种数据类型的.
class Person { name: string = "123" eating() {} } const p = new Person() const p1: Person = { name: "why", eating() { } } function printPerson(p: Person) { console.log(p.name) } printPerson(new Person()) printPerson({ name: "ypf", eating: function () { } })
二. ts接口详解
1. 对象类型
// 在其中可以定义可选类型，也可以定义只读属性 interface IInfoType { readonly name: string age: number friend?: { name: string } } const info: IInfoType = { name: "why", age: 18, friend: { name: "kobe" } } console.log(info.friend?.name) console.log(info.name)
2. 索引类型
// 声明接口为索引类型 interface IndexLanguage { [index: number]: string } const frontLanguage: IndexLanguage = { 0: "HTML", 1: "CSS", 2: "JavaScript", 3: "Vue" } interface ILanguageYear { [name: string]: number } const languageYear: ILanguageYear = { "C": 1972, "Java": 1995, "JavaScript": 1996, "TypeScript": 2014 }
3. 函数类型
// 函数类型 interface ICalcFn { (n1: number, n2: number): number } function calc(num1: number, num2: number, calcFn: ICalcFn) { return calcFn(num1, num2) } const add: ICalcFn = (num1, num2) => { return num1 + num2 } console.log(calc(20, 30, add))
4. 接口的继承
接口和类一样是可以进行继承的，也是使用extends关键字：并且我们会发现，接口是支持多继承的（类不支持多继承）
interface ISwim { swimming: () => void } interface IFly { flying: () => void } interface IAction extends ISwim, IFly { } const action: IAction = { swimming() { }, flying() { } }
5. 交叉类型
// 一种组合类型的方式: 联合类型 type WhyType = number | string type Direction = "left" | "right" | "center" // 另一种组件类型的方式: 交叉类型 type WType = number & string interface ISwim { swimming: () => void } interface IFly { flying: () => void } type MyType1 = ISwim | IFly type MyType2 = ISwim & IFly const obj1: MyType1 = { flying() { } } const obj2: MyType2 = { swimming() { }, flying() { } }
6. 接口的实现
// 接口的实现 interface ISwim { swimming: () => void } interface IEat { eating: () => void } // 类实现接口 class Animal { } // 继承: 只能实现单继承 // 实现: 实现接口, 类可以实现多个接口 class Fish extends Animal implements ISwim, IEat { swimming() { console.log("Fish Swmming") } eating() { console.log("Fish Eating") } } class Person implements ISwim { swimming() { console.log("Person Swimming") } } // 编写一些公共的API: 面向接口编程 function swimAction(swimable: ISwim) { swimable.swimming() } // 1.所有实现了接口的类对应的对象, 都是可以传入 swimAction(new Fish()) swimAction(new Person()) swimAction({ swimming: function () { } })
7. interface和type的区别
(1). 我们会发现interface和type都可以用来定义对象类型，那么在开发中定义对象类型时，到底选择哪一个呢？
如果是定义非对象类型，通常推荐使用type，比如Direction、Alignment、一些Function；
(2). 如果是定义对象类型，那么他们是有区别的：
A. interface 可以重复的对某个接口来定义属性和方法；
B. type定义的是别名，别名是不能重复的；
interface IFoo { name: string } interface IFoo { age: number } const foo: IFoo = { name: "why", age: 18 } // 下面代码报错 // type IBar = { // name: string // age: number // } // type IBar = { // }
8. 字面量赋值
因为TypeScript在字面量直接赋值的过程中，为了进行类型推导会进行严格的类型限制。 但是之后如果我们是将一个 变量标识符 赋值给其他的变量时，会进行freshness擦除操作。
interface IPerson { name: string age: number height: number } const info = { name: "why", age: 18, height: 1.88, address: "广州市" } // freshness擦除 const p: IPerson = info console.log(info) console.log(p)
三. ts枚举详解
1. 说明
枚举类型是为数不多的TypeScript特性有的特性之一：
枚举其实就是将一组可能出现的值，一个个列举出来，定义在一个类型中，这个类型就是枚举类型；
枚举允许开发者定义一组命名常量，常量可以是数字、字符串类型；
enum Direction { LEFT, RIGHT, TOP, BOTTOM } function turnDirection(direction: Direction) { switch (direction) { case Direction.LEFT: console.log("改变角色的方向向左") break; case Direction.RIGHT: console.log("改变角色的方向向右") break; case Direction.TOP: console.log("改变角色的方向向上") break; case Direction.BOTTOM: console.log("改变角色的方向向下") break; default: const foo: never = direction; break; } } turnDirection(Direction.LEFT) turnDirection(Direction.RIGHT) turnDirection(Direction.TOP) turnDirection(Direction.BOTTOM)
2. 其它
枚举类型默认是有值的，比如上面的枚举，默认值是这样的： 当然，我们也可以给枚举其他值： 这个时候会从100进行递增； 我们也可以给他们赋值其他的类型：
enum Direction { LEFT = "LEFT", RIGHT = "RIGHT", TOP = "TOP", BOTTOM = "BOTTOM" } let name: string = "abc" let d: Direction = Direction.BOTTOM function turnDirection(direction: Direction) { console.log(direction) switch (direction) { case Direction.LEFT: console.log("改变角色的方向向左") break; case Direction.RIGHT: console.log("改变角色的方向向右") break; case Direction.TOP: console.log("改变角色的方向向上") break; case Direction.BOTTOM: console.log("改变角色的方向向下") break; default: const foo: never = direction; break; } } turnDirection(Direction.LEFT) turnDirection(Direction.RIGHT) turnDirection(Direction.TOP) turnDirection(Direction.BOTTOM)
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
