• TypeScript函数(与js函数区别、返回值类型、必填参数可选参数默认参数剩余参数、函数重载)、接口(对象形状描述、可选属性只读属性、索引签名任意属性、接口与类型别名的区别、声明合并、接口继承)、类(类的属性和方法、私有字段、存取器、继承、访问控制修饰符、类的方法重载)


    一、TypeScript 函数

    1、TypeScript 函数与 JavaScript 函数的区别:我们主要看一下不同的

    TypeScript 函数:函数有类型、函数有返回值类型、参数有类型、有必填和可选参数、有函数重载

    JavaScript 函数:函数无类型、函数无返回值类型、参数无类型、所有参数都是可选的、无函数重载

    2、函数有类型

    let IdGenerator: (chars: string, nums: number) => string;
    function createUserId(name: string, id: number): string {
        return name + id;
    }
    IdGenerator = createUserId;

    3、函数返回值

    function function_name():return_type {
        return value; 
    }

    4、带参数函数

    function func_name( param1 [:datatype], param2 [:datatype]) {   }

    5、带可选参数和默认参数

      在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?

    function buildName(firstName: string, lastName: string) {
        return firstName + " " + lastName;
    }
    let result1 = buildName("Bob");                  // 错误,缺少参数
    let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
    let result3 = buildName("Bob", "Adams");         // 正确

      将 lastName 设置为可选参数:

    function buildName(firstName: string, lastName?: string) {
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
    let result1 = buildName("Bob");  // 正确
    let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
    let result3 = buildName("Bob", "Adams");  // 正确

      注意:可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。如果都是可选参数就没关系。

      我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数,语法格式为:

    function function_name(param1[:type],param2[:type] = default_value) { }

      注意:参数不能同时设置为可选和默认

    6、剩余参数

      有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

    function buildName(firstName: string, ...restOfName: string[]) {
        return firstName + " " + restOfName.join(" ");
    }
      
    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

      函数的最后一个命名参数 restOfName 以 ... 为前缀,它将成为一个由剩余参数组成的数组,索引值从0(包括)到 restOfName.length(不包括)。

    7、函数重载

      重载是方法名字相同,而参数不同,返回类型可以相同也可以不同

      每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表

      比如:参数类型不同、参数数量不同、参数类型顺序不同

    二、TypeScript 接口

      在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类去实现。TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

    1、接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。

      我们定义了一个接口 IPerson,接着定义了一个变量 customer,它的类型是 IPerson

      customer 实现了接口 IPerson 的属性和方法

    interface IPerson { 
        firstName:string, 
        lastName:string, 
        sayHi: ()=>string 
    }
    var customer:IPerson = { 
        firstName:"Tom",
        lastName:"Hanks", 
        sayHi: ():string =>{return "Hi there"} 
    } 

    2、对象的形状

    interface Person {
      name: string;
      age: number;
    }
    let semlinker: Person = {
      name: "***",
      age: 33,
    };

    3、可选 | 只读属性

    interface Person {
      readonly name: string;
      age?: number;
    }

      只读属性用于限制只能在对象刚刚创建的时候修改其值。此外 TypeScript 还提供了 ReadonlyArray<T> 类型,它与 Array<T> 相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改。

    let a: number[] = [1, 2, 3, 4];
    let ro: ReadonlyArray<number> = a;
    ro[0] = 12; // error!
    ro.push(5); // error!
    ro.length = 100; // error!
    a = ro; // error!

      补充一点:readonly 与 const 如何选择?最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。

      作为变量使用的话用 const,若做为属性则使用readonly

    4、任意属性

      有时候我们希望一个接口中除了包含必选和可选属性之外,还允许有其他的任意属性,这时我们可以使用 索引签名 的形式来满足上述要求。

    interface Person {
      name: string;
      age?: number;
      [propName: string]: any;
    }
    const p1 = { name: "***" };  // 不用可选属性
    const p2 = { name: "***", age: 5 };
    const p3 = { name: "***", sex: 1 }  // 使用了任意属性 sex

    5、接口与类型别名的区别

    (1)接口和类型别名都可以用来描述对象的形状(Objects)或函数签名(Functions)

    // 类型别名
    type Point = {
      x: number;
      y: number;
    };
    type SetPoint = (x: number, y: number) => void;

    (2)与接口类型不一样,类型别名可以用于一些其他类型,比如原始类型、联合类型和元组:

    // primitive
    type Name = string;
    // object
    type PartialPointX = { x: number; };
    type PartialPointY = { y: number; };
    // union
    type PartialPoint = PartialPointX | PartialPointY;
    // tuple
    type Data = [number, string];

    (3)扩展:接口和类型别名都能够被扩展,但语法有所不同。此外,接口和类型别名不是互斥的。接口可以扩展类型别名,而反过来是不行的。

    // 接口继承接口
    interface PartialPointX { x: number; }
    interface Point extends PartialPointX { 
      y: number; 
    }
    
    // 类型别名继承类型别名
    type PartialPointX = { x: number; };
    type Point = PartialPointX & { y: number; };
    
    // 接口继承类型别名
    type PartialPointX = { x: number; };
    interface Point extends PartialPointX { y: number; }
    
    // 类别别名继承接口
    interface PartialPointX { x: number; }
    type Point = PartialPointX & { y: number; };

    (4)实现:类可以以相同的方式实现接口或类型别名,但类不能实现使用类型别名定义的联合类型

    (5)声明合并:与类型别名不同,接口可以定义多次,会被自动合并为单个接口

    interface Point { x: number; }
    interface Point { y: number; }
    const point: Point = { x: 1, y: 2 };

    6、接口继承:接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。

    (1)继承使用关键字 extends。

    (2)单接口继承语法格式:Child_interface_name extends super_interface_name

    (3)多接口继承语法格式:Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name(继承的各个接口使用逗号 , 分隔

    三、TypeScript 类

    1、类的属性与方法:静态属性、成员属性、构造函数、静态方法、成员方法

      在面向对象语言中,类是一种面向对象计算机编程语言的构造,是创建对象的蓝图,描述了所创建的对象共同的属性和方法。在 TypeScript 中,我们可以通过 Class 关键字来定义一个类:

    class Greeter {
      // 静态属性
      static cname: string = "Greeter";
      // 成员属性
      greeting: string;
    
      // 构造函数 - 执行初始化操作
      constructor(message: string) {
        this.greeting = message;
      }
    
      // 静态方法
      static getClassName() {
        return "Class name is Greeter";
      }
      // 成员方法
      greet() {
        return "Hello, " + this.greeting;
      }
    }
    let greeter = new Greeter("world");

    2、ECMAScript 私有字段

    class Person {
      #name: string;
    
      constructor(name: string) {
        this.#name = name;
      }
    
      greet() {
        console.log(`Hello, my name is ${this.#name}!`);
      }
    }
    
    let semlinker = new Person("Semlinker");
    
    semlinker.#name;
    //     ~~~~~
    // Property '#name' is not accessible outside class 'Person'
    // because it has a private identifier.

      与常规属性(甚至使用 private 修饰符声明的属性)不同,私有字段要牢记以下规则:

    • 私有字段以 # 字符开头,有时我们称之为私有名称;
    • 每个私有字段名称都唯一地限定于其包含的类;
    • 不能在私有字段上使用 TypeScript 可访问性修饰符(如 public 或 private);
    • 私有字段不能在包含的类之外访问,甚至不能被检测到。
    3、存取器:在 TypeScript 中,我们可以通过 gettersetter 方法来实现数据的封装和有效性校验,防止出现异常数据。

      TypeScript支持通过getters/setters来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。

    let passcode = "Hello TypeScript";
    class Employee {
      private _fullName: string;
    
      get fullName(): string {
        return this._fullName;
      }
      set fullName(newName: string) {
        if (passcode && passcode == "Hello TypeScript") {
          this._fullName = newName;
        } else {
          console.log("Error: Unauthorized update of employee!");
        }
      }
    }

    4、类的继承

      继承(Inheritance)是一种联结类与类的层次模型。指的是一个类(称为子类、子接口)继承另外的一个类(称为父类、父接口)的功能,并可以增加它自己的新功能的能力,继承是类与类或者接口与接口之间最常见的关系。在 TypeScript 中,我们可以通过 extends 关键字来实现继承:

    class Animal {
        move(distanceInMeters: number = 0) {
            console.log(`Animal moved ${distanceInMeters}m.`);
        }
    }
    
    class Dog extends Animal {
        bark() {
            console.log('Woof! Woof!');
        }
    }
    
    const dog = new Dog();
    dog.bark();
    dog.move(10);
    dog.bark();

      类的继承:TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。:

      类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承

      TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)

      语法格式如下:class child_class_name extends parent_class_name

      需要注意的是子类只能继承一个父类,TypeScript 不支持继承多个类,但支持多重继承,如下实例

    class Root { 
       str:string; 
    } 
     
    class Child extends Root {} 
    class Leaf extends Child {} // 多重继承,继承了 Child 和 Root 类
     
    var obj = new Leaf(); 
    obj.str ="hello" 
    console.log(obj.str)

    5、访问控制修饰符:公共,私有、受保护与只读的修饰符

      TypeScript 中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

    • public(默认) : 公有,可以在任何地方被访问。在TypeScript里,成员都默认为 public

    • protected : 受保护,可以被其自身以及其子类和父类访问。

    • private : 私有,只能被其定义所在的类访问。

    • readonly修饰符:你可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。

      以下实例定义了两个变量 str1 和 str2,str1 为 public,str2 为 private,实例化后可以访问 str1,如果要访问 str2 则会编译错误。

    class Encapsulate { 
       str1:string = "hello" 
       private str2:string = "world" 
    }
     
    var obj = new Encapsulate() 
    console.log(obj.str1)     // 可访问 
    console.log(obj.str2)   // 编译错误, str2 是私有的
    6、抽象类:使用 abstract 关键字声明的类,我们称之为抽象类。抽象类不能被实例化,因为它里面包含一个或多个抽象方法。所谓的抽象方法,是指不包含具体实现的方法。抽象类不能被直接实例化,我们只能实例化实现了所有抽象方法的子类。

    7、类方法重载:对于类的方法来说,它也支持重载。

    8、继承类的方法重写

      类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写

      其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法

    class PrinterClass { 
       doPrint():void {
          console.log("父类的 doPrint() 方法。") 
       } 
    } 
    class StringPrinter extends PrinterClass { 
       doPrint():void { 
          super.doPrint() // 调用父类的函数
          console.log("子类的 doPrint()方法。")
       } 
    }

    9、把类当做接口使用

      类定义会创建两个东西:类的实例类型和一个构造函数。 因为类可以创建出类型,所以你能够在允许使用接口的地方使用类。

    class Point {
        x: number;
        y: number;
    }
    interface Point3d extends Point {
        z: number;
    }
    let point3d: Point3d = {x: 1, y: 2, z: 3};
    10、static关键字和instanceof 运算符

    (1)static 关键字:用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用

    (2)instanceof 运算符:用于判断对象是否是指定的类型,如果是返回 true,否则返回 false

    class Person{ } 
    var obj = new Person() 
    var isPerson = obj instanceof Person; 
    console.log("obj 对象是 Person 类实例化来的吗? " + isPerson); // true
  • 相关阅读:
    细叠子草—蛤蟆皮草
    JQuery修改对象的属性值
    设计专用色系,挺不错的值得借鉴
    PDF如何自动滚动阅读
    给初级拍摄者的十条好建议
    每天一个linux命令(45):route命令
    每天一个linux命令(44):ifconfig命令
    每天一个linux命令(43):lsof命令
    每天一个linux命令(42):crontab命令
    每天一个linux命令(41):at命令
  • 原文地址:https://www.cnblogs.com/goloving/p/15424706.html
Copyright © 2020-2023  润新知