TypeScript 类

面向对象是一种对现实世界理解和抽象的方法。

TypeScript 是一种面向对象的编程语言,支持基于类的面向对象编程。

面向对象主要有两个概念:对象和类。

对象:对象是类的一个实例,有状态和行为。例如,一个student是一个对象,他的状态有:年纪、名字、性别;行为有:说话、上课等。
类:类是一个模板,它描述一类对象的行为和状态。
方法:方法是类的操作的实现步骤。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性,比如 类、接口等。

定义

TypeScript 类定义方式如下:

class class_name { 
    // 类作用域
}

定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):

字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

构造函数 − 类实例化时调用,可以为类的对象分配内存。

方法 − 方法为对象要执行的操作。

注意:类和接口可以一起共作,可以自行决定抽象的级别。

在构造函数的参数上使用 public 等同于创建了同名的成员变量。

实例

index.html 文件:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>typescript demo</title>
</head>
<body>
 	<script src="hello.js"></script>
</body>
</html>

hello.ts文件:

class Rectangle {
    area: number;
    color: string;

    constructor (name: string, width: number, height: number){
    	this.area = width * height
    	this.color = 'red';
    }

    sayHi() {
        return 'I am ' + this.name  + ' the color is '+ this.color + ' the area is ' + this.area + ' cm squares.'
    }
}
var rec = new Rectangle('suq',50,60); 
console.log('rec.sayHi()', rec.sayHi());
console.log('rec.area', rec.area);
console.log('rec.name', rec.name);
console.log('rec.width', rec.width);
console.log('rec.height', rec.height);
console.log('rec.color', rec.color);

以上创建了一个Rectangle类, 类中有两个属性 areacolor,一个构造器 (constructor()), 一个方法是 sayHi()

接下来,打开命令行,使用 tsc 命令编译 hello.ts 文件:

$ tsc hello.ts

编译文件时会报一些错误,如下:

hello.ts:11:31 - error TS2339: Property 'name' does not exist on type 'Rectangle'.

11         return 'I am ' + this.name  + 'the color is '+ this.color + 'the area is ' + this.area + ' cm squares.'
                                 ~~~~

hello.ts:17:29 - error TS2339: Property 'name' does not exist on type 'Rectangle'.

17 console.log('rec.name', rec.name);
                               ~~~~

hello.ts:18:30 - error TS2339: Property 'width' does not exist on type 'Rectangle'.

18 console.log('rec.width', rec.width);
                                ~~~~~

hello.ts:19:31 - error TS2339: Property 'height' does not exist on type 'Rectangle'.

19 console.log('rec.height', rec.height);
                                 ~~~~~~


Found 4 errors in the same file, starting at: hello.ts:11

原因是:构造器中参数 (name, width 和 height) 的作用域是局部变量,所以编译以上文件,在浏览器中会输出错误。

此时,在相同目录下就会生成一个 hello.js 文件,项目结构:

typescript-demo
  |- /src
    |- hello.js
    |- hello.ts

然后,打开 index.html,虽然构建报错,但是仍然可以看到如下打印信息:

typescript类型保护 typescript 类类型_javascript

修饰符

接下来,添加 publicprivate 访问修饰符。

Public 成员可以在任何地方访问, private 成员只允许在类中访问。

修改以上代码,将 color 声明为 private,构造函数的参数 name 声明为 public:
hello.ts文件:

class Rectangle {
    area: number;
    private color: string;

    constructor (public name: string, width: number, height: number){
    	this.area = width * height
    	this.color = 'red';
    }

    sayHi() {
    	console.log('this.color',this.color)
        return 'I am ' + this.name  + ' the color is '+ this.color + ' the area is ' + this.area + ' cm squares.'
    }
}
var rec = new Rectangle('suq',50,60); 
console.log('rec.sayHi()', rec.sayHi());
console.log('rec.area', rec.area);
console.log('rec.name', rec.name);
console.log('rec.width', rec.width);
console.log('rec.height', rec.height);
console.log('rec.color', rec.color);

重新编译文件:

hello.ts:19:30 - error TS2339: Property 'width' does not exist on type 'Rectangle'.

19 console.log('rec.width', rec.width);
                                ~~~~~

hello.ts:20:31 - error TS2339: Property 'height' does not exist on type 'Rectangle'.

20 console.log('rec.height', rec.height);
                                 ~~~~~~

hello.ts:21:30 - error TS2341: Property 'color' is private and only accessible within class 'Rectangle'.

21 console.log('rec.color', rec.color);
                                ~~~~~


Found 3 errors in the same file, starting at: hello.ts:19

由于 color 成员变量设置了 private,所以会出现以下信息:

hello.ts:21:30 - error TS2341: Property 'color' is private and only accessible within class 'Rectangle'.

21 console.log('rec.color', rec.color);

可以看到,name 在类的外部可以访问,并没有报错。

打开 index.html,看到如下打印信息:

typescript类型保护 typescript 类类型_前端_02

参考文档:

https://www.runoob.com/w3cnote/getting-started-with-typescript.htmlhttps://www.runoob.com/typescript/ts-tutorial.htmlhttps://www.tslang.cn/