• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript函数(与js函数区别、返回值类型、必填参数可选参数默认参数剩余参数、函数 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[Typescript]StaticallyTypeUnknownValueswithTypeScript'sunknownType发布时间:2022-07-18
下一篇:
typescript中使用Object.keys发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap