一、概述：

1.类的创建：使用class 关键字定义一个类；

1 class Persion{
2

2.对象中主要包含了两个部分：

  • 属性
  • 方法

3.属性可以分为：静态属性和实例属性；

  1. 直接定义的属性是实例属性，需要通过对象的实例去访问；定义属性(实例属性，即new了实例per,才能看到属性)；
  2. 定义静态属性（可以直接通过类去访问），在属性前使用static关键字可以定义静态属性；

4.方法可以分为：静态方法和实例方法；

同上；

5.readonly关键字 ：

在属性前面加了readonly关键字，则该属性只能查看，不能修改；

二、在代码中的使用。

01_class.ts文件：

1 class Persion{
 2     /**
 3      * 直接定义的属性是实例属性，需要通过对象的实例去访问
 4      * 可以通过实例可以访问，也可以修改（如果加了readonly 则只能访问，不能修改）
 5      */
 6     //定义属性(实例属性，即new了实例per,才能看到属性)
 7     readonly name:string ="joy";
 8     age:number=18;
 9 
10     //定义静态属性（可以直接通过类去访问）
11     //在属性前使用static关键字可以定义属性；
12     // static readonly 注意顺序
13     static address:string="浙江";
14 
15 
16 //定义方法
17 sayHello(){
18     console.log("hello")
19 }
20 
21 //static 方法
22 static sayHello1(){
23     console.log("hello1")
24 }
25 
26 
27 }
28 const per = new Persion();
29 console.log(per);//打印实例属性
30 per.age=16;
31 //per.name="111";
32 console.log(per);
33 console.log(Persion.address);//打印静态属性；
34 per.sayHello();
35

三、查看代码执行结果：

1.目录结构：

二、typescript类（一）属性和方法_静态属性

 

tsconfig.json:

这个文件的创建方式在 控制台，运行tsc --init 即可创建；配置如下：

1 {
 2   "compilerOptions": {
 3    
 4     "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
 5     
 6     "module": "ES2015",                                /* Specify what module code is generated. */
 7     
 8     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
 9     "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
10 
11     "strict": true, 
12     "outDir": "./dis",                                    /* Enable all strict type-checking options. */
13     
14   },
15   "include": [
16     "./src/**/*"
17   ]
18

View Code

查看效果：

index.html ：直接引入01_class.js文件，没有其他；直接使用浏览器打开该文件，在控制台查看测试的打印结果即可

1 <!DOCTYPE html>
2 <html lang="zh">
3     <head>
4         <meta charset="utf-8">
5         <title>class 类</title>
6         <script src="./dis/01_class.js"></script>
7     </head>
8

View Code

 

我从来不相信什么懒洋洋的自由。我向往的自由是通过勤奋和努力实现的更广阔的人生。 我要做一个自由又自律的人，靠势必实现的决心认真地活着。