TS函数、类

最新推荐文章于 2024-07-25 09:24:40 发布

遠2002

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量985

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/asdfg_asdsa/article/details/126771391

版权

函数的基本使用

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

函数定义的方式

export default {}

// 匿名函数
const num=function(a:number,b:number):number{
    return a+b
}
let res = num(10,20)
console.log(res)

// 又名函数 | 命名函数 | 普通函数
function num2(a2:number,b2:number){
    return a2
}
let res2 = num2(10,5)
console.log(res2)

// 箭头函数
const num3 = (a3:number):void =>{
    console.log(`你好${a3}`)
}
num3(5)

// 接口函数
type num4 = (x:number,y:number)=>number
const num5:num4 = (a4:number,b4:number)=>a4+b4
console.log(num5(10,20))

函数参数的处理

·可选参数:

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

·默认参数:

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

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

·剩余参数:

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。...args :any[]

export default {}

// 可选参数
// const fun=function(a:number,b?:number):number{
//     return a
// }
// fun(10)
// fun(10,20)

// 函数的默认值
// const fun2=function(a:number,b:number,c:number=30){
//     return a+b+c
// }
// let res = fun2(10,20)
// console.log(res)


// 函数的剩余参数
const fun3 = function(a:number,...args:any[]){
    console.log(a)
    console.log(args)
}
fun3(1,2,3,"自行车")

构造函数

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

语法格式如下:

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

参数说明:

arg1, arg2, ... argN:参数列表

functionBody:一个含有包括函数定义的JavaScript 语句的字符串。

export default {}

// 构造函数
var myfun = new Function("a","b","return a*b")
var res = myfun(10,20)
console.log(res)

函数重载

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

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

参数类型不同:

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

参数数量不同:

function disp(n1:number):void;
function disp(x:number , y:number):void;

参数类型顺序不同:

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

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

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

export default {}

// 定义函数重载
function addFun(a:number,b:number):number
function addFun(a:string,b:string):string
function addFun(a:number,b:string):string
function addFun(a:string,b:number):string

// 使用函数重载
function addFun(a:any,b:any):any{
    return a+b
}
console.log(addFun(10,20))
console.log(addFun("刘亦菲","杨幂"))
console.log(addFun("刘亦菲",18))
console.log(addFun(18,"杨幂"))

// 定义参数类型与参数数量不同
function star(a:string):void
function star(a:string,b:number):void

function star(a:any,b?:any):void{
    return a
    return b
}
console.log(star("自行车"))
console.log(star("自行车",12))

类的使用

类的基本使用

定义

TypeScript是面向对象的javaScript.

类描述了所创建的对象共同的属性和方法。

TypeScript支持面向对象的所有特性，比如类、接口等。

TypeScript类定义方式如下:

class class_name{
    // 类作用域
}

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

字段–字段是类里面声明的变量。字段表示对象的有关数据。

构造函数–类实例化时调用，可以为类的对象分配内存。

方法–方法为对象要执行的操作。

this当前类

export default {}

// 创建一个类
class Person {
    name:string
    age:number

    // 构造函数
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }

    // 函数(方法)
    nh():void{
        console.log(`我叫${this.name},今年${this.age}岁`)
    }
}

// 实例化类
let p = new Person("张三",20)
p.nh()

类的继承

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

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

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

语法格式如下:

class child_class_name extends parent_class_name

static与instanceof

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

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

export default {}

// static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用
class Person1{
    static uname:string
    static hello():void{
        console.log(`你好，我叫${Person1.uname}`)
    }
}
Person1.uname="张三"
Person1.hello()


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

class Student extends Person{}
let s = new Student()
let isStudent = p instanceof Person
console.log("t是Student实例化出来的吗？",isStudent)

类中的修饰符

public(默认):公有，可以在任何地方被访问

protected:受保护，可以被其自身以及其子类访问

private:私有，只能被其定义所在的类访问。

readonly:可以使用readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

readonly:字段的前缀可以是readonly 修饰符。这可以防止在构造函数之外对该字段进行赋值

getter与setter

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

通过getters/setters来截取对对象成员的访问

注意点:

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

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

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

export default {}

class MyName{
    private _fullName:string="张三"
    // 取值
    get fullName():string{
        console.log("get被调用")
        return this._fullName
    }
    // 赋值
    set fullName(newName:string){
        console.log("set被调用")
        this._fullName=newName
    }
}

let n = new MyName
n.fullName="李四"
console.log(n)
console.log(n.fullName)

抽象类

定义

抽象类做为其它派生类的基类使用。它们一般不会直接被实例化

抽象类是专门用于定义哪些不希望被外界直接创建的类的

抽象类和接口一样用于约束子类

抽象类和接口区别

抽象方法必须包含abstract关键字并且可以包含访问修饰符

接口中只能定义约束,不能定义具体实现。而抽象类中既可以定义约束,又可以定义具体实现

export default {}

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

    showName():void{
        console.log("hello world")
    }
}

class Student extends Person{
    name:string="刘亦菲"
    age:number=18
    show(){
        return "仙剑奇侠传"
    }
}
let s = new Student()
console.log(s.show())

类的初始化顺序

基类的字段被初始化

基类构造函数运行

子类的字段被初始化

子类构造函数运行

export default {}

// 类的初始化顺序
// 基类的字段被初始化=>基类构造函数运行=>子类的字段被初始化=>子类构造函数运行

// 基类
class Person{
    name:string="张三"
    constructor(){
        console.log("我的名字是"+this.name)
    }
}


// 子类
class Student extends Person{
    name:string="李四"
    constructor(){
        super()
        console.log("我的名字是"+this.name)
    }
}
let s = new Student()
s.name