Typescript函数和类的使用

最新推荐文章于 2023-06-17 11:02:46 发布
最新推荐文章于 2023-06-17 11:02:46 发布
阅读量483 收藏
点赞数 2
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63716324/article/details/126770044
版权

一、函数的基本使用

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

函数定义的方式：

匿名函数:

const nim = function (one, two) {
    return one + two
}
let res = nim(100, 800)
console.log(res);

命名函数|普通函数 

function two(name: string, age: number) {
    return `我叫${name},今年${age}岁`
}
let res1 = two("张三", 18)
console.log(res1);

箭头函数

const three = (time: number): void => {
    console.log(`我每天敲${time}小时代码`);

}
three(8)

接口函数

type myFunc = (x: number, y: number) => number
const four: myFunc = (a: number, b: number) => a + b

let res2 = four(3, 2)
console.log(res2);

二、函数参数的处理

export default {}
//可选类型
const func1: (a: number, b: number) => number = (x: number, y: number) => {
    return x;
}
console.log(func1(1000, 2000));

const func2 = function (a: number, b?: number): number {
    return a;
}
// func2(10);
// func2(10, 20);
// func2(10, undefined);
console.log(func2(10));
console.log(func2(10, 20));
console.log(func2(10, undefined));


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


// 函数的剩余参数

const func4 = function (...args: any[]) {
    console.log(args);

}
func4(1, 2, 3, 4, 5, "张三")

const func5 = function (a: number, b: string, ...args: any[]) {
    console.log(a);
    console.log(b);
    console.log(args);
}
func5(10, "20", 30, "张三", "李四")

三、构造函数

export default {}
//构造函数
var one = new Function("a", "b", "return a*b");
var res = one(10, 20)
console.log(res);

四、函数重载

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

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

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;
}
addFunc(10, 20)
addFunc("10", "20")
addFunc(10, "20")
addFunc("10", 20)
console.log(addFunc(10, 20));
console.log(addFunc("10", "20"));
console.log(addFunc(10, "20"));
console.log(addFunc("10", 20));

//函数参数不同
function star(s1: string): string;
function star(n1: number, s1: string): string
function star(x: any, y?: any): string {
    return x;
    console.log(x);
    console.log(y);

}
console.log(star("王五",));

五、类的基本使用

定义

  • Typescript是面向对象的JavaScript
  • 类描述了所创建的对象共同的属性和方法。
  • Typescript支持面向对象的所有特性，比如类、接口等。
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}岁了,但是在我心里她永远18岁!`);

    }
}
// 实例化
let p = new Person("成果", 27);
p.sayHello()

六、类的继承

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

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}岁了,但是在我心里她永远18岁!`);

    }
}
// 实例化
let p = new Person("成果", 27);
p.sayHello()
class Student extends Person {
    score: string
    constructor(name: string, age: number, score: string) {
        // 调用父类中的构造函数
        super(name, age)
        this.score = score
    }
    sayHello(): void {
        // 调用父类中的方法
        // super.sayHello()
        // 重写父类中的函数
        console.log(`我是重写的方法,我叫${this.name},今年${this.age}岁,我的评分是${this.score}`);
    }
}

let s = new Student("张三", 20, "sss")
s.sayHello()

七、static和instanceof

static关键字用于定义类的数据成员(属性和方法)为静态的，静态成员可以直接通过类名调用。instankeof运算符用于判断对象是否是指定的类型，如果是返回true，否则返回false。

export default {}
class StaticTest {
    static salary: number
    static say(): void {
        console.log(`我们想要的工资是${StaticTest.salary}k`);
    }
}
StaticTest.salary = 10000;
StaticTest.say()


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);

八、类中的修饰符

public(默认):公有，可以在任何地方被访问
protected:受保护。可以被其自身以及其子类访问

private:私有，只能被其定义所在的类访问,
readonly:可以使用readon1y关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

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 Studemt 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);
    }
}


//**readonly**:可以使用‘readonly`关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。
class Print {
    readonly str4string = "我是声明时赋值的"
    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
    }

    // say():void{
    //     this.str2="爱你"
    // }
    hs(): void {
        console.log(this.str2, this.str3, this.str4, this.str5);

    }
}
let p = new Print("刘亦菲", "刘亦菲2", "刘亦菲3", "刘亦菲4")
p.hs()

九、getter和setter

如果存在get，但没有set ，则该属性自动是只读的
如果没有指定setter参数的类型，它将从getter的返回类型中推断出来

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

export default {}

class MyName {
    private _fullName: string = "杨幂";
    //读取字段的值
    get fullName() {
        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 = 27
    show() {
        return "爱情公寓5"
    }
}
let s = new Student()
let res = s.show()
console.log(res);

十一、类的初始化顺序

  • 基类的字段被初始化
  • 基类构造函数运行
  • 子类的字段被初始化
  • 子类构造函数运行  
    export default {}
class Old {
    name: string = "李易峰";
    constructor() {
        console.log(`我是${this.name}，我主演了古剑奇谭`);
    }
}
class Young extends Old {
    name: string = "刘亦菲";
    constructor() {
        super()
        console.log(`我是${this.name}，我主演了天龙八部`)
    }
}
let y = new Young()

执笔丶画苍生
关注
typescript 函数
jeason_chan_zju的博客
12-01 274
//typescript的函数定义和java十分类似，有点不同的地方在于： //1、可以定义匿名函数 //2、可以以变量名的方式传递函数的引用地址 //3、直接使用lambda表达式定义匿名函数 //4、可能还有其他不同点，待发掘 //最正常的方式定义函数 function myfuntion(): void { console.log("最正统的函数定义方式"); } myfunti...
TypeScript：函数类型接口
风静如云的博客
03-20 4264
接口也可以用于描述函数的形状，也就是描述函数的参数列表，以及返回值类型： interface phoneCall{//定义一个打电话的函数类型接口，约定该函数需要有一个string类型的参数，然后返回值类型为void (phoneNumber : string):void; }; let makePhoneCall: phoneCall;//定义一个phoneCall接口类型的变量 function iphone(phoneNumber : string):void{//定义通过iphone打电话
typescript2
weixin_30318645的博客
09-19 117
一、typescript1.for offorEach() for in && for offor of 忽略数组的属性，但是可以跳出循环语法：var (var x of arr1){if(x>2) break;console.log('for of',x);}for of可以作为遍历数组的方法，也可以遍历字符串for(var y of 'hello word'){...
TypeScript函数和类
m0_72738258的博客
09-08 260
const a = function(b:string,c:string):string{ return b+c}function aa(bb:string,cc:string):string{ return bb;}输出单个括号可以省略const aaaaa = (time:number):void=>console.log(`2022年9月8日10:00:48${time}`);const aaa = (time:number):void=>{ console.log(`2022年9月
Typescript的函数的使用
Frank_Good的专栏
05-14 744
命名函数[javascript] view plain copyfunction add(x:number,y:number):string{      return 'hello typescript';  }  匿名函数 [javascript] view plain copyvar myAdd=function(x:number,y:number):string{      return '...
typescript函数使用
马优晨
07-10 418
一、定义函数的方式： 函数声明（Function Declaration） 函数表达式（Function Expression） 用接口定义函数 函数的类型 (1)函数声明 function sumNumber(x: number, y: number): number { return x + y } sumUpNumber(1, 2) function addMyMes(x: n...
TypeScript函数的基本使用
W的博客
09-08 767
TypeScript函数的基本使用
TypeScript 函数
12-13
TypeScript 函数 函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个特定的任务来进行的。 函数声明...
naive_functional_programming:使用TypeScript进行函数式编程的幼稚方法
03-21
天真的函数式编程方法 我正在尝试学习函数式编程，这可能会让人难以理解。 搜索函数式编程通常会导致一堆无法理解的术语（至少对我而言），试图将F字用新名称（例如...与其走在街上试图绘制地图，不如使用卫星图片。
TypeScript函数参数和返回类型的注解
Riven的博客
10-15 2758
简单的类型定义 还是上次代码 function getTotal(one: number, two: number) { return one + two; } const total = getTotal(1, 2); 这时候我们写的代码其实是有一个小坑的，就是我们并没有定义getTotal的返回值类型，虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了，比如写程了下面这个样子。 function getTotal(one: number, two:
TypeScript教程（2）
humanity11的博客
04-05 446
typescript 的使用用编辑器在文件夹test下生成创建一个hello.ts的文件，并写入如下内容：export class hello{ }在命令行下 tsc hell.ts就会生成hello.js的文件，这就是tytescript过程。当然我们也可以在线的方式学习typescript的语法https://www.typescriptlang.org/play/index.html。（2...
TypeScript函数：定义、调用和参数传递
与墨的编程成长历程
06-17 4652
在 TypeScript 中，函数的定义方式和 JavaScript 相同，TypeScript 函数可以创建有名字的函数和匿名函数。在定义 TypeScript 时需要指定函数的参数类型和返回值类型。在这个函数中，我们指定了两个参数的类型（和），以及函数的返回值类型（: number本文介绍了 TypeScript 函数的定义、调用和参数传递方法。通过学习这些知识，可以更好地理解 TypeScript 中的函数概念，并使用 TypeScript 开发更可靠、可维护的程序。
Typescript 2-类
GY的博客
08-29 325
TypeScript面向对象编程---类 1. Typescript类1.1 类的定义1.2 创建实例化对象1.3 类的继承1.4 继承类的方法：重写1.5继承和重写的综合例子1.6 static关键字
TypeScript2-基本语法
晴雪月乔的博客
05-01 141
TS 类型注解
typescript(2)：接口
qq_42309685的博客
12-01 140
接口 介绍 在 typescript 中，接口的作用就是为类型检查命名和为代码获第三方代码提供契约 基本写法 interface label { labelStr: string } 可选属性 接口里的属性不全都是必需的。带有可选属性的接口预普通的接口定义差不多，只是在可选属性名字定义的后面加上一个 ? 符号 可选属性的书写方法 interface config { color?: string, width?: string } 只读属性 只能在
JavaScript2带代码
weixin_44325370的博客
12-15 416
JavaScript JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) 客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 动态效果 增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验 1. ECMAScript： 2. BOM： 3. DOM： 1. 事件 ECMAScript 客户端脚本语言的标准 1.基
vue2 in typescript2 (4) - hello
galileo2016的博客
09-17 820
vue2 typescript2
Typescript 2+迷你书 ：从入门到不放弃
weixin_34049948的博客
03-15 187
前言 文中会穿插部分ES6&7的代码(此处不在解释什么作用域什么的,作用什么的)，能言简意赅的绝不废话哈; 文中的ts或者ts2皆指typescript; 这不是一个合格的手册,要想深入和更全应该看官方的手册文档加以练习和尝试 Typescript 三问三答 Typescript是什么！ ts不是编程语言，可以理解为一种补充(超集)，让JS具有后端的部分特点(类型推断) ts不等...
六、TypeScript-函数新特性
xyphf的博客
09-04 572
6-1：TypeScript-Rest and Spread操作符 Rest and Spread第一种用法 下面我们来介绍一些Rest and Spread 操作符: 用来声明任意数量的方法参数 参数前面的三个点就是Rest and Spread 操作符，表示这个参数你可以传任意数量的参数进来 Rest and Spread第二种用法 但一个函数有固定的参数时，我们也可以这样调用, ...
typescript 函数重载
最新发布
08-14
TypeScript 函数重载是指在一个函数体内定义多个函数签名，以支持不同的参数类型或参数个数。...通过函数重载，我们可以根据不同的参数类型或个数，使用相同的函数名称来进行函数调用，从而提高代码的可读性和灵活性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值