一起入手TypeScript（三）

一起入手TypeScript（四）

·(已编辑)··

200

阅读·

喜欢

这篇文章上次修改于，可能部分内容已经不适用，如有疑问可询问作者。

关键洞察

AI · GEN

10 TypeScript 类的概念和使用

TypeScript 中类的概念和 ES6 中原生类的概念大部分相同，但是也额外增加了一些新的特性。我在这里会完全从一个新手的角度，讲解类的各项知识点。

10.1 类的基本使用

新建一个文件，叫做demo10.ts,然后定义一个最简单的Lady类,这里要使用关键字class,类里边有姓名属性和一个得到姓名的方法

CodeBlock Loading...

代码下面的注释的意思是：运行ts-node demo10.ts命令，得到的结果是：Hi，帅哥

这是一个最简单的类了，如果你有些编程经验，对这个一定很熟悉

10.2 类的继承

TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends,比如我们这里新建一个xiaoJieJie的类，然后继承自Lady类，在XiaoJieJie类里写一个新的方法，叫做sayLove,具体代码如下。

CodeBlock Loading...

类写好以后，我们声明的对象是xiaoJieJie这个类，我们同时执行sayHello()和sayLove()都是可以执行到的，这说明继承起作用了

10.3 类的重写

讲了继承，那就必须继续讲讲重写，重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJies这个类里重写父类的sayHello()方法

CodeBlock Loading...

10.4 super 关键字的使用

比如我们还是想使用Lady类中说的话，但是在后面，加上你好两个字就可以了。这时候就可以使用super关键字，它代表父类中的方法

CodeBlock Loading...

那么整个下来呢，我们至少要知道TypoeScript中的类是如何定义和继承的。类中还有很多知识点要讲

Demo10.ts

CodeBlock Loading...

11 TypeScript 中类的访问类型

上节已经简单学习了TypeScript中类的使用，这节我们继续学习一下类中的访问类型。其实类的访问类型就是基于三个关键词private、protected和public,也是三种访问类型

11.1 简单的类

我们来写一个简单的类先，我们定义一个 Person 类，然后使用这个类的对象，进行赋值，最后打印在控制台上。

CodeBlock Loading...

写完后我们直接可以在Terminal(中),输入ts-node demo11.ts进行查看结果，结果会打印出Wibus

11.2 public 访问属性

这时候可以打出Wibus是因为我们如果不在类里对name的访问属性进行定义，那么它就会默认是public访问属性。所以，我们刚刚所写的类相当于这样子

CodeBlock Loading...

public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.

比如说，我们在类里面写一个sayHello() 方法，访问属性为public

CodeBlock Loading...

这是的this.name就是类的内部调用。我们在下面在执行一下这个方法person3.sayHello(), 终端中可以看到一切正常运行了，顺利打印

11.3 private 访问属性

private 访问属性的意思是，只允许在类的内部被调用，外部不允许调用

现在我们把 name 属性改成private,这时候在类的内部使用不会提示错误，而外部,以及子类使用VSCode直接会报错。

CodeBlock Loading...

11.4 protected 访问属性

protected 允许在类内及继承的子类中使用

把name的访问属性换成protected,这时候外部调用name的代码会报错，内部的不会报错，和private一样。这时候我们再写一个Person_Person5类，继承于Person4

CodeBlock Loading...

那么通过这个例子相信你一定知道什么是类的内部和类的外部，也知道了三个访问类型的区别了

Demo11.ts

CodeBlock Loading...

12 TypeScript 类的构造函数

构造函数就是在类被初始化的时候，自动执行的一个方法。我们通过这个构造方法经常作很多需要提前完成的工作，比如显示页面前我们要从后台得到数据

12.1 类的构造函数

简单来说，构造函数的关键字就是constructor

新建一个 Person 类，类的里边定义一个name，但是name我们并不给他值,然后我们希望在new出对象的时候，直接通过传递参数的形式，给name赋值，并打印出来。这时候我们就需要用到构造函数了

CodeBlock Loading...

这是最常规和好理解的写法，那么既然都这么说了，就是有更简单的写法啦

12.1.1 简单的写法

CodeBlock Loading...

这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值，这是一种简化的语法

12.2 类继承中的构造器写法

普通类的构造器我们已经会了，在子类中使用构造函数需要用super()调用父类的构造函数，如果你看不懂我在说啥的话，看下面的代码

CodeBlock Loading...

如果你不写super('Wibus');的话，VSC将会报错：派生类的构造函数必须包含 "super" 调用。

当然你可以super(''); 直接过去😂

父类没有构造函数，子类也要使用super()进行调用，否则就会报错。

CodeBlock Loading...

这一节主要讲的就是类中的构造函数（也有叫构造器的），构造函数在工作中用的很多，所以你要学会并作充分的练习～

Demo12.ts

CodeBlock Loading...

10 TypeScript 类的概念和使用

TypeScript 中类的概念和 ES6 中原生类的概念大部分相同，但是也额外增加了一些新的特性。我在这里会完全从一个新手的角度，讲解类的各项知识点。

10.1 类的基本使用

新建一个文件，叫做demo10.ts,然后定义一个最简单的Lady类,这里要使用关键字class,类里边有姓名属性和一个得到姓名的方法

class Lady {
    content = "Hi，帅哥";
    sayHello() {
      return this.content;
    }
}
  
const goddess = new Lady();
console.log(goddess.sayHello());
// ts-node demo10.ts
//result：Hi，帅哥

CodeBlock Loading...

代码下面的注释的意思是：运行ts-node demo10.ts命令，得到的结果是：Hi，帅哥

这是一个最简单的类了，如果你有些编程经验，对这个一定很熟悉

10.2 类的继承

class xiaoJieJie extends Lady{
    sayLove(){
        return "I love you.";
    }
}

const Wibus = new xiaoJieJie();
console.log(Wibus.sayHello());
console.log(Wibus.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥 I love you.

CodeBlock Loading...

类写好以后，我们声明的对象是xiaoJieJie这个类，我们同时执行sayHello()和sayLove()都是可以执行到的，这说明继承起作用了

10.3 类的重写

讲了继承，那就必须继续讲讲重写，重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJies这个类里重写父类的sayHello()方法

class XiaoJieJies extends Lady {
    sayLove(){
        return "I love you.";
    }
    sayHello() {
        return "Hi, honey!";
      }
}

const wibus = new XiaoJieJies();
console.log(wibus.sayHello());
console.log(wibus.sayLove());
// ts-node demo10.ts
// result: Hi, honey! I love you.

CodeBlock Loading...

10.4 super 关键字的使用

比如我们还是想使用Lady类中说的话，但是在后面，加上你好两个字就可以了。这时候就可以使用super关键字，它代表父类中的方法

class Xiaojiejie extends Lady {
    sayLove() {
        return "I love you!";
      }
      sayHello() {
        return super.sayHello() + ".你好！";
      }
}

const goddesss = new Xiaojiejie();
console.log(goddesss.sayHello());
console.log(goddesss.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥.你好！I love you!

CodeBlock Loading...

那么整个下来呢，我们至少要知道TypoeScript中的类是如何定义和继承的。类中还有很多知识点要讲

Demo10.ts

/**
 * Demo10.ts
 * TypeScript 类的概念和使用
 * @date 2021-1-2
 * @author Wibus
 */

 // TypeScript 中类的概念和 ES6 中原生类的概念大部分相同，但是也额外增加了一些新的特性

// 1 类的基本使用
// 下面是最简单的类
class Lady {
    content = "Hi，帅哥";
    sayHello() {
      return this.content;
    }
}
  
const goddess = new Lady();
console.log(goddess.sayHello());
// ts-node demo10.ts
//result：Hi，帅哥

// 2 类的继承
// TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends,比如我们这里新建一个XiaoJieJie的类，然后继承自Lady类，在XiaoJieJie类里写一个新的方法，叫做sayLove,具体代码如下。

class xiaoJieJie extends Lady{
    sayLove(){
        return "I love you.";
    }
}

const Wibus = new xiaoJieJie();
console.log(Wibus.sayHello());
console.log(Wibus.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥 I love you.

// 类写好以后，我们声明的对象是XiaoJieJie这个类，我们同时执行sayHello()和sayLove()都是可以执行到的，这说明继承起作用了

// 3 类的重写
// 讲了继承，那就必须继续讲讲重写，重写就是子类可以重新编写父类里边的代码。现在我们在XiaoJieJie这个类里重写父类的sayHello()方法

class XiaoJieJies extends Lady {
    sayLove(){
        return "I love you.";
    }
    sayHello() {
        return "Hi, honey!";
      }
}

const wibus = new XiaoJieJies();
console.log(wibus.sayHello());
console.log(wibus.sayLove());
// ts-node demo10.ts
// result: Hi, honey! I love you.

// 4 super 关键字的使用
// 比如我们还是想使用Lady类中说的话，但是在后面，加上你好两个字就可以了。这时候就可以使用super关键字，它代表父类中的方法

class Xiaojiejie extends Lady {
    sayLove() {
        return "I love you!";
      }
      sayHello() {
        return super.sayHello() + ".你好！";
      }
}

const goddesss = new Xiaojiejie();
console.log(goddesss.sayHello());
console.log(goddesss.sayLove());
// ts-node demo10.ts
// result: Hi，帅哥.你好！I love you!

// 我们至少要知道TypoeScript中的类是如何定义和继承的。类中还有很多知识点要讲

CodeBlock Loading...

11 TypeScript 中类的访问类型

11.1 简单的类

我们来写一个简单的类先，我们定义一个 Person 类，然后使用这个类的对象，进行赋值，最后打印在控制台上。

class Person {
    name: string;
  }
  
const person = new Person();
person.name = "Wibus";
  
console.log(person.name);
// ts-node demo11.ts
// result: Wibus

CodeBlock Loading...

写完后我们直接可以在Terminal(中),输入ts-node demo11.ts进行查看结果，结果会打印出Wibus

11.2 public 访问属性

这时候可以打出Wibus是因为我们如果不在类里对name的访问属性进行定义，那么它就会默认是public访问属性。所以，我们刚刚所写的类相当于这样子

class Person2 {
    public name: string;
};

CodeBlock Loading...

public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.

比如说，我们在类里面写一个sayHello() 方法，访问属性为public

class Person3 {
    public name: string;
    public sayhello(){
        console.log(this.name + ' say hello');
    };
};
// ————————下面的是外部调用——————————
const person3 = new Person3;
person3.name = "Wibus";
person3.sayhello();
// ts-node demo11.ts
// result: Wibus say hello

CodeBlock Loading...

这是的this.name就是类的内部调用。我们在下面在执行一下这个方法person3.sayHello(), 终端中可以看到一切正常运行了，顺利打印

11.3 private 访问属性

private 访问属性的意思是，只允许在类的内部被调用，外部不允许调用

现在我们把 name 属性改成private,这时候在类的内部使用不会提示错误，而外部,以及子类使用VSCode直接会报错。

class Person4 {
    private name: string;
    private sayhello(){
        console.log(this.name + ' say hello');
    };
};

class Person_Person4 extends Person4 {
    public saySomeThing() {
        console.log(this.name); 
    }
}
//VSC Error: 属性“name”为私有属性，只能在类“Person4”中访问。
// ————————下面的是外部调用——————————
const person4 = new Person4;
person4.name = "Wibus";
person4.sayhello();
// VSC Error: 属性“sayhello”为私有属性，只能在类“Person4”中访问。

CodeBlock Loading...

11.4 protected 访问属性

protected 允许在类内及继承的子类中使用

class Person5 {
    protected name: string;
    protected sayhello(){
        console.log(this.name + ' say hello');
    };
};

class Person_Person5 extends Person5 {
    public sayBye(){
        return "this.name";
    }
}

// ————————外部调用——————————
const person5 = new Person5;
person5.name = "Wibus";
person5.sayhello();
// VSC Error: 属性“sayhello”受保护，只能在类“Person5”及其子类中访问。
// ————————Person_Person5 类 ——————
const person_person5 = new Person_Person5;
person_person5.sayBye(); //VSC 不报错

CodeBlock Loading...

那么通过这个例子相信你一定知道什么是类的内部和类的外部，也知道了三个访问类型的区别了

Demo11.ts

/**
 * Demo11.ts
 * TypeScript 中类的访问类型
 * @date 2021-1-3
 * @author Wibus
 */

// 上节已经简单学习了TypeScript中类的使用，这节我们继续学习一下类中的访问类型。其实类的访问类型就是基于三个关键词private、protected和public,也是三种访问类型

// 1 简单的类

class Person {
    name: string;
  }
  
const person = new Person();
person.name = "Wibus";
  
console.log(person.name);
// ts-node demo11.ts
// result: Wibus

// 2 public 访问属性
// 这时候可以打出Wibus是因为我们如果不在类里对name的访问属性进行定义，那么它就会默认是public访问属性。

// 相当于
class Person2 {
    public name: string;
};
// public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.
class Person3 {
    public name: string;
    public sayhello(){
        console.log(this.name + ' say hello');
    };
};
// ————————下面的是外部调用——————————
const person3 = new Person3;
person3.name = "Wibus";
person3.sayhello();
// ts-node demo11.ts
// result: Wibus say hello

// 3 private 访问属性
// private 访问属性的意思是，只允许在类的内部被调用，外部不允许调用

class Person4 {
    private name: string;
    private sayhello(){
        console.log(this.name + ' say hello');
    };
};

class Person_Person4 extends Person4 {
    public saySomeThing() {
        console.log(this.name); 
    }
}
//VSC Error: 属性“name”为私有属性，只能在类“Person4”中访问。
// ————————下面的是外部调用——————————
const person4 = new Person4;
person4.name = "Wibus";
person4.sayhello();
// VSC Error: 属性“sayhello”为私有属性，只能在类“Person4”中访问。


// 4 protected 访问属性
// protected 允许在类内及继承的子类中使用

class Person5 {
    protected name: string;
    protected sayhello(){
        console.log(this.name + ' say hello');
    };
};

class Person_Person5 extends Person5 {
    public sayBye(){
        return "this.name";
    }
}

// ————————外部调用——————————
const person5 = new Person5;
person5.name = "Wibus";
person5.sayhello();
// VSC Error: 属性“sayhello”受保护，只能在类“Person5”及其子类中访问。
// ————————Person_Person5 类 ——————
const person_person5 = new Person_Person5;
person_person5.sayBye(); //VSC 不报错

CodeBlock Loading...

12 TypeScript 类的构造函数

12.1 类的构造函数

简单来说，构造函数的关键字就是constructor

class Person{
    public name: string;
    constructor(name:string){
        this.name = name;
    };
};

const person = new Person('Wibus');
console.log(person.name);
// ts-node demo12.ts
// result: Wibus

CodeBlock Loading...

这是最常规和好理解的写法，那么既然都这么说了，就是有更简单的写法啦

12.1.1 简单的写法

class Person2 {
    constructor(public name:string){} // 这个地方的name需要写上访问属性
};

const person2 = new Person2('Wibus2');
console.log(person2.name);

CodeBlock Loading...

这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值，这是一种简化的语法

12.2 类继承中的构造器写法

普通类的构造器我们已经会了，在子类中使用构造函数需要用super()调用父类的构造函数，如果你看不懂我在说啥的话，看下面的代码

class Teacher extends Person2 {
    constructor(public age: number){
        super('Wibus');
    };
};

const teacher = new Teacher(18);
console.log(teacher.age);
console.log(teacher.name);

CodeBlock Loading...

如果你不写super('Wibus');的话，VSC将会报错：派生类的构造函数必须包含 "super" 调用。

当然你可以super(''); 直接过去😂

父类没有构造函数，子类也要使用super()进行调用，否则就会报错。

class Person3 {};

class Teacher2 extends Person3 {
    constructor(public age: number){
        super();
    };
};

const teacher2 = new Teacher2(18);
console.log(teacher2.age);

CodeBlock Loading...

这一节主要讲的就是类中的构造函数（也有叫构造器的），构造函数在工作中用的很多，所以你要学会并作充分的练习～

Demo12.ts

/**
 * Demo12.ts
 * TypeScript 类的构造函数
 * @date 2021-1-3
 * @author Wibus
 * 构造函数就是在类被初始化的时候，自动执行的一个方法。我们通过这个构造方法经常作很多需要提前完成的工作，比如显示页面前我们要从后台得到数据
 */

// 1 类的构造函数
//构造函数的关键字是constructor

class Person{
    public name: string;
    constructor(name:string){
        this.name = name;
    };
};

const person = new Person('Wibus');
console.log(person.name);
// ts-node demo12.ts
// result: Wibus
// 这是最常规和好理解的写法

// 1.1 简单的写法

class Person2 {
    constructor(public name:string){} // 这个地方的name需要写上访问属性
};

const person2 = new Person2('Wibus2');
console.log(person2.name);
// 这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值，这是一种简化的语法

// 2 类继承中的构造器写法
// 普通类的构造器我们已经会了，在子类中使用构造函数需要用super()调用父类的构造函数

class Teacher extends Person2 {
    constructor(public age: number){
        super('Wibus');
    };
};

const teacher = new Teacher(18);
console.log(teacher.age);
console.log(teacher.name);

// 父类没有构造函数，子类也要使用super()进行调用，否则就会报错。

class Person3 {};

class Teacher2 extends Person3 {
    constructor(public age: number){
        super();
    };
};

const teacher2 = new Teacher2(18);
console.log(teacher2.age);

// 主要讲的就是类中的构造函数（也有叫构造器的），构造函数在工作中用的很多，所以你要学会并作充分的练习。

CodeBlock Loading...