TypeScript再认识

小咪咪 2022-11-16 15:11 172阅读 0赞

# TypeScript再认识 #

最近也是开始学到了Ts的后面的知识点，豆芽也是在这里去总结了一下，加深自己的印象。说到Ts的进阶知识，就要先说一说Ts的接口。

## 接口(Interface) ##

接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

interface Person{ 
            name: string;
            sayHello():void;
        }
        
        function fn(per: Person){ 
            per.sayHello();
        }
        
        fn({ name:'曹豆芽', sayHello() { console.log(`Hello, 我是 ${ this.name}`)}});

### 接口的属性 ###

#### 只读状态(readonly) ####

interface beanSprouts { 
        readonly name: string
    }
    
    let bean: beanSprouts = { 
        name: '曹豆芽'
    }
    
    bean.name = '豆芽菜' // 此刻会报错，此刻bean为可读的状态，不能赋值

#### 可选状态(?) ####

interface beanSprouts { 
        name: string,
        age?: number
    }
    
    let bean: beanSprouts = { 
        gender: '曹豆芽'
        // 此刻不赋值 age 属性，因为beanSprouts是可选的
        // 当我们不一定去设置对象当某一个值当时候，我们可以使用?去表示当前属性为可选状态
    }

#### 描述属性 ####

interface beanSprouts { 
        height: number;
        width: number;
        [propName: string]: number//此刻我们所有属性的值为number类型，key为string类型
    }

#### 继承(extends) ####

通过继承可以将父接口的规定引入到当前接口中

interface bean { 
        height:number;
    }
    
    interface beanSprouts extends bean { 
        name: string;
        age: number;
    }
    
    let sprouts: beanSprouts = { 
        age: 22,
        name: '曹豆芽',
        height:188//此刻sprouts初始化属性，要加上height,不然报错
    }

#### 类使用接口 ####

interface beanSprouts{
            name: string;
            sayHello():void;
        }
        
    class bean implements beanSprouts{
            constructor(public name: string) {
            }    
    				sayHello() {
           		console.log('大家好，我是'+this.name);
       			}
    }

说完接口，那么我们讲讲泛型（Generic）

## 泛型(Generic） ##

### 泛型定义 ###

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

function beanSprouts(arg: any): any{ 
       return arg;   
      //使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数 字，我们只知道任何类型的值都有可能被返回。
      //此刻beanSprouts函数有一个参数类型不确定。要使函数的返回值的类型和参数的类型是相同的，我们可以去使用泛型，
    }
    //使用泛型
    function beanSprouts<T>(arg: T): T{ 
        return arg;
    }
    
    //使用上面的泛型
    //使用泛型我们可以二种方法去使用
    //直接使用
    beanSprouts(22);
    //定义类型使用
    beanSprouts<number>(22);

我们也可以同时去定义多个泛型

function beanSprouts<T, K>(age: T, name: K): K{ //使用多个泛型，只需逗号隔开
       return name;
    }
          
    test<number, string>(22, "曹豆芽");

### 泛型约束 ###

function beanSprouts<T>(age: T): number{ 
        return age.length;//此刻length这个属性就会报错
     }
    
    
    //这时我们需要实现一个接口让泛型有了这个属性，就不会去报错了。
    interface bean{ 
       length: number;
    }
          
    function beanSprouts<T extends bean>(age: T): number{ 
        return age.length;//使用 extends指定泛型类型的继承关系
     }

### 类使用泛型 ###

class beanSprouts<T>{
        prop: T; 
        constructor(prop: T){
          this.prop = prop;
      }
    }

## 类(class) ##

### 类的定义 ###

类我们可以理解为对象的模型。

class 类名 { 
       属性名: 类型;
        	
        constructor(参数: 类型){ 
        	this.属性名 = 参数;
        }
        	
        方法名(){ 
        	....
        }
        
      }
    
    
    //例子
    class beanSprouts{ 
      name: string;
      age: number;
        
      constructor(name: string, age: number){ 
         this.name = name;
         this.age = age;
       }
        
       sayHello(){ 
         console.log(`大家好，我是${ this.name}`);
       }
    }
    //使用
    const bean = new Person('曹豆芽', 22);
    bean.sayHello();

### 继承 ###

class beanSprouts{ 
         name: string;
         age: number;
            
         constructor(name: string, age: number){ 
            this.name = name;
             this.age = age;
         }
    }
            
    class bean extends beanSprouts{ 
            
         learn(){ 
           console.log(`${ this.name}在学ts！`);
        }
    }
            
    const bean = new learn('曹豆芽', 22);
    bean.learn();

### 修饰符 ###

Ts中属性具有三种修饰符：

- public（默认值），可以在类、子类和对象中修改
    - protected ，可以在类、子类中修改
    - private ，可以在类中修改

public

class Person{ 
          public name: string; // 写或什么都不写都是public
          public age: number;
      
          constructor(name: string, age: number){ 
              this.name = name; // 可以在类中修改
              this.age = age;
          }
      
          sayHello(){ 
              console.log(`大家好，我是${ this.name}`);
          }
      }
      
      class Employee extends Person{ 
          constructor(name: string, age: number){ 
              super(name, age);
              this.name = name; //子类中可以修改
          }
      }
      
      const p = new Person('曹豆芽', 22);
      p.name = '豆芽菜';// 可以通过对象修改

protected

class Person{ 
        protected name: string;
        protected age: number;
    
        constructor(name: string, age: number){ 
            this.name = name; // 可以修改
            this.age = age;
        }
    
        sayHello(){ 
            console.log(`大家好，我是${ this.name}`);
        }
    }
    
    class Employee extends Person{ 
    
        constructor(name: string, age: number){ 
            super(name, age);
            this.name = name; //子类中可以修改
        }
    }
    
    const p = new Person('曹豆芽', 22);
    p.name = '豆芽菜';// 不能修改

private

class Person{ 
        private name: string;
        private age: number;
    
        constructor(name: string, age: number){ 
            this.name = name; // 可以修改
            this.age = age;
        }
    
        sayHello(){ 
            console.log(`大家好，我是${ this.name}`);
        }
    }
    
    class Employee extends Person{ 
    
        constructor(name: string, age: number){ 
            super(name, age);
            this.name = name; //子类中不能修改
        }
    }
    
    const p = new Person('曹豆芽', 22);
    p.name = '豆芽菜';// 不能修改

### 类的只读属性 ###

如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

### 类的属性存取器 ###

1.  对于一些不希望被任意修改的属性，可以将其设置为private
2.  直接将其设置为private将导致无法再通过对象修改其中的属性
3.  我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
4.  读取属性的方法叫做setter方法，设置属性的方法叫做getter方法
    
        class beanSprouts{ 
              private userName: string;
                
              constructor(name: string){ 
                  this.userName = name;
               }
                
               get name(){ 
                  return this.userName;
                }
                
                set name(name: string){ 
                    this.userName = name;
                }
                
         }
                
           const bean = new beanSprouts('曹豆芽');
           console.log(bean.name); // 通过getter读取name属性
           bean.name = '豆芽菜'; // 通过setter修改name属性

### 静态属性 ###

1.  静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
2.  静态属性（方法）使用static开头

class beanSprouts{ 
        static PI = 3.1415926;
        static sum(num1: number, num2: number){ 
            return num1 + num2
        }
    }
    
    console.log(beanSprouts.PI);
    console.log(beanSprouts.sum(123, 456));

### this ###

在类中，使用this表示当前对象

至此，这一篇也结尾了，后面的豆芽也是会对于高阶知识进行学习和总结，最新的总结也是会同步于我的公众号，感兴趣的也可以关注看看。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/89223c9f5a7f4f1bbeb0ec5ffde2faca.png