TypeScript的函数、类

最新推荐文章于 2024-05-04 15:18:07 发布

2764150442

最新推荐文章于 2024-05-04 15:18:07 发布

阅读量302

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/weixin_70815247/article/details/126770099

版权

一、函数

1.函数的基本使用

匿名函数：
变量变量名=关键字（参数：数据类型，参数2：数据类型）:返回值类型{
具体的行为（return返回）
}
调用输出

// 匿名函数
const make = function(a:number,b:number){
    return a+b
}
let a =make(1,2)
console.log(a);

有名函数、命名函数、普通函数
关键字变量名（参数：数据类型，参数2：数据类型）：限定返回值类型{
return
}

// 命名函数
function make2(a:number):number{
    return a
}
let res = make2(2)
console.log(`${res}`);

箭头函数
变量变量名=（参数：数据类型）：void=>{
console.log(`kan$(参数)`)
}
变量名( )

// 箭头函数
//void表示没有返回值
const jt=(a:number):void=>{
    console.log(`${a}`); 
}
jt(9)

接口函数
关键字别名 = （参数：数据类型，参数2：数据类型）=>返回值类型·数据类型
函数具体实现
变量别名：别名=（参数：数据类型，参数2：数据类型）=>参数+参数

type jk=(a:number,b:number)=>number
const aa:jk=(a:number,b:number)=>a+b

2.函数参数的处理

//可选参数
变量变量名：（参数：参数类型，参数2？：参数类型）=>返回类型=关键字（参数：参数类型，参数2？：参数类型）{
return
}
变量名（值）
变量名（值，值2）

// 可选参数
const fun1:(x:number,y?:number)=>number=function(a,b){
    return a
}
const fun2=function(x:number,y?:number){
    return x
}
fun2(1)
fun2(1,2)

//参数的默认值

变量变量名 = 关键字（参数：参数类型=默认值，参数2：参数类型=默认值）{

return 参数+参数2
}
变量名（值）
变量名（值，值2）

//参数的默认值
// 有默认值可写可不写新的值
const fun3=function(x:number=1,y:number=2,z:number=3){
    return x+y+z
}
fun3(1,2,4)
// 函数的剩余参数 ...   
const fun4=function(x:number,y:string,...z:any[]){
    console.log(x);
    console.log(y);
    console.log(z);
}
fun4(100,"哈哈","dudu",134)

3、构造函数


// 构造函数     就是在实例化时候，就已经给了值
var myfun = new Function("a","b","return a*b")
let res = myfun(5,3)
console.log(res);

4、函数重载

重载是方法名字相同，参数不同，返回值可以相同，也可以不相同
每个参数的方法（或者构造函数）都必须有一个独一无二的参数类型列表


// 函数重载

// 他们都执行的是返回a+b
function add(a:number,b:number):number
function add(a:string,b:string):string
function add(a:string,b:number):number
function add(a:number,b:string):string
function add(a:any,b:any):any{
    return a+b
}
add(1,2)
add("ea","dwa")
add("dwa",2)
add(1,"awdfa")


// 参数数量不同
function star(s:string):string;
function star(s:number,c:number):void;
function star(s:any,c?:any):any{
    console.log(s);
    console.log(c);
    
    
}
star("李亦非")
star(1,14)

二、类

        类(class): 定义了一切事物的抽象特点(属性和方法)
        对象(object): 类的实例(通过 new 来生成)
        面向对象特点: 封装,继承,多态

        封装: 将操作数据的细节隐藏起来,只暴露接口, 调用者只需要通过接口来访问对象
        继承: 子类继承父类, 子类除了拥有父类的特性外还可以拥有更加具体的特性
        多态: 同一个方法可以有不同的响应(猫和狗都继承自动物类,但是他们叫声各有不同)

1、类的基本使用

创建类-构造函数-函数方法-new实例化类-调用类里边的方法
this指的是当前的类


// 创建一个类       此时的类名大写开头
class Person{
    // 字段（属性）
    name:string
    age:number

    // 构造函数
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    // 函数的方法
    sayHello():void{
        console.log(`我的女神是${this.name},年龄是${this.age}`);
        
    }
    
}
// 用new实例化类
let res = new Person("林允儿",21)
// 调用类里边的sayHello
res.sayHello()

2、类的继承

创建类-构造函数-函数方法-new实例化类-调用类里边的方法--创建一个类继承父类-构造函数（用super（）来调用父类中的东西）-函数方法（用super()调用父类的）-new实例化类-调用新方法

extends 来继承父类
super（）主要是调用父类中的东西

export default{}
// 创建一个类       此时的类名大写开头
class Person{
    // 字段（属性）
    name:string
    age:number

    // 构造函数
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    // 函数的方法
    sayHello():void{
        console.log(`我的女神是${this.name},年龄是${this.age}`);
        
    }
    
}
// 创建继承父类
class Student extends Person{
    score:string
    // 构造函数
    constructor(name:string,age:number,score:string){
        // super()调用父类中的字段
        super(name,age)
        this.score = score
    }
    sayHello(){
        // 调用了父类中的sayHello()
        super.sayHello()
        console.log(`男神是${this.name},年龄是${this.age},歌曲评分是${this.score}`);
        
    }
}
// new实例化
let res = new Student("张杰",32,"99")

// 调用新创建的类
res.sayHello()

3、static与instanceof

static关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用

instanceof 运算符用于判断对象是否是指定的类型，如果是返回true，如果不是返回false

export default{}
// static关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用
class Person{
    static salay : number
    static say():void{
        console.log(`我期待的工资是${Person.salay}k`);
        
    }
}
Person.salay = 18
Person.say()

// instanceof运算符
// instanceof 运算符用于判断对象是否是指定的类型，如果是返回true，如果不是返回false
class Person1{}
let p = new Person1()
let isPerson1 = p instanceof Person1;
console.log("是实例化出来的吗",isPerson1);

class Person2 extends Person1{}
let s = new Person2()
let isPerson2 = s instanceof Person1;
console.log("是实例化出来的吗",isPerson2);

4、类中的修饰符

public(默认)公有，可以在任何地方被访问
protected受保护，可以被其自身以及其子类访问
private 私有，只有被其定义所在的类访问
readonly：可以使用readonly关键字将属性设置为只读，只读属性必须在声明时或构造函数里被初始化

export default{}
class Person{
    public name:string;
    protected age:number;
    private sex:string

    constructor(name:string,age:number,sex:string){
        this.name=name
        this.age=age
        this.sex=sex
    }
    say():void{
        console.log(`我的名字是${this.name},性别位${this.sex},今年${this.age}岁`);
        
    }
}

class Student extends Person{
    score:string
    constructor(name:string,age:number,sex:string,score:string){
        super(name,age,sex)
        this.score=score;
    }
    say(): void {
        console.log(this.name);
        console.log(this.age);
        // console.log(this.sex);
        console.log(this.score);  
    }
}
let s = new Student("王心凌",15,"女","a")
s.say()


// readonly:字段的前缀可以是readonly修饰符，这可以防止在构造函数之外对该字段进行赋值
class PrintConsole{
    readonly str1:string="HTML,CSS,JS"
    readonly str2:string;
    readonly str3:string;
    readonly str4:string;
    constructor(str2:string,str3:string,str4:string){
        this.str2=str2
        this.str3=str3
        this.str4=str4
    }
}
let pc = new PrintConsole("dwodja","dwahosuhda","dbnuwagdui")

5、getter与setter

   官方的另外一个名字：存取器
   通过getter/setter来截取对对象成员的访问
注意：
   如果存在get，但没有set，则该属性自动是只读的
   如果没有指定setter参数的类型，它将从getter的返回类型中推断出来
   访问器和设置器必须有相同的成员可见性

class Name{
    private myname:string="杨并"

    // 读取字段的值
    get fullName(){
        console.log("get被调用了");
        return this.myname
    }

    //为字段赋值
    set fullName(newName:string){
        console.log("set被顶用了");
        this.myname=newName
        
    }
}
let n = new Name();
n.fullName="刘亦菲";        //赋值
// console.log(n);
console.log(n.fullName);

6、抽象类

定义：
   抽象类作为其他派生类的基类使用，他们一般不会直接被实例化
   抽象类是专门定义那些不希望被外界直接创建的类
   抽象类和接口一样用于约束子类
抽象类和接口的区别：
   抽象方法必须包含abstract关键字并可以包含访问修饰符
   接口中只能定义约束，不能定义具体实现，而抽象类中既可以定义约束，又可以定义具体实现

abstract class Person{
    abstract name:string
    abstract age : number
    abstract show():string

    showName():void{
        console.log("hello world");
        
    }
}
class Student extends Person{
    name:string="liuyifei"
    age:number=132
    show() {
        return "仙剑一"
    }
}
// 不能实例抽象类
// let p = new Person()
let s = new Student()
let res = s.show()
console.log(res);

8、类的初始化顺序

基类的字段被初始化
   基类构造函数运行
   子类的字段被初始化
   子类构造函数运行

class Old{
    name:string="李易峰"
    constructor(){
        console.log(`我是${this.name}`);
        
    }
}
class Yong extends Old{
    name:string="王菲"
    constructor(){
        super()
        console.log(`我是${this.name}`);
        
    }
}
let y = new Yong