函数与类

前言

本文章是Typescript系列学习文章，旨在利用碎片时间快速高效上手学习Typescript，也可以对Typescript进行复习知识点，温故知新。如果感兴趣的话~ 欢迎关注, 后续持续推出文章。

前文回顾

《你好，我叫Typescript 01 ── 数据类型》
《你好，我叫Typescript 02 ── 变量与接口》
《你好，我叫Typescript 03 ── 泛型》

函数

蹦蹦：跳跳，好几天不见，我最近在学习Typescript又遇到了新问题，亟需你的解答。

跳跳：啥问题呀，蹦蹦。

蹦蹦：什么是快乐星球，什么是…不对不对什么是函数？TS的函数和JS的函数有啥区别？

跳跳：那就带你一起研究。

介绍

跳跳：函数是定义行为的语法，其实是为JS添加额外的功能。同样的可以创建有名称的函数和匿名函数。

function add(num1:number,num2:number):number{return num1 + num2;
}console.log(add(1,2));//3let addNum = (num1:number,num2:number):number => num1+num2;
console.log(addNum(1,2));//3

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

简而言之，函数类型包含参数类型和返回值类型两个部分，当写出完整类型的时候，两部分都需要完整书写。其实，可以以参数列表的形式写出参数类型，为每一个参数指定一个名字和类型，增加代码的可读性。

只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。

第二部分是返回值类型。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。

在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型。

函数参数定义的方式

1.直接声明函数参数

function add(num1:number,num2:number):number{return num1 + num2;
}
add(1,2);//3

2.解构赋值声明函数参数

function add({num1,num2}:{num1:number,num2:number}):number{return num1 + num2;
}
add({x:1,y:2});//3

3.剩余参数声明函数参数

function add(...rest:number[]){return rest.reduce((pre,cur)=>pre+cur);
}
add(2,3,4,5);//14
add("yichuan",3);//报错，不能使用字符串

4.命名式声明函数参数

type add = (num1:number,num2:number)=>number;interface add{(x:number,y:number):number
}

调用方式：

let addFun:add=>(num1,num2)=>num1+num2;

5.可选参数和默认参数

function add(num1:number,num2:number,num3?:number):number{return num1 + num2;
}

显而易见：num1和num2是默认参数，num3是可选参数。切记，默认参数放前面，可选参数放后面。

this

在JS中的this指向问题很恼火，this的指向是在函数被调用时进行指定的，但是得整明白函数调用的上下文是什么，这是比较困扰的。其实两者没多大区别。

幸运的是，TS能够通知你错误地使用了this的地方。

函数重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。

function addFun(num1:number,num2:number):number;
function addFun(num1:string,num2:string):string;
function addFun(num1:string,num2:number):string;
function addFun(num1:number,num2:string):string;
function addFun(num1:any,num2:any):any{if(typeof num1 === "string" || typeof num2 === "string"){return num1.toString() + num2.toString();}return num1 + num2;
}
console.log(addFun(1,2));

蹦蹦：我们可以看到大多数的库源码都是进行函数重载的方式，这是为什么？

跳跳：这是因为使用函数重载后，其他人只要看到函数重载声明就可以知道函数的调用方式。

函数重载的方式，就是ts会从一开始查找类型，如果匹配就返回函数类型，如果不匹配就到下一个。因此，在定义重载的时候，一定要把最精确的定义放在最前面。
tips: 维护一个公共组件时, 可使用这种方式让使用者和后面维护者快速知道函数的调用方式.

类

蹦蹦：TS的类和JS有啥不同？

跳跳：在es6前，传统的Javascript需要使用函数和原型链继承的方式才能实现可重用的组件，但是这种对于不了解JS原型链原理的程序员却显得困难。而ES6引入了类的思想，使得程序员可以基于类进行面向对象的方式编程。

类的属性和方法

蹦蹦：在面向对象编程的语言中，类可以创造对象的蓝图，描述所要创建对象的公共属性和方法。

class Person{//实例属性name: string;age: number;//私有字段#score:number;//静态属性static height:number = 180;//readonly weight:number = 130;//构造函数constructor(name:string,age:number,score:number){this.name = name;this.age = age;this.#score = score;}//实例方法getName(){return this.name;}//静态方法static getAge(){return this.age;}
}let person:Person = new Person("wenbo",12);
console.log(person.getName());
console.log(Person.height);
person.name = "zhaoshun";
console.log(person.getName());
Person.height = 170;
console.log(Person.height);
person.weight = 110;
console.log(person.weight);

实例属性（成员属性）：直接在类中定义的属性就是实例属性，需要通过对象的实例进行访问。
静态属性（类属性）：在属性前使用static关键字可以定义类属性（静态属性），可以直接通过类进行访问。
私有字段：在属性前加上#，即可将属性变成私有属性，不能在包含的类之外访问，甚至不能被检测到。每个私有属性都唯一限定了其包含的类，不能在私有属性上使用ts的可访问修饰符（public、private）。
构造函数（执行初始化操作）：构造函数会在对象创建时调用，在实例方法中，this就表示当前的实例.在构造函数中当前对象就是当前新建的那个对象，可以通过this向新建的对象中添加属性。
实例方法（成员方法）：直接在类中定义的方法就是实例方法，需要通过对象的实例进行调用。在方法中可以通过this来表示当前调用方法的对象。谁调用该方法，就指向谁。
静态方法（类方法）：在方法前使用static关键字可以定义类方法（静态方法），可以直接通过类进行访问。

继承

基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。

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();

如上所示是最基本的继承：类从基类中继承了属性和方法。这里，Dog是一个派生类，它派生自Animal基类，通过 extends关键字。派生类通常被称作子类，基类通常被称作超类。

因为Dog继承了Animal的功能，因此我们可以创建一个Dog的实例，它能够bark()和move()。

公共，私有与受保护的修饰符

在TS中可以给类的属性、方法及构造器设置修饰符，来限定它们的作用范围。默认修饰符是public，因此可以当前类和子类自由访问程序中定义的成员。

public	private	protected
默认修饰符，共有成员	私有修饰符，私有成员	受保护的修饰符
可以在任何位置访问	只能在声明类内部使用，不能被子类调用，不能在实例中访问	只能在子类中进行访问，不能在实例中使用

tip: 在写类时, 要养成随手添加成员修饰符的习惯.

class Father{//公共成员public name:string;//私有成员private age:number;//受保护成员protected address:string;public constructor(name:string,age:number,address:string){this.name = name;this.age = age;this.address = address;}public eat(meters:number){console.log(`${this.name} moved ${meters}`);}
}class Son extends Father{constructor(){super()}test(){console.log(this.name);//可访问console.log(this.age);//属性“age”为私有属性，只能在类“Father”中访问。console.log(this.address);//可访问}
}const bigLiu = new Father("bigLiu",32,"四川省成都市");
console.log(bigLiu.name);//可访问
console.log(bigLiu.age);//属性“age”为私有属性，只能在类“Father”中访问。
console.log(bigLiu.address);//属性“address”受保护，只能在类“Father”及其子类中访问。 const smallLiu = new Son();
console.log(bigLiu.name);//可访问
console.log(bigLiu.age);//属性“age”为私有属性，只能在类“Father”中访问。
console.log(bigLiu.address);//属性“address”受保护，只能在类“Father”及其子类中访问。

访问器（存取器）

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

class Greeter {constructor(message: string) {this.greeting = message;}greeting: string;get hello() {return this.greeting;}set hi(x) {this.greeting = x;}
}
const x = new Greeter('eeee')
x.hi('22');
x.hello = '2' // 报错, 不能修改

实际上就是使用getters/setters来截取对对象成员的访问。解析出来的源码如下:

抽象类

使⽤ abstract 关键字声明的类，我们称之为抽象类。抽象类不能被实例化，因为它⾥⾯包含⼀个或多个抽象⽅法。所谓的抽象⽅法，是指不包含具体实现的⽅法：

abstract class Person {constructor(public name: string){}
abstract say(words: string) :void;
}
// Cannot create an instance of an abstract class.(2511)
const lolo = new Person(); // Error

抽象类不能被直接实例化，我们只能实例化实现了所有抽象⽅法的⼦类。具体如下所示：

abstract class Person {constructor(public name: string){}// 抽象⽅法abstract say(words: string) :void;}class Developer extends Person {constructor(name: string) {super(name);
}
say(words: string): void {console.log(`${this.name} says ${words}`);}
}
const lolo = new Developer("lolo");
lolo.say("I love ts!"); // lolo says I love ts!

小结

跳跳：其实本篇文章主要介绍了：函数和类的概念、继承、各种属性等等。

参考文章

阿宝哥的《重学TS》
《TS中文文档》

写在最后

我是前端小菜鸡，感谢大家的阅读，我将继续和大家分享更多优秀的文章，此文参考了大量书籍和文章，如果有错误和纰漏，希望能给予指正。

【前端】你好，我叫Typescript 04──函数与类相关推荐

typeScript的函数实例
// 1.遍历 const myBooks =['白菜','青菜','黄瓜']; myBooks.forEach((title, idx, arr) =>console.log(idx + '- ...
typescript函数和类的基础
目录函数函数的基本使用函数参数的使用构造函数函数重载类类的基本使用类的继承 static与instanceof 修饰符 getter与setter 抽象类初始化函数函数的基本使用 ...
typescript中函数_如何在TypeScript中合成Canvas动画
typescript中函数 by Changhui Xu 徐昌辉如何在TypeScript中合成Canvas动画 (How to Compose Canvas Animations in TypeS ...
TypeScript入门教程之类/抽象类/构造器/Getter/Setter
TypeScript入门教程之类/抽象类/构造器/Getter/Setter 将JavaScript中的类作为头等项很重要的原因是: 类提供了有用的结构抽象为开发人员提供一种一致的方式来使用类, ...
C++笔记友元函数友元类
友元函数 :友元函数是可以直接访问类的私有成员的非成员函数. 它是定义在类外的普通函数,它不属于任何类,但需要在类的定义中加以声明,声明时只需在友元的名称前加上关键字friend,其格式如下: ...
MinkowskiEngine实用函数和类
MinkowskiEngine实用函数和类 sparse_quantize MinkowskiEngine.utils.sparse_quantize(coords, feats=None, labe ...
C++ 笔记（16）— 类和对象（类定义、类实例对象定义、访问类成员、类成员函数、类 public/private/protected 成员、类对象引用和指针）
1. 类的定义类定义是以关键字 class 开头,后跟类的名称.并在它后面依次包含类名,一组放在 {} 内的成员属性和成员函数,以及结尾的分号. 类声明将类本身及其属性告诉编译器.类声明本身并不能改 ...
友元函数、类的非静态成员函数、静态成员函数的区别
类中申明的函数相对于类来说有三层意思: 1.有this指针 2.函数在类的作用区域中 3.可以访问类中私有部分 4.可以被继承非静态成员函数具有1234 静态成员函数具有234 友元函数具有3 静态 ...
pycharm如何折叠指定代码而不是某一个函数或类或功能块
基本的代码折叠都很容易: 比如对于某一个函数或类或功能块,pycharm会自动生成一个折叠按钮如下: 这已经满足了我们的使用,我个人也不需要什么快捷键之类的. 但是,我现在遇到的情形是这样的: 我正在 ...

【前端】你好，我叫Typescript 04──函数与类