[TOC]
>[success] # TS -- 类
~~~
1.'TS' 中的类和'ES6' 的类整体一样的,有部分细节差异,比如'TS'中的类会
提供修饰符一类的,下面的案例会说明
2.面向对象编程的三大特点
2.1.'封装(Encapsulation)':将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要
(也不可能)知道细节,就能通过对外提供的接口来访问该对象,
2.2.'继承(Inheritance)':子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性。
2.3.'多态(Polymorphism)':由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。
~~~
>[danger] ##### 创建一个简单的ts类
~~~
1.和es6不同,下面的代码分成三个部分,第一部分定义的参数,第二部分构造
函数,第三个部分就是 类的方法
~~~
~~~
class Point{
public x:number
public y:number
constructor(x:number,y:number){
this.x = x
this.y = y
}
public getPosition(){
return `(${this.x},${this.y})`
}
}
const point = new Point(2,3)
console.log(point.getPosition()) // (2,3)
~~~
>[danger] ##### 继承
~~~
1.'TS' 的继承和'ES6' 的继承写法和特性也相似都是使用'extends'
2.继承的子类也有'super()'
~~~
~~~
class Parent {
public name: string
constructor(name: string) {
this.name = name
}
}
class Child extends Parent {
constructor(name: string) {
super(name)
}
}
~~~
>[info] ## public / private / protected-- 公共/私有/受保护的
~~~
1.public 修饰的是在任何地方可见、公有的属性或方法;
2.private 修饰的是仅在同一类中可见、私有的属性或方法;
3.protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法
~~~
>[danger] ##### public -- 公共
~~~
1.一些强类型语言是必须要写这些修饰符的,在'TS'默认是'public',也就是说
'public' 修饰的是可以省略的
2.通过 "super" 关键字只能访问基类的公共方法和受保护方法
,属性是无法访问的
~~~
~~~
class Parent {
public age: number
constructor(age: number) {
this.age = age
}
}
class Child extends Parent {
constructor(age: number) {
super(age)
// console.log(super.age) // 错误提示 :通过 "super" 关键字只能访问基类的公共方法和受保护方法
}
}
const child = new Child(19)
~~~
>[danger] ##### private -- 私有的
~~~
1.当成员被标记成private时,它就不能在声明它的类的外部访问,简单的说,只有
自己的class内部可以访问,即使是自己的'实例','继承的子类' 都无法访问被'private'
修饰的内容
~~~
~~~
class Parent {
private name: string
constructor(name: string) {
this.name = name // 我能调用private修饰的
}
public getName(){
return `我的名字${this.name}` // 我能调用private修饰的
}
}
class Child extends Parent{
constructor(name:string){
super(name)
}
getTest(){
console.log(this.name) // 儿子也不让用 错误提示:属性“name”为私有属性,只能在类“Parent”中访问。
}
}
const son = new Parent('wang')
// son.name = "ss" // 提示错误:属性“name”为私有属性,只能在类“Parent”中访问。
console.log(son.getName()) // 可以访问,打印结果:我的名字wang
const child = new Child('wang')
// child.getTest() // 这里是错误的 因为Child 类也无法使用继承父类的私有熟悉或者方法
~~~
* 私有属性修饰在构造函数
~~~
1.是无法创建实例的,但是可以通过静态方法变相创建实例
~~~
~~~
class Student extends Person {
private constructor (name: string, age: number) {
super(name, age)
console.log(this.gender)
}
static create (name: string, age: number) {
return new Student(name, age)
}
}
const tom = new Person('tom', 18)
console.log(tom.name)
~~~
>[danger] ##### protected -- 受保护的(可以用来禁止创建实例)
~~~
1.修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许
被访问的,简单的 说'子类是可以访问protected 修饰的' 实例是不可以的
2.修饰的是'constructor' 则当前类不能创建实例
3.使用protected 不能直接创建'对象使用属性',和private不同他可以在子类中使用,相同点都可以
在自身定义类中使用
~~~
~~~
class Parent {
// private age: number
protected age: number
protected constructor(age: number) {
this.age = age
}
protected getAge() {
return this.age
}
}
// 解释第三条
// const p = new Parent(18) //protected 修饰constructor不能创建实例 报错提示:类“Parent”的构造函数是受保护的,仅可在类声明中访问。
class Child extends Parent {
constructor(age: number) {
console.log(super.getAge()) // 可以访问父类中的protected方法
}
}
const child = new Child(19)
~~~
>[info] ## 其他特性
>[danger] ##### readonly -- 只读属性
~~~
1.你可以使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
~~~
~~~
class Octopus {
public readonly name: string;
public readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.
~~~
>[danger] ##### 参数属性
-- 在参数前加修饰符自动帮我们创建this属性
~~~
1.在'constructor' 的参数中加修饰符,相当于省略了下面的代码注释部分
~~~
~~~
class A {
// public name:string
constructor(public name: string) {
// this.name = name
}
}
const a1 = new A('lison')
console.log(a1.name)
~~~
>[danger] ##### 静态属性 -- static修饰
~~~
1.和'es6'一样'ts' 也有静态'方法',但是'ts' 提供了 静态属性,属性和方法都是'static' 修饰
2.左右也是一样的只能类来使用静态属性
~~~
~~~
class Parent {
public static getAge() {
return Parent.age
}
private static age: number = 18
constructor() {}
}
const p = new Parent()
// console.log(p.age) // age 是静态的属性 所以实例是不能访问的
// console.log(Parent.age) // 虽然有了类但是也是不能访问的,因为用了private修饰用public可以访问
~~~
>[danger] ##### 类选填属性 -- '?'
~~~
1.被标记的选填属性如果不填则'undefined'
~~~
~~~
class Info {
public name: string
public age?: number
constructor(name: string, age?: number, public sex?: string) {
this.name = name
this.age = age
}
}
const info1 = new Info('lison')
console.log(info1) // {sex: undefined, name: "lison", age: undefined}
const info3 = new Info('lison', 18)
console.log(info3) // {sex: undefined, name: "lison", age: 18}
const info4 = new Info('lison', 18, 'man')
console.log(info4) // {sex: "man", name: "lison", age: 18}
~~~
>[danger] ##### 也支持es6 --getter /setter
~~~
1.下面案例来自官网
~~~
~~~
let passcode = "secret passcode";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
~~~
>[danger] ##### 抽象类abstract
~~~
1.抽象类是不允许被实例化的
2.继承抽象类的类必须去实现实例中的抽象类中的'抽象方法'和'抽象属性'
3.http://www.importnew.com/12399.html
~~~
~~~
abstract class People {
public sex:string
public abstract _name: string
public constructor(sex){
this.sex = sex
}
abstract get insideName(): string
abstract set insideName(value: string)
abstract speak(word:string):string
getSex(){
return this.sex
}
}
class P extends People {
public _name: string
public insideName: string
constructor(_name:string,sex:string){
super(sex)
this._name =_name
this.insideName = this.insideName
}
speak(word:string):string {
return word
}
}
~~~
>[danger] ##### 接口 和类
~~~
1.接口可以多继承,抽象类不行
~~~
~~~
interface FoodInterface {
type: string
}
class FoodClass implements FoodInterface {
public type: string
}
class A {
protected name: string
}
interface I extends A {}
class B extends A implements I {
public name: string
}
~~~
>[danger] ##### 接口配合类
~~~
1.接口 的作用是配合不同类,但是他们具有相同约束,下面为例 人和动物是两个类,
但是他们有相同的行为可以通过接口提取出来,下面的例子不太准确表示的,人属于动物类
的动物是可以做人的父类,但是如果是两个毫无相关且有同样行为的类就可以尝试用接口进行约束
~~~
~~~
interface Eat {
eat (food: string): void
}
interface Run {
run (distance: number): void
}
class Person implements Eat, Run {
eat (food: string): void {
console.log(`优雅的进餐: ${food}`)
}
run (distance: number) {
console.log(`直立行走: ${distance}`)
}
}
class Animal implements Eat, Run {
eat (food: string): void {
console.log(`呼噜呼噜的吃: ${food}`)
}
run (distance: number) {
console.log(`爬行: ${distance}`)
}
}
~~~
>[danger] ##### 定义一个类创建实例为参数
~~~
1.使用 new()=> 类 ,来规定传入的是一个类作为参数
~~~
~~~
const create = <T>(c:new()=>T):T=>{
return new c()
}
class Infos{
public age:number
constructor(){
this.age = 1
}
}
create(Infos)
~~~
- TypeSprict -- 了解
- TS-- 搭建(一)webpack版本
- TS -- 搭建(二)直接使用
- TS -- 基本类型
- ts -- 类型推导和字面量类型
- ts -- 类型扩展和类型缩小
- ts -- any场景
- ts -- 使用unknown 还是 any
- ts -- any/never/unknown
- ts -- 断言
- ts -- 类型大小写疑惑
- ts -- 数组类型 [] 还是泛型疑惑
- TS -- 枚举
- 外部枚举
- TS -- 函数
- ts -- 重载作用
- ts -- 05 this is
- 解构
- TS -- 接口
- 绕过接口的多余参数检查
- Interface 与 Type 的区别
- TS -- 类
- ts -- 类作为类型
- TS -- 交叉和联合 类型
- ts -- 交叉类型
- ts -- 联合类型
- ts -- 交叉和联合优先级
- ts -- 类型缩减
- TS -- 什么是泛型
- ts -- 泛型函数表达式/函数别名/接口
- ts -- 泛型类
- ts -- extends 泛型约束
- ts -- 泛型new
- ts -- Ts的泛型
- TS -- 缩小类型详解类型守卫
- TS -- 类型兼容性
- TS -- 命名空间与模块化
- ts -- 模块化
- ts -- 命名空间
- TS -- 工具方法
- Record -- 一组属性 K(类型 T)
- Exclude -- 从联合类型中去除指定的类
- Extract -- 联合类型交集
- NonNullable -- 从联合类型中去除 null 或者 undefined
- Partial -- 将所有属性变为可选
- Required -- 所有属性变为必填
- Readonly -- 所有属性只读
- Pick -- 类型中选取出指定的键值
- Omit -- 去除指定的键值