• TypeScript 函数与以及类的使用

    一、函数

    1、函数的基本使用

    介绍

    函数是JavaScript应用程序的基础。它帮助你实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用

    函数定义的方式：function function_name(){}

    1. export default {}
    2. // 匿名函数
    3. const sum1=function(a:number,b:number):number{
    4.     return a+b
    5. }
    6. let res1=sum1(45,98)
    7. console.log(res1);
    8.  
    9. // 有名函数 | 命名函数 | 普通函数
    10. function sum2(x:number,y:number):number{
    11.     return x
    12. }
    13. let res2=sum2(1,2)
    14. console.log(res2);
    15.  
    16. // 箭头函数
    17. const seeTv=(time:number):void => {
    18.     console.log(`我每天看电视剧${time}个小时`);   
    19. }
    20. seeTv(2)
    21. // 简写
    22. // const seeTv=(time:number):void => console.log(`我每天看电视剧${time}个小时`);
    23.  
    24. // 接口函数
    25. // type 定义别名
    26. type myFun=(x1:number,y1:number) => number
    27. let myfun:myFun=(c:number,d:number) => c+d

    2、函数参数的处理

    可选参数：

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

    默认参数:

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

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

    剩余参数：

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

    1. export default {}
    2. // 可选参数
    3. const fun1:(x:number,y?:number)=>number=(a:number,b?:number)=>{
    4.     return a
    5. }
    6. let res1=fun1(10,20);
    7. console.log(res1);
    8.  
    9. const fun2:(x:number,y?:number)=>number=function(a,b){
    10.     return a
    11. }
    12.  
    13. const fun3=function(a:number,b?:number){
    14.     return a
    15. }
    16. fun3(10)
    17. fun3(10,20)
    18. fun3(10,undefined)
    19. // console.log(fun3);
    20.  
    21. // 参数的默认值
    22. const fun4=function(a:number,b:number,c:number=3){
    23.     return a+b+c
    24. }
    25. fun4(1,2)//1,2,3
    26. fun4(12,65,84)//12,65,84
    27.  
    28. const fun5=function(a:number=100,b:number=200,c:number=300){
    29.     return a+b+c
    30. }
    31. fun5()//100,200,300
    32. fun5(1,2)//1,2,300
    33.  
    34. // 函数的剩余参数
    35. const fun6=function(...rest:any[]){
    36.     console.log(rest);
    37. }
    38. fun6('杨幂',10,true)
    39.  
    40. const fun7=function(a:number,b:string,...rest:any[]){
    41.     console.log(a);
    42.     console.log(b);
    43.     console.log(rest);
    44. }
    45. fun7(10,'杨幂',true,'迪丽热巴',18)

    3、构造函数

    TypeScript 也支持使用JavaScript内置的构造函数 Function()来定义函数:

    语法格式如下:

    var res = new Function ([arg1[,arg2[,...argN]],] functionBody)

    参数说明:

    •  arg1, arg2, ... argN:参数列表
    •  functionBody:一个含有包括函数定义的JavaScript 语句的字符串。
    1. export default {}
    2.  
    3. // 构造函数
    4. var myfun=new Function('a','b','return a*b');
    5. console.log(myfun(10,20));

    4、函数重载

    重载是巧法名字相同，而参数不同，返回类型可以相同也可以不同。

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

    参数类型不同:

    • function disp(string) :void;
    • function disp (number) : void;

    参数数量不同:

    • function disp(n:number) : void;
    • function disp(x:number , y:number): void;

    参数类型顺序不同:

    • function disp(n: number ,s;string): void;
    • function disp(s :string,n : number : void;

    如果参数类型不同，则参数类型应设置为any

    参数数呈不同你可以将不同的参数设置为可选。

    1. export default {}
    2.  
    3. // 不使用函数重载的问题
    4. function add1(a:number,b:number){
    5.     return a+b
    6. }
    7. add1(10,20)
    8. function add2(a:string,b:string){
    9.     return a+b
    10. }
    11. add2('我的名字叫做：','迪丽热巴')
    12.  
    13. function add3(a:string|number,b:string|number){
    14.     if(typeof a =='number' && typeof b =='number'){
    15.         return a+b
    16.     }else if(typeof a =='string' && typeof b =='string'){
    17.         return a+b
    18.     }else if(typeof a =='number' && typeof b =='string'){
    19.         return a+b
    20.     }else if(typeof a =='string' && typeof b =='number'){
    21.         return a+b
    22.     }
    23. }
    24. add3('我的名字叫做：','迪丽热巴')
    25. add3(10,15)
    26. add3(10,'杨幂')
    27. add3('白鹿',19)
    28.  
    29. // 定义函数重载
    30. function addFun(a:number,b:number):number;
    31. function addFun(a:string,b:string):string;
    32. function addFun(a:string,b:number):string;
    33. function addFun(a:number,b:string):string;
    34. // 使用函数重载
    35. function addFun(a:any,b:any):any{
    36.     return a+b
    37. }
    38. addFun(10,20)
    39. addFun('我的名字叫做：','迪丽热巴')
    40. addFun('蔡徐坤',20)
    41. addFun(10,'赵金麦')
    42.  
    43. // 定义参数类型与参数数量不同
    44. function star(a:string):string
    45. function star(a:number,b:string):void
    46. function star(a:any,b?:any):any{
    47.     console.log(a+b);
    48. }
    49. star('杨幂')
    50. star(12,'白鹿')
    51. // star(10)

    二、类的使用

    1、类的基本使用

    定义：

    • TypeScript是面向对象的JavaScript。
    • 类描述了所创建的对象共同的属性和方法。
    • TypeScript支持面向对象的所有特性，比如类、接口等。

    TypeScript类定义方式如下: class class_name {}

    定义类的关键字为class，后面紧跟类名，类可以包含以下几个模块（(类的数据成员)∶

    • 字段  字段是类里面声明的变量。字段表示对象的有关数据。
    • 构造函数  类实例化时调用，可以为类的对象分配内存。
    • 方法  方法为对象要执行的操作。
    1. export default {}
    2.  
    3. class Person{
    4.     // name:string='杨幂'//初始化表达式
    5.     // 注意点：需要先定义实例属性，才能使用
    6.     // 字段（属性）
    7.     name:string
    8.     age:number
    9.     // 构造函数
    10.     constructor(name:string,age:number){
    11.         // this指的是外面的name与age
    12.         this.name=name
    13.         this.age=age
    14.     }
    15.     // 函数（方法）
    16.     sayHello():void{
    17.         console.log(`我叫${this.name}，今天${this.age}岁了`);   
    18.     }
    19. }
    20. let p = new Person('赵金麦',21)
    21. p.sayHello()

    2、类的继承

    TypeScript支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为少类，继承它的类称为了类。

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

    Typescript一次只能继承一个类，不支持继承多个类，但TypeScript支持多重继承（A继承B，B继承C)。

    语法格式如下:c1ass child_class_name extends parent_class_name

    1. export default {}
    2.  
    3. class Person{
    4.     // 字段（属性）
    5.     name:string
    6.     age:number
    7.     // 构造函数
    8.     constructor(name:string,age:number){
    9.         this.name=name
    10.         this.age=age
    11.     }
    12.     // 函数（方法）
    13.     sayHello():void{
    14.         console.log(`我的女神是${this.name}，她今年${this.age}岁了，在我心中她永远18岁！`);   
    15.     }
    16. }
    17. // extends 继承
    18. class Student extends Person{
    19.     score:string
    20.     constructor(name:string,age:number,score:string){
    21.         // 调用父级中的构造函数
    22.         super(name,age)
    23.         this.score=score
    24.     }
    25.     sayHello(): void {
    26.         // 调用父级的函数
    27.         super.sayHello()
    28.         console.log(`我是重写之后的，我叫${this.name}，今年${this.age}岁了，我的成绩是${this.score}等级`);
    29.     }
    30. }
    31. let p = new Student('鞠婧祎',18,'A')
    32. p.sayHello()

    3、static与instanceof

    1. export default {}
    2. // static 关键字用于定义类的数据成员(属性和方法)为静态的，静态成员可以直接通过类名调用。
    3. class StaticTest{
    4.     static salary:number
    5.     static say():void{
    6.         console.log(`我们想要的工资是：${StaticTest.salary}k`);
    7.         
    8.     }
    9. }
    10. StaticTest.salary=18
    11. StaticTest.say()
    12.  
    13. // instanceof运算符用于判断对象是否是指定的类型，如果是返回true，否则返回false。
    14. class Person{}
    15. let p = new Person()
    16. let isPerson = p instanceof Person
    17. console.log(`p 对象是 Person 类实例化来的吗？${isPerson}`);//true
    18.  
    19. // 继承
    20. class Student extends Person{}
    21. let s = new Person()
    22. let isStudent = s instanceof Person
    23. console.log(`s 对象是 Person 类实例化来的吗？${isStudent}`);//true

    4、类中的修饰符

    1. export default {}
    2.  
    3. /**
    4.  * public(默认):公有，可以在任何地方被访问
    5.  * protected:受保护，可以被其自身以及其子类访问
    6.  * private:私有，只能被其定义所在的类访问
    7.  * readonly:可以使用readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。
    8. */
    9. class Person{
    10.     public name:string
    11.     protected age:number
    12.     private sex:string
    13.     constructor(name:string,age:number,sex:string){
    14.         this.name = name
    15.         this.age = age
    16.         this.sex = sex
    17.     }
    18.     say():void{
    19.         console.log(`我的名字是${this.name},性别为${this.sex}，今年${this.age}岁了`);
    20.     }
    21. }
    22.  
    23. class Student extends Person{
    24.     score:string
    25.     constructor(name:string,age:number,sex:string,score:string){
    26.         super(name,age,sex)
    27.         this.score = score
    28.     }
    29.     say():void{
    30.         console.log(this.name);
    31.         console.log(this.age);
    32.         // console.log(this.sex);//私有
    33.         console.log(this.score); 
    34.     }
    35. }
    36. let s = new Student('林志颖',18,'男','A')
    37. s.say()
    38.  
    39. // 只读 readonly
    40. class Print{
    41.     readonly str1:string = 'HTML'
    42.     readonly str2:string
    43.     readonly str3:string
    44.     readonly str4:string
    45.     constructor(str1:string,str2:string,str3:string,str4:string){
    46.         this.str2 = str2
    47.         this.str3 = str3
    48.         this.str4 = str4
    49.     }
    50.     // show():void{
    51.     //     this.str2='js'
    52.     // }
    53. }
    54. let p = new Print('JavaScript','jQuery','Bootstrap','TypeScript')
    55. console.log(p);

    5、getter与setter

    官方的另外一个名字：存取器

    通过getters/setlers来载取对对象成员的访问

    注意点：

    如果存在get ，但没有set ,则该属性自动是只读的

    如果没有指定setter参数的类型，它将从getter的返回类型中推断出来

    访问器和设置器必须有相同的成员可见性

    1. export default {}
    2.  
    3. class MyName{
    4.     private _fullName:string='白鹿'
    5.     // 读取字段的值
    6.     get fullName(){
    7.         console.log('get被调用了');
    8.         return this._fullName
    9.     }
    10.  
    11.     // 为字段赋值
    12.     set fullName(newName:string){
    13.         console.log('set被调用了');
    14.         this._fullName = newName
    15.     }
    16. }
    17. let m = new MyName()
    18. m.fullName='虞书欣';//赋值
    19. console.log(m);
    20. console.log(m.fullName);//取值

    6、抽象类

    定义

    • 抽象类做为其它派生类的基类使用。它们一般不会直接被实例l化
    • 抽象类是专门用于定义哪些不希望被外界直接创建的类的
    • 抽象类和接口一样用于约束子类

    抽象类和接口区别

    • 抽象方法必须包含 abstract 关键亨并且可以包含访问修饰符
    • 接口中只能定义约束,不能定义具体实现。而抽象类中既可以定义约束,又可以定义具体实现
    1. export default {}
    2.  
    3. abstract class Person{
    4.     abstract name:string
    5.     abstract age:number
    6.     abstract show():string
    7.  
    8.     showName():void{
    9.         console.log('Hello World');
    10.     }
    11. }
    12.  
    13. class Student extends Person{
    14.     name: string='杨颖'
    15.     age:number=18
    16.     show(){
    17.         return '奔跑吧兄弟'
    18.     }
    19. }
    20. // 抽象类不会被直接实例化
    21. // let p = new Person()
    22. let s = new Student()
    23. let res = s.show()
    24. console.log(res);

    7、类的初始化顺序

    • 基类的字段被初始化
    • 基类构造函数运行
    • 子类的字段被初始化
    • 子类构造函数运行
    1. export default {}
    2.  
    3. class Old{
    4.     name:string='李易峰'
    5.     constructor(){
    6.         console.log(`我是${this.name}，我主演了古剑奇谭`);
    7.     }
    8. }
    9. class Young extends Old{
    10.     name: string='赵露思'
    11.     constructor(){
    12.         super()
    13.         console.log(`我是${this.name}，我主演了星汉灿烂`);
    14.     }
    15. }
    16. let y = new Young()
  • 相关阅读:
    【快手小玩法-弹幕游戏】开发者功能测试报告提交模板
    【C++ 科学计算】C++ 预测算法之多项式曲线拟合
    系统告警 ProcessUnpackaged is set to ‘no‘
    【Putty】win10 / win 11：SSH 远程连接工具 Putty 下载、安装
    一封来自江苏省电力设计院的表扬信
    git清除所有历史commit
    两年Java开发工作经验面试总结
    商城小程序功能
    【WLAN】Android 13 WIFI 选网机制--NetworkNominator 解读
    【操作系统】第2章 进程与线程
  • 原文地址：https://blog.csdn.net/m0_61843988/article/details/126769995