typescript接口的概念以及属性类型接口

最新推荐文章于 2024-01-05 10:04:45 发布
aifan2109
最新推荐文章于 2024-01-05 10:04:45 发布
阅读量609
点赞数
文章标签： javascript json 开发工具 ViewUI
原文链接：http://www.cnblogs.com/Spinoza/p/9372980.html
版权
  1 /*
  2 1、vscode配置自动编译
  3 
  4     1.第一步   tsc --inti 生成tsconfig.json   改 "outDir": "./js",  
  5 
  6 
  7     2、第二步 任务 - 运行任务  监视tsconfig.json
  8 
  9 
 10 2、typeScript中的数据类型
 11 
 12     typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型
 13 
 14 
 15         布尔类型（boolean）
 16         数字类型（number）
 17         字符串类型(string)
 18         数组类型（array）
 19         元组类型（tuple）
 20         枚举类型（enum）
 21         
 22         任意类型（any）
 23         null 和 undefined
 24         void类型
 25         never类型
 26 
 27 3、typeScript中的函数
 28 
 29     3.1、函数的定义
 30     3.2、可选参数
 31     3.3、默认参数
 32     3.4、剩余参数
 33     3.5、函数重载
 34     3.6、箭头函数  es6
 35 4、typeScript中的类
 36 
 37     4.1 类的定义
 38     4.2 继承
 39     4.3 类里面的修饰符
 40     4.4 静态属性 静态方法
 41     4.5 抽象类 多态
 42 5、typeScript中的接口
 43 
 44     5.1 属性类接口
 45     5.2 函数类型接口
 46     5.3 可索引接口
 47     5.4 类类型接口
 48     5.5 接口扩展
 49 
 50    
 51 */
 52 
 53 
 54 /*
 55 接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
 56 
 57 定义标准。
 58 
 59 */
 60 
 61 
 62 // 1、属性接口     对json的约束
 63 
 64 
 65 
 66     //ts中定义方法
 67     /*
 68         function printLabel():void {
 69             console.log('printLabel');
 70         }
 71         printLabel();
 72     */
 73 
 74 
 75     /*
 76     ts中定义方法传入参数
 77 
 78         function printLabel(label:string):void {
 79             console.log('printLabel');
 80         }
 81 
 82         printLabel('hahah');
 83 
 84     */
 85 
 86 
 87 
 88         /*
 89             ts中自定义方法传入参数,对json进行约束
 90 
 91         */
 92 
 93         /*
 94         
 95         function printLabel(labelInfo:{label:string}):void {
 96             console.log('printLabel');
 97         }
 98 
 99         printLabel('hahah'); //错误写法
100 
101 
102         printLabel({name:'张三'});  //错误的写法
103 
104 
105         printLabel({label:'张三'});  //正确的写法
106     */
107 
108 
109 
110 //对批量方法传入参数进行约束。
111 
112 
113 //接口：行为和动作的规范，对批量方法进行约束
114 
115 
116 
117         //就是传入对象的约束    属性接口
118         //  interface FullName{
119 
120         //     firstName:string;   //注意;结束
121         //     secondName:string;
122 
123         // }
124 
125         // function printName(name:FullName){
126 
127         //     // 必须传入对象  firstName  secondName
128         //     console.log(name.firstName+'--'+name.secondName);
129         // }
130         // // printName('1213');  //错误
131 
132         // var obj={   /*传入的参数必须包含 firstName  secondName*/
133         //     age:20,
134         //     firstName:'张',
135         //     secondName:'三'
136         // };
137         // printName(obj)
138 
139 
140 
141 
142 
143 
144 
145 //  接口：行为和动作的规范，对批量方法进行约束
146 
147        
148 
149             // interface FullName{
150             //     firstName:string;   //注意;结束
151             //     secondName:string;
152             // }
153 
154             // function printName(name:FullName){
155             //     // 必须传入对象  firstName  secondName
156             //     console.log(name.firstName+'--'+name.secondName);
157             // }
158 
159 
160 
161             // function printInfo(info:FullName){
162 
163             //     // 必须传入对象  firstName  secondName
164             //     console.log(info.firstName+info.secondName);
165             // }
166 
167             // var obj={   /*传入的参数必须包含 firstName  secondName*/
168             //     age:20,
169             //     firstName:'张',
170             //     secondName:'三'
171             // };
172             // printName(obj);
173 
174 
175             // printInfo({
176             //     firstName:'李',
177             //     secondName:'四'
178             // })
179 
180 
181 
182 
183 
184 //接口 ：可选属性
185 
186 
187 
188 
189     // interface FullName{
190 
191     //     firstName:string;
192     //     secondName:string;
193     // }
194 
195     // function getName(name:FullName){
196 
197     //     console.log(name)
198     // }
199     // //参数的顺序可以不一样
200     // getName({        
201     //     secondName:'secondName',
202     //     firstName:'firstName'
203     // })
204 
205 
206 
207 
208 
209     
210 
211     // interface FullName{
212     //     firstName:string;
213     //     secondName?:string;
214     // }
215 
216     // function getName(name:FullName){
217 
218     //     console.log(name)
219     // }  
220     // getName({               
221     //     firstName:'firstName'
222     // })
223 
224 
225 
226 
227 
228 
229 
230 /*
231        $.ajax({
232              type: "GET",
233              url: "test.json",
234              data: {username:$("#username").val(), content:$("#content").val()},
235              dataType: "json"             
236          });
237          
238 */
239 
240 
241 interface Config{
242     type:string;
243     url:string;
244     data?:string;
245     dataType:string;
246 }
247 
248 //原生js封装的ajax 
249 function ajax(config:Config){
250 
251    var xhr=new XMLHttpRequest();
252 
253    xhr.open(config.type,config.url,true);
254 
255    xhr.send(config.data);
256 
257    xhr.onreadystatechange=function(){
258 
259         if(xhr.readyState==4 && xhr.status==200){
260             console.log('chengong');
261 
262 
263             if(config.dataType=='json'){
264 
265                 console.log(JSON.parse(xhr.responseText));
266             }else{
267                 console.log(xhr.responseText)
268 
269             }
270 
271 
272         }
273    }
274 }
275 
276 
277 ajax({
278     type:'get',
279     data:'name=zhangsan',
280     url:'http://a.itying.com/api/productlist', //api
281     dataType:'json'
282 })