文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

TypeScript中函数与类的概念是什么

2024-04-02 19:55

关注

这篇文章主要讲解了“TypeScript中函数与类的概念是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript中函数与类的概念是什么”吧!

函数与类

函数

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

「跳跳」:啥问题呀,蹦蹦。

「蹦蹦」:什么是快乐星球,什么是...不对不对 什么是函数?TS的函数和JS的函数有啥区别?

「跳跳」:那就带你一起研究。

介绍

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

function add(num1:number,num2:number):number{   return num1 + num2; }  console.log(add(1,2));//3  let 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);

继承

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

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,因此可以当前类和子类自由访问程序中定义的成员。

TypeScript中函数与类的概念是什么

「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!

感谢各位的阅读,以上就是“TypeScript中函数与类的概念是什么”的内容了,经过本文的学习后,相信大家对TypeScript中函数与类的概念是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯