TypeScript(二)

接口：

1. 属性接口：对传入的参数进行约束

   interface FullName { // 就是传入对象的约束
       firstName: string;
       secondName: string;
   }
   function printName(name: FullName): void {
       console.log(name.firstName + '---' + name.secondName)
   }
   
   // 调用的时候有两种写法:
   // 第一种：直接写入对象，则对象只能包含接口定义的属性，并且属性要遵循属性定义的类型。否则会报错
   printName({
       age: 20, // 报红线
       firstName: 'zhang',
       secondName: 'san'
   })
   // 第二种：把对象写在外部，则对象只需包含接口定义的属性，并且属性要遵循属性定义的类型。
   let obj = {
       age: 20, 
       firstName: 'zhang',
       secondName: 'san'
   }
   printName(obj)
   

2. 可选属性

   interface FullName {
       firstName: string;
       secondName?: string;
   }
   function getName(name: FullName): void {
       console.log(name.firstName)
   }
   getName({
       firstName: 'zhang'
   })
   
   
   // 例子 -- 编写ajax请求参数接口
   interface Config {
       type: string;
       url: string;
       data?: string;
       dataType: string
   }
   function ajax(config: Config) {
      let xhr = new XMLHttpRequest();
      xhr.open(config.type, config.url, true); // true表示异步
      xhr.send(config.data);
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
              console.log('success');
              if (config.dataType === 'json') {
                  console.log(JSON.parse(xhr.responseTest))
              } else {
                  console.log(xhr.responseText)
              }
          }
      }
   }
   ajax({
       type: 'get',
       data: 'name=zhangsan',
       url: 'www.???.com/api',
       dataType: 'json'
   })
   

3. 函数类型接口：对方法传入的参数以及返回值进行约束。 批量约束

   // 加密的函数类型接口
   interface encrypt {
    (key: string, value: string): string; // 不用写function， 直接写参数
   }
   let md5: encrypt = function(key: string, value: string): string {
       // 模拟操作
       return key + 'md5' + value;
   }
   md5('name', 'zhangsan') // namemd5zhangsan
   let sh1: encrypt = function(key: string, value: string): string {
       // 模拟操作
       return key + 'sh1' + value;
   }
   sh1('name', 'lisi') // namesh1lisi
   

4. 可索引接口：对数组、对象的约束

   // 第一种写法 对数组的约束
   interface UserArr {
     [index: number]: string
   }
   let userarr: UserArr = ['aaa', 'bbb']
   // 第二种写法 对对象的约束
   interface UserObj {
     [index: string]: string
   }
   let userobj: UserObj = {name: 'zhangsan'}
   

5. 类类型接口： 对类的约束，与抽象类相似

   interface Animal {
       name: string;
       eat(str: string): void;
   }
   
   class Dog implements Animal {
       name: string
       constructor(name: string) {
           this.name = name
       }
       eat() {
           console.log(this.name + ' eat meat')
       }
   }
   
   let d = new Dog('wangcai')
   d.eat(); // wangcai eat meat
   

6. 接口扩展： 接口可以继承接口 ， 类继承和接口继承可以结合使用

   interface Animal {
       eat(): void
   }
   interface Person extends Animal {
       work(): void
   }
   
   class Programmer {
       public name: string;
       constructor(name: string) {
           this.name = name
       }
       coding(code: string) {
           console.log(this.name + code)
       }
   }
   
   class Xiaoming extends Programmer implements Person {
       constructor(name: string) {
           super(name)
       }
       eat() { // 由于Xiaoming 类接口继承了 Person类接口，Person类接口又继承了 Animal类接口，所以eat和work方法必须定义
           console.log(this.name + 'like eat nuddles')
       }
       work() {
           console.log(this.name + 'like coding')
       }
   }
   
   let p = new Xiaoming('小明')
   p.eat(); // 小明like eat nuddles
   p.coding('写ts代码'); // 小明写ts代码
   

   持续更新！