TypeScript 函数讲解

秒速五厘米 2022-12-27 01:54 141阅读 0赞

## TypeScript 函数讲解 ##

### 函数的定义 ###

*  可以指定参数的类型和返回值的类型

function hello(name:string):void { 
        console.log('hello',name);
    }
    hello('zfpx');

#### 函数表达式 ####

*  定义函数类型

type GetUsernameFunction = (x:string,y:string)=>string;
    let getUsername:GetUsernameFunction = function(firstName,lastName){ 
      return firstName + lastName;
    }

#### 没有返回值 ####

let hello2 = function (name:string):void { 
        console.log('hello2',name);
        return undefined;
    }
    hello2('zfpx');

#### 可选参数 ####

在TS中函数的形参和实参必须一样，不一样就要配置可选参数,而且必须是最后一个参数

function print(name:string,age?:number):void { 
        console.log(name,age);
    }
    print('zfpx');

#### 默认参数 ####

function ajax(url:string,method:string='GET') { 
        console.log(url,method);
    }
    ajax('/users');

#### 剩余参数 ####

function sum(...numbers:number[]) { 
        return numbers.reduce((val,item)=>val+=item,0);
    }
    console.log(sum(1,2,3));

#### 函数重载 ####

*  在Java中的重载，指的是两个或者两个以上的同名函数，参数不一样
 *  在TypeScript中，表现为给同一个函数提供多个函数类型定义

let obj: any={ };
    function attr(val: string): void;
    function attr(val: number): void;
    function attr(val:any):void { 
        if (typeof val === 'string') { 
            obj.name=val;
        } else { 
            obj.age=val;
        }
    }
    attr('zfpx');
    attr(9);
    attr(true);
    console.log(obj);

## 类 ##

#### 如何定义类 ####

*  “strictPropertyInitialization”: true /  
    启用类属性初始化的严格检查  
    /
 *  name!:string

class Person{ 
        name:string;
        getName():void{ 
            console.log(this.name);
        }
    }
    let p1 = new Person();
    p1.name = 'zhufeng';
    p1.getName();

#### 存取器 ####

*  在 TypeScript 中，我们可以通过存取器来改变一个类中属性的读取和赋值行为
 *  构造函数  
    – 主要用于初始化类的成员变量属性  
    – 类的对象创建时自动调用执行  
    – 没有返回值

class User { 
        myname:string;
        constructor(myname: string) { 
            this.myname = myname;
        }
        get name() { 
            return this.myname;
        }
        set name(value) { 
            this.myname = value;
        }
    }
    let user = new User('zhufeng');
    user.name = 'jiagou'; 
    console.log(user.name);

"use strict";
    var User = /** @class */ (function () { 
        function User(myname) { 
            this.myname = myname;
        }
        Object.defineProperty(User.prototype, "name", { 
            get: function () { 
                return this.myname;
            },
            set: function (value) { 
                this.myname = value;
            },
            enumerable: true,
            configurable: true
        });
        return User;
    }());
    var user = new User('zhufeng');
    user.name = 'jiagou';
    console.log(user.name);

#### 参数属性 ####

class User { 
        constructor(public myname: string) { }
        get name() { 
            return this.myname;
        }
        set name(value) { 
            this.myname = value;
        }
    }
     
    let user = new User('zhufeng');
    console.log(user.name); 
    user.name = 'jiagou'; 
    console.log(user.name);

#### readonly ####

*  readonly修饰的变量只能在构造函数中初始化
 *  在 TypeScript 中，const 是常量标志符，其值不能被重新分配
 *  TypeScript 的类型系统同样也允许将 interface、type、 class 上的属性标识为 readonly
 *  readonly 实际上只是在编译阶段进行代码检查。而 const 则会在运行时检查（在支持 const 语法的 JavaScript 运行时环境中）

class Animal { 
        public readonly name: string
        constructor(name:string) { 
            this.name = name;
        }
        changeName(name:string){ 
            this.name = name;
        }
    }
    let a = new Animal('zhufeng');
    a.changeName('jiagou');

#### 继承 ####

*  子类继承父类后子类的实例就拥有了父类中的属性和方法，可以增强代码的可复用性
 *  将子类公用的方法抽象出来放在父类中，自己的特殊逻辑放在子类中重写父类的逻辑
 *  super可以调用父类上的方法和属性

class Person { 
        name: string;//定义实例的属性，默认省略public修饰符
        age: number;
        constructor(name:string,age:number) { //构造函数
            this.name=name;
            this.age=age;
        }
        getName():string { 
            return this.name;
        }
        setName(name:string): void{ 
            this.name=name;
        }
    }
    class Student extends Person{ 
        no: number;
        constructor(name:string,age:number,no:number) { 
            super(name,age);
            this.no=no;
        }
        getNo():number { 
            return this.no;
        }
    }
    let s1=new Student('zfpx',10,1);
    console.log(s1);

#### 类里面的修饰符 ####

class Father { 
        public name: string;  //类里面 子类 其它任何地方外边都可以访问
        protected age: number; //类里面 子类 都可以访问,其它任何地方不能访问
        private money: number; //类里面可以访问， 子类和其它任何地方都不可以访问
        constructor(name:string,age:number,money:number) { //构造函数
            this.name=name;
            this.age=age;
            this.money=money;
        }
        getName():string { 
            return this.name;
        }
        setName(name:string): void{ 
            this.name=name;
        }
    }
    class Child extends Father{ 
        constructor(name:string,age:number,money:number) { 
            super(name,age,money);
        }
        desc() { 
            console.log(`${ this.name} ${ this.age} ${ this.money}`);
        }
    }
    let child = new Child('zfpx',10,1000);
    console.log(child.name);
    console.log(child.age);
    console.log(child.money);

#### 静态属性 静态方法 ####

class Father { 
        static className='Father';
        static getClassName() { 
            return Father.className;
        }
        public name: string;
        constructor(name:string) { //构造函数
            this.name=name;
        }
     
    }
    console.log(Father.className);
    console.log(Father.getClassName());

#### 抽象类 ####

*  抽象描述一种抽象的概念，无法被实例化，只能被继承
 *  无法创建抽象类的实例
 *  抽象方法不能在抽象类中实现，只能在抽象类的具体子类中实现，而且必须实现

abstract class Animal { 
        name!:string;
        abstract speak():void;
    }
    class Cat extends Animal{ 
        speak(){ 
            console.log('喵喵喵');
        }
    }
    let animal = new Animal();//Cannot create an instance of an abstract class
    animal.speak();
    let cat = new Cat();
    cat.speak();

<table> 
 <thead> 
  <tr> 
   <th>访问控制修饰符</th> 
   <th>private protected public</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>只读属性</td> 
   <td>readonly</td> 
  </tr> 
  <tr> 
   <td>静态属性</td> 
   <td>static</td> 
  </tr> 
  <tr> 
   <td>抽象类、抽象方法</td> 
   <td>abstract</td> 
  </tr> 
 </tbody> 
</table>

### 抽象类 vs 接口 ###

*  不同类之间公有的属性或方法，可以抽象成一个接口（Interfaces）
 *  而抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
 *  抽象类本质是一个无法被实例化的类，其中能够实现方法和初始化属性，而接口仅能够用于描述,既不提供方法的实现，也不为属性进行初始化
 *  一个类可以继承一个类或抽象类，但可以实现（implements）多个接口
 *  抽象类也可以实现接口

abstract class Animal{ 
        name:string;
        constructor(name:string){ 
          this.name = name;
        }
        abstract speak():void;
      }
      interface Flying{ 
          fly():void
      }
    class Duck extends Animal implements Flying{ 
          speak(){ 
              console.log('汪汪汪');
          }
          fly(){ 
              console.log('我会飞');
          }
    }
    let duck = new Duck('zhufeng');
    duck.speak();
    duck.fly();

#### 抽象方法 ####

*  抽象类和方法不包含具体实现，必须在子类中实现
 *  抽象方法只能出现在抽象类中
 *  子类可以对抽象类进行不同的实现

abstract class Animal{ 
        abstract speak():void;
    }
    class Dog extends  Animal{ 
        speak(){ 
            console.log('小狗汪汪汪');
        }
    }
    class Cat extends  Animal{ 
        speak(){ 
            console.log('小猫喵喵喵');
        }
    }
    let dog=new Dog();
    let cat=new Cat();
    dog.speak();
    cat.speak();

#### 重写(override) vs 重载(overload) ####

*  重写是指子类重写继承自父类中的方法
 *  重载是指为同一个函数提供多个类型定义

class Animal{ 
        speak(word:string):string{ 
            return '动作叫:'+word;
        }
    }
    class Cat extends Animal{ 
        speak(word:string):string{ 
            return '猫叫:'+word;
        }
    }
    let cat = new Cat();
    console.log(cat.speak('hello'));
    //--------------------------------------------
    function double(val:number):number
    function double(val:string):string
    function double(val:any):any{ 
      if(typeof val == 'number'){ 
        return val *2;
      }
      return val + val;
    }
     
    let r = double(1);
    console.log(r);

#### 继承 vs 多态 ####

*  继承（Inheritance）子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
 *  多态（Polymorphism）由继承而产生了相关的不同的类，对同一个方法可以有不同的响应

class Animal{ 
        speak(word:string):string{ 
            return 'Animal: '+word;
        }
    }
    class Cat extends Animal{ 
        speak(word:string):string{ 
            return 'Cat:'+word;
        }
    }
    class Dog extends Animal{ 
        speak(word:string):string{ 
            return 'Dog:'+word;
        }
    }
    let cat = new Cat();
    console.log(cat.speak('hello'));
    let dog = new Dog();
    console.log(dog.speak('hello'));

## 接口 ##

*  接口一方面可以在面向对象编程中表示为行为的抽象，另外可以用来描述对象的形状
 *  接口就是把一些类中共有的属性和方法抽象出来,可以用来约束实现此接口的类
 *  一个类可以继承另一个类并实现多个接口
 *  接口像插件一样是用来增强类的，而抽象类是具体类的抽象概念
 *  一个类可以实现多个接口，一个接口也可以被多个类实现，但一个类的可以有多个子类，但只能有一个父类
 *  interface中可以用分号或者逗号分割每一项，也可以什么都不加

### 对象的形状 ###

//接口可以用来描述`对象的形状`,少属性或者多属性都会报错
    interface Speakable{ 
        speak():void;
        name?:string;//？表示可选属性
    }
     
    let speakman:Speakable = { 
        speak(){ },//少属性会报错
        name,
        age//多属性也会报错
    }

#### 行为的抽象 ####

//接口可以在面向对象编程中表示为行为的抽象
    interface Speakable{ 
        speak():void;
    }
    interface Eatable{ 
        eat():void
    }
    //一个类可以实现多个接口
    class Person implements Speakable,Eatable{ 
        speak(){ 
            console.log('Person说话');
        }
        eat(){ }
    }
    class TangDuck implements Speakable{ 
        speak(){ 
            console.log('TangDuck说话');
        }
        eat(){ }
    }

#### 任意属性 ####

//无法预先知道有哪些新的属性的时候,可以使用 `[propName:string]:any`,propName名字是任意的
    interface Person { 
      readonly id: number;
      name: string;
      [propName: string]: any;
    }
     
    let p1 = { 
      id:1,
      name:'zhufeng',
      age:10
    }

#### 接口的继承 ####

*  一个接口可以继承自另外一个接口

interface Speakable { 
        speak(): void
    }
    interface SpeakChinese extends Speakable { 
        speakChinese(): void
    }
    class Person implements SpeakChinese { 
        speak() { 
            console.log('Person')
        }
        speakChinese() { 
            console.log('speakChinese')
        }
    }

#### readonly ####

*  用 readonly 定义只读属性可以避免由于多人协作或者项目较为复杂等因素造成对象的值被重写

interface Person{ 
      readonly id:number;
      name:string
    }
    let tom:Person = { 
      id :1,
      name:'zhufeng'
    }
    tom.id = 1;

#### 函数类型接口 ####

*  对方法传入的参数和返回值进行约束

interface discount{ 
      (price:number):number
    }
    let cost:discount = function(price:number):number{ 
       return price * .8;
    }

#### 可索引接口 ####

*  对数组和对象进行约束
 *  userInterface 表示：只要 index 的类型是 number，那么值的类型必须是 string
 *  UserInterface2 表示：只要 index 的类型是 string，那么值的类型必须是 string

interface UserInterface { 
      [index:number]:string
    }
    let arr:UserInterface = ['zfpx1','zfpx2'];
    console.log(arr);
     
    interface UserInterface2 { 
      [index:string]:string
    }
    let obj:UserInterface2 = { name:'zhufeng'};

#### 类接口 ####

*  对类的约束

interface Speakable { 
        name: string;
        speak(words: string): void
    }
    class Dog implements Speakable { 
        name!: string;
        speak(words:string) { 
            console.log(words);
        }
    }
    let dog = new Dog();
    dog.speak('汪汪汪');

#### 构造函数的类型 ####

*  在 TypeScript 中，我们可以用 interface 来描述类
 *  同时也可以使用interface里特殊的new()关键字来描述类的构造函数类型

class Animal{ 
      constructor(public name:string){ 
      }
    }
    interface WithNameClass{ 
      new(name:string):Animal
    }
    function createAnimal(clazz:WithNameClass,name:string){ 
       return new clazz(name);
    }
    let a = createAnimal(Animal,'zhufeng');
    console.log(a.name);

剩余还有一些  
[类型][Link 1]

[Link 1]: https://juejin.im/post/5cfdb906e51d455070226f5f