TypeScript函数与类的使用基础知识点

最新推荐文章于 2023-03-30 19:17:12 发布
最新推荐文章于 2023-03-30 19:17:12 发布
阅读量172 收藏 2
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62073591/article/details/126769809
版权

1、类的使用

        1.1 类的基本使用

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

                定义类的方式：

class Person{// Person自己定义的名字
    //类作用域
}

        定义类的关键字为class,后面紧跟类名，类可以包含以下几个模块(类的数据成员) :
                ●字段：字段是类里面声明的变量。字段表示对象的有关数据。
                ●构造函数：类实例化时调用，可以为类的对象分配内存。
                ●方法：方法为对象要执行的操作。

export default{}
//类的基本使用
class Person{
    //字段(属性)
        name:srting
        age:number
    //构造函数
        constructor(name:srting,age:number){
            this.name=name
            this.age=age
        }
    //函数（方法）
        sayHool():void{
            console.log(`我是${this.name},她${this.age}岁,但永远18`);
    }
}
//调用函数
let p = new Person("留"，12)
p.sayHool()

        1.2 类的继承

                TypeScript支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。
                类继承使用关键字extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。
                TypeScript一次只能继承一个类，不支持继承多个类，但TypeScript支持多重继承(A继承B, B继承C)。
                语法格式如下: class child_ class_ name extends parent_ class_ name

export default{}
// 类的基本使用
class Person{
    //字段(属性)
    //注意点：需要先定义实例属性 才能使用
        name:string 
        age:number
    //构造函数
        constructor(name:string,age:number){
            this.name=name
            this.age=age
        }
    //函数(方法)
        sayHool():void{
            console.log(`我是${this.name},她${this.age}岁,但永远18`);
        }
}
//调用函数
// let p = new Person("留",12)
// p.sayHool()

//类的继承 先子级 extends 后父级
class Stuson extends Person{
    scron:string
    construstor(name:string,age:number,scron:string){
        super(name,age) //调用父级中的构造函数
        this.scron=scron
    }
    //函数
    sayHoole():void{
        super.sayHool()  //调用父级的函数
        //重写子集的函数（方法）
         console.log(`重写的方法，我是${this.name},今年${this.age},成绩是${this.scron}`);
    }
}
let p0 = new Stuson("kiu",18,"A")
p0.sayHoole()

        1.3 static与instanceof

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

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

export default{}
//static关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。
class Staticy{
    static salary:number
    static say():void{
        console.log(`我们想要的工资是${Staticy.salary}k`);
    }
}
Staticy.salary=18
Staticy.say()

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

class Person{}
let p = new Person()
let isPerson = p instanceof Person;
console.log("p是Person实例化出来的的吗",isPerson);

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

        1.4类中的修饰符

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

export default{}
class Percon{
    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("往",18,"女","A")
s.say()



//readonly: 可以使用readonly 关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。
class Print{
    readonly str1:string="我是声明时3赋值的"
    readonly str2:string
    readonly str3:string
    readonly str4:string
    readonly str5:string
    constructor(str2:string,str3:string,str4:string,str5:string,){
        this.str2=str2
        this.str3=str3
        this.str4=str4
        this.str5=str5
    }
}
let pc=new Print("我的","ghb","ftgyh","jk")
console.log(pc.str2,pc.str3,pc.str4,pc.str5);

        1.5 getter与setter

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

export default{}
class MyName{
    private full:string="杨";
    //读取字段的值
        get fullName(){
            console.log("get被调用")
            return this.full;
        }
    //为字段赋值
        set fullName(newName:string){
            console.log("set被调用")
            this.full=newName
        }
}
let ns = new MyName()
ns.fullName="liu"  //赋值
console.log(ns)
console.log(ns.fullName)  //取值

        1.6 抽象类

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

export default{}
abstract class Person{
    abstract name:string
    abstract age:number
    abstract show():string
    sayHo():void{
        console.log("Hooll");
    }
}
class Serden extends Person{
    name:string = "张"
    age:number = 18
    show(){
        return "yi"
    }
}
let p0 = new Serden()
let res = p0.show()
console.log(res)

        1.7 类的初始化顺序

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

export default{}
class Old{
    name:string="李"
    constructor(){
        console.log(`我是${this.name},古剑奇谭`);
    }
}
class Young extends Old{
    name:string="liu"
    constructor(){
        super()
        console.log(`我是${this.name},天龙八部`);
    }
}
let y = new Young()
//console.log(y)

2. 函数

        2.1 函数的基本使用

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

export default{}
//匿名函数
const makeMoney = function(salary:number,reward:number):number{
    return salary+reward
}
let res = makeMoney(100,100)
console.log(res)

//有名函数|命名函数|普通函数
function writeCode(hour:number,sleep:number){
    return hour
}
let res1 = writeCode(8,1)
console.log(`我今天写代码${res1}代码`);

//箭头函数
const seeMei=(time:number):void=>{
    console.log(`我每天看${time}小时`);
}
//调用
seeMei(1)
//或
const seeMei1=(time:number):void=>console.log(`我每天看${time}小时`);
//调用
seeMei1(2)

//接口函数
type myfun = (x:number,y:number)=>number
const relfun:myfun=(a:number,b:number)=>a+b+100
const rel=relfun(1,2)
console.log(rel);

        2.2 函数参数的处理

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

                （2）参数的默认值

                        语法格式

function 自定义名(param1[:type],paaram2[:type]=default_value){}

                （3）剩余参数

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

export default{}
//可选参数
const func1:(a:number,b:number)=>number=(x:number,y:number)=>{
    return x
}
const func2=function(a:number,b?:number):number{
    return a
}
func2(10)
func2(10,20)
func2(10,undefined)

//参数的默认值
const func3=function(x:number,y:number,z:number=200){
    return x+y+z
}
let res = fun3(100,200)
console.log(res);
let res1 = fun3(100,200,400) //会覆盖默认值
console.log(res1)

//函数的剩余参数
const func4 = function(...args:any[]){
    lconsole.log(args)
}
func4(1,2,3,4,"李")

const func5=function(a:number,b:string,...args:any[]){
    console.log(a);
    console.log(b);
    console.log(args);
}
func5(100,"10","张",true)

        2.3 构造函数

               什么是构造函数：实例化对象的时候就赋值好了

                TypeScript支持使用js内置的构造函数用new Function()来定义函数

                语法：

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

                参数的说明

                        （1）arg1,arg2,...argN:  参数的列表

                        （2）functionBody:一个含有包含函数定义的Js语句的字符串

export default{}
var myStr = new Function("a","b","return a*b")
var str= MyStr(10,20)
console.log(str)

        2.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

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

export default{}
//函数重载
function addFunc(a:number,b:number):number
function addFunc(a:string,b:string):string
function addFunc(a:number,b:string):number
function addFunc(a:string,b:number):number
//使用函数重载
function addFunc(a:any,b:any):any{
    return a+b
}
console.log(addFunc(10,20));
console.log(addFunc("刘亦菲","鞠婧祎"));
console.log(addFunc("养",18));
console.log(addFunc(18,"迪"));


//定义参数类型与参数数量不同
function star(s1:string):void;
function star(n1:number,s1:string):void
function star(x:any,y?:any):void{
    console.log(x);
    console.log(y);
}
star("张")
star(1,"哎")

依墨~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
typescript学习笔记：类的构造函数
go_jun的博客
06-03 3332
typescript学习笔记：类的构造函数1. 通过构造函数给类增加属性2. 调用构造方法的属性3. 构造方法的访问控制服符 1. 通过构造函数给类增加属性 类的构造方法只在实例化的时候被调用，并且只调用一次。 类的构造方法在类的外部无法访问。 例如： 可以发现类的构造函数无法在类的外部调用。 在实例化的时候调用类的构造函数，并且只调用一次。 var p1 = new Person(); 如果实例化类的时候必须为类指定一个名字，可以这么写： 通过上图可以发现，实例化Person类的时候必须指定name
TypeScript 面向对象基础知识
游戏路上的小学生
04-05 1万+
孙广东  2016.4.5JavaScript如今到处都是，web、服务器（通过NodeJS）、移动应用（通过各种框架），所有这些，TypeScript都可以使用，并且可以为JavaScript扩展出面向对象和静态类型的特征。TypeScript能让我们提前使用未来的语言特性，甚至更多，例如泛型这种语言特性。TypeScript代码，最终会编译为地道的JavaScript，兼容一切使用JavaSc
Typescript 构造函数
pz1021的博客
03-15 2595
构造函数 构造函数就是在类被初始化的时候,自动执行的一个方法 构造函数的关键字:constructor 类的构造函数 希望在person类中定义一个name属性,name属性并不给初值,在new出对象的时候通过传递参数的形式给name赋值 class Person{ constructor(public name:string){ } } const person= new Person('jspang') console.log(person.name) 类继承中的构造器的写法 在子类
TypeScript 函数与以及类的使用
m0_61843988的博客
09-08 1247
函数是JavaScript应用程序的基础。它帮助你实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用
TypeScript从入门到精通（十二）类的构造函数
qq_42251357的博客
10-13 1306
类的构造函数（关键字constructor） 类的里边定义一个name，但是name我们并不给他值,然后我们希望在new出对象的时候，直接通过传递参数的形式，给name赋值，并打印出来。这时候我们就需要用到构造函数了。 class Person { public name:string ; //关键字constructor 语法糖 constructor(name:string){// this.name=name } } let person = new
TypeScrip默认参数、构造函数、匿名函数、箭头函数、接口函数.
CYSNLD的博客
09-09 1530
函数是JavaScript应用程序的基础，他帮你实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义，行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。函数分为匿名函数，命名函数(有名函数、普通函数)，箭头函数，接口函数（函数起别名）函数定义的方式//匿名函数 两个number类型参数 返回值为number类型}//调用​//有名函数 fu1就是函数名 括号后不限定则默认any}
TypeScript 基础知识总结(一)
cbkting的博客
02-19 999
在vs code 开发工具中命令行输入: 第一种用法: 分开输入。先输入 tsc 文件名称.ts; 然后再输入 node 文件名称.js; 第二种用法: 使用&&一次输入。 tsc 文件名称.ts; && node 文件名称.js . TypeScript 通过 tsc 文件名称.ts 命令编译生成 JavaScript ,然后使用命令: node 文件名称.js...
TypeScript高级用法的知识点汇总
01-19
引言 作为一门强大的静态类型检查工具，如今在许多中大型...最近公司刚好准备使用TypeScript来对现有系统进行重构，以前使用TypeScript的机会也不多，特别是一些有用的高级用法，所以借着这次机会，重新巩固夯实一下
与我一起学习-TypeScript：用函数做事
04-11
通过学习和实践这些知识点，你可以更好地掌握TypeScript中的函数用法，从而编写出更可靠、更易于维护的代码。记得在实践中不断探索，结合"Learn-with-Me-TypeScript-Doing-Things-with-Functio.pdf"和"functions.zip...
Typescript-csv分析器，用于使用类组合进行足球比赛
02-12
通过以上知识点，我们可以看到typescript-csv-analyser-for-football-matches-using-class-composition-master项目是如何结合TypeScript的特性，有效地处理和分析足球比赛数据的。理解并运用这些技术可以帮助开发者...
零基础学 TypeScript.zip
06-19
通过这个系列的学习，你将掌握 TypeScript 的基础知识，包括类型系统、类、装饰器、映射类型等，以及如何在实际项目中应用这些知识，如结合 Vuex 实现登录流程。这将帮助你从 JavaScript 过渡到 TypeScript，从而写...
TypeScript学习笔记之 类
热门推荐
喻志强的博客
01-09 1万+
传统的JavaScript程序使用函数和基于原型（prototype）的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。 但是可能要等到下个版本的javascript发布发布才能使用
TypeScript函数
归兮的博客
09-08 609
函数是JavaScript应用程序的基础，他帮你实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义，行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。
TypeScript函数——看这篇就够了！
雪野Solye的博客
04-20 676
想了解TypeScript函数，看这篇就够了！！！ 2021/04/20 第一次更新。 文章目录想了解TypeScript函数，看这篇就够了！！！函数定义函数声明式定义函数表达式定义函数声明和函数表达式不同之处函数接口定义内置构造函数定义可选参数默认参数剩余参数匿名函数匿名函数自调用递归函数函数重载箭头函数 ( lambda 表达式函数)结语 函数定义 函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个
TypeScript——类（基本概念、类和对象语法、对象和内存、this、构造函数、静态方法、 存取器、继承、super、访问权限修饰符、static、重写、里氏替换原则）
qq_52301431的博客
09-25 1665
/ 类体}1. 定义类的。
ts中构造函数class
m0_62487693的博客
03-30 597
【代码】ts中构造函数class。
TypeScript——构造函数和this
lmyh1111的博客
08-04 423
class Car { name: string age: number //constructor 被称为构造函数 // 构造函数会在对象创建时调用 constructor(name: string, age: number) { //在实例方法中，this就表示当前的实例 // 在构造函数中当前对象就是新建的那个对象 // 可以通过this向新建的对象中添加属性 this.name = name
TS-class类+类的继承+修饰符
weixin_42380671的博客
04-29 513
//类型别名 type type n = number; function f1(x:n):n{ return x; } var n2:n =10; //联合类型别名 type a = string | number[]; var c1:a = 'ccc'; var c2:a = [1,2,3]; var ...
typescript前端十个知识点
最新发布
07-29
当然，以下是 TypeScript 前端开发中的十个重要知识点： 1. 类型系统：TypeScript 是 JavaScript 的超集，它引入了静态类型检查，可以在编译时捕获潜在的类型错误，并提供更好的代码补全和文档。 2. 接口和类型：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值