typescript类与继承

1  1 /*
2  2 1、vscode配置自动编译
3  3 
4  4     1.第一步   tsc --inti 生成tsconfig.json   改 "outDir": "./js",  
5  5 
6  6 
7  7     2、第二步 任务 - 运行任务  监视tsconfig.json
8  8 
9  9 
10 10 2、typeScript中的数据类型
11 11 
12 12     typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型
13 13 
14 14 
15 15         布尔类型（boolean）
16 16         数字类型（number）
17 17         字符串类型(string)
18 18         数组类型（array）
19 19         元组类型（tuple）
20 20         枚举类型（enum）
21 21         
22 22         任意类型（any）
23 23         null 和 undefined
24 24         void类型
25 25         never类型
26 26 
27 27 3、typeScript中的函数
28 28 
29 29     3.1、函数的定义
30 30     3.2、可选参数
31 31     3.3、默认参数
32 32     3.4、剩余参数
33 33     3.5、函数重载
34 34     3.6、箭头函数  es6
35 35 4、typeScript中的类
36 36 
37 37     4.1 类的定义
38 38     4.2 继承
39 39     4.3 类里面的修饰符
40 40     4.4 静态属性 静态方法
41 41     4.5 抽象类 继承 多态
42 42 
43 43     
44 44 */
45 45 
46 46 
47 47 //1、ts中类的定义
48 48 
49 49     /*
50 50     es5:
51 51 
52 52         function Person(name){
53 53 
54 54             this.name=name;
55 55 
56 56             this.run=function(){
57 57 
58 58                 console.log(this.name)
59 59             }
60 60         }
61 61 
62 62         var p=new Person('张三');
63 63 
64 64         p.run()
65 65     */
66 66 
67 67 
68 68   /*
69 69         ts中定义类：
70 70 
71 71 
72 72             class Person{
73 73 
74 74                 name:string;   //属性  前面省略了public关键词
75 75 
76 76                 constructor(n:string){  //构造函数   实例化类的时候触发的方法
77 77                     this.name=n;
78 78                 }
79 79 
80 80                 run():void{
81 81 
82 82                     alert(this.name);
83 83                 }
84 84 
85 85             }
86 86             var p=new Person('张三');
87 87 
88 88             p.run()
89 89   
90 90   */
91 91 
92 92 
93 93 
94 94     /*
95 95     class Person{
96 96 
97 97         name:string; 
98 98 
99 99         constructor(name:string){  //构造函数   实例化类的时候触发的方法
100100             this.name=name;
101101         }
102102 
103103         getName():string{
104104 
105105             return this.name;
106106         }
107107         setName(name:string):void{
108108 
109109             this.name=name;
110110         }
111111     }
112112     var p=new Person('张三');
113113 
114114     alert(p.getName());
115115 
116116 
117117     p.setName('李四');
118118 
119119 
120120     alert(p.getName());
121121 
122122 */
123123 
124124 
125125 
126126 
127127 
128128 //2、ts中实现继承  extends、 super
129129 
130130 
131131     // class Person{
132132 
133133     //     name:string;
134134 
135135     //     constructor(name:string){
136136     //         this.name=name;
137137     //     }
138138 
139139     //     run():string{
140140 
141141     //         return `${this.name}在运动`
142142     //     }
143143     // }
144144     // // var p=new Person('王五');
145145     // // alert(p.run())
146146 
147147 
148148     // class Web extends Person{
149149     //     constructor(name:string){
150150 
151151     //         super(name);  /*初始化父类的构造函数*/
152152     //     }
153153     // }
154154 
155155 
156156     // var w=new Web('李四');
157157     // alert(w.run());
158158 
159159 
160160 
161161 
162162 
163163 
164164     //ts中继承的探讨  父类的方法和子类的方法一致
165165 
166166         // class Person{
167167 
168168         //     name:string;
169169 
170170         //     constructor(name:string){
171171         //         this.name=name;
172172         //     }
173173 
174174         //     run():string{
175175 
176176         //         return `${this.name}在运动`
177177         //     }
178178         // }
179179         // // var p=new Person('王五');
180180         // // alert(p.run())
181181 
182182 
183183         // class Web extends Person{
184184         //     constructor(name:string){
185185 
186186         //         super(name);  /*初始化父类的构造函数*/
187187         //     }
188188         //     run():string{
189189 
190190         //         return `${this.name}在运动-子类`
191191         //     }
192192         //     work(){
193193 
194194         //         alert(`${this.name}在工作`)
195195         //     }
196196         // }
197197 
198198 
199199         // var w=new Web('李四');
200200         // // alert(w.run());
201201 
202202         // // w.work();
203203 
204204         // alert(w.run());
205205 
206206 
207207 
208208 
209209 
210210 
211211 
212212 
213213 
214214 // 3 类里面的修饰符  typescript里面定义属性的时候给我们提供了 三种修饰符
215215 
216216 /*
217217     public :公有          在当前类里面、 子类  、类外面都可以访问
218218     protected：保护类型    在当前类里面、子类里面可以访问 ，在类外部没法访问
219219     private ：私有         在当前类里面可以访问，子类、类外部都没法访问
220220 
221221     属性如果不加修饰符 默认就是 公有 （public）
222222 
223223 */
224224 
225225 
226226 
227227 //public :公有          在类里面、 子类  、类外面都可以访问
228228 
229229 
230230             //   class Person{
231231 
232232             //         public name:string;  /*公有属性*/
233233 
234234             //         constructor(name:string){
235235             //             this.name=name;
236236             //         }
237237 
238238             //         run():string{
239239 
240240             //             return `${this.name}在运动`
241241             //         }
242242             //     }
243243             //     // var p=new Person('王五');
244244             //     // alert(p.run())
245245 
246246 
247247             //     class Web extends Person{
248248             //         constructor(name:string){
249249 
250250             //             super(name);  /*初始化父类的构造函数*/
251251             //         }
252252             //         run():string{
253253 
254254             //             return `${this.name}在运动-子类`
255255             //         }
256256             //         work(){
257257 
258258             //             alert(`${this.name}在工作`)
259259             //         }
260260             //     }
261261 
262262             //     var w=new Web('李四');
263263 
264264             //     w.work();
265265 
266266 
267267         //类外部访问公有属性
268268 
269269 
270270                 //   class Person{
271271 
272272                 //     public name:string;  /*公有属性*/
273273 
274274                 //     constructor(name:string){
275275                 //         this.name=name;
276276                 //     }
277277 
278278                 //     run():string{
279279 
280280                 //         return `${this.name}在运动`
281281                 //     }
282282                 // }
283283 
284284                 // var  p=new Person('哈哈哈');
285285 
286286                 // alert(p.name);
287287 
288288 
289289 
290290 
291291 
292292 //protected：保护类型    在类里面、子类里面可以访问 ，在类外部没法访问
293293 
294294 
295295             //   class Person{
296296 
297297             //         protected name:string;  /*公有属性*/
298298 
299299             //         constructor(name:string){
300300             //             this.name=name;
301301             //         }
302302 
303303             //         run():string{
304304 
305305             //             return `${this.name}在运动`
306306             //         }
307307             //     }
308308                 // var p=new Person('王五');
309309                 // alert(p.run())
310310 
311311 
312312                 // class Web extends Person{
313313                 //     constructor(name:string){
314314 
315315                 //         super(name);  /*初始化父类的构造函数*/
316316                 //     }                  
317317                 //     work(){
318318 
319319                 //         alert(`${this.name}在工作`)
320320                 //     }
321321                 // }
322322 
323323                 // var w=new Web('李四11');
324324 
325325                 // w.work();
326326 
327327                 // alert( w.run());
328328 
329329 
330330                 
331331         //类外外部没法访问保护类型的属性
332332 
333333 
334334                 // class Person{
335335 
336336                 //     protected name:string;  /*保护类型*/
337337 
338338                 //     constructor(name:string){
339339                 //         this.name=name;
340340                 //     }
341341 
342342                 //     run():string{
343343 
344344                 //         return `${this.name}在运动`
345345                 //     }
346346                 // }
347347 
348348                 // var  p=new Person('哈哈哈');
349349 
350350                 // alert(p.name);
351351 
352352 
353353 
354354 
355355 
356356 // private ：私有        在类里面可以访问，子类、类外部都没法访问
357357             
358358 
359359                 // class Person{
360360 
361361                 //     private name:string;  /*私有*/
362362 
363363                 //     constructor(name:string){
364364                 //         this.name=name;
365365                 //     }
366366 
367367                 //     run():string{
368368 
369369                 //         return `${this.name}在运动`
370370                 //     }
371371                 // }
372372 
373373 
374374                 // class Web extends Person{
375375 
376376                 //     constructor(name:string){
377377                 //         super(name)
378378                 //     }
379379 
380380                 //     work(){
381381 
382382                 //         console.log(`${this.name}在工作`)
383383                 //     }
384384                 // }
385385 
386386 
387387 
388388     class Person{
389389 
390390         private name:string;  /*私有*/
391391 
392392         constructor(name:string){
393393             this.name=name;
394394         }
395395 
396396         run():string{
397397 
398398             return `${this.name}在运动`
399399         }
400400     }
401401 
402402     var p=new Person('哈哈哈');
403403 
404404     alert(p.run());