TypeScript函数

最新推荐文章于 2023-02-16 20:01:27 发布

_忆拾

最新推荐文章于 2023-02-16 20:01:27 发布

阅读量616

点赞数 2

分类专栏：笔记文章标签： javascript typescript 前端

本文链接：https://blog.csdn.net/weixin_57332596/article/details/126754753

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

基本使用

介绍

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

函数定义的方式

//匿名函数  两个number类型参数  返回值为number类型
const fun = function(a:number,b:number):number{
    return a+b
}
//调用
console.log(fun(10,20))

//有名函数 fu1就是函数名     括号后不限定则默认any
function fu1(name:string,age:number){
    return name
}
//调用
console.log(fu1("张三",20))

//箭头函数 不使用function关键字 void类型表示不可设置返回值
//推荐多使用箭头函数
const fu2 = (time:number):void=>{
    console.log(time)
}
fu2(2022)

为什么需要编译ts：因为浏览器不解析ts文件，所以需要编译为js文件

函数参数的处理

可选参数：

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

可选参数在严格模式下进行运算时会报错

默认参数：

我们也可以设置参数的默认值，如果不传入该参数的值，则使用默认参数，语法格式为z:number = 100

剩余参数：

有一种情况，当不知道像函数传多少参数时，这时候可以使用剩余参数来定义

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

//可选参数  类型                              定义函数
const fun1:(a:number,b:number)=>number = (x:number,y?:number)=>{
    return x
}
//调用函数 都不会报错
fun1(10,20)

//默认参数  z:number = 100   100为z的默认值 当不传z的值时使用，
const fun2 = function(x:number,y:number,z:number = 100){
    return x+y+z;
}
//调用函数 都不会报错
fun2(100,200)
fun2(100,200,300)

//剩余参数
const fun3 = function(x:number,y:string,...args:any[]){
    console.log(x);
    console.log(y)
    console.log(args)
}
//调用函数
fun3(122,"张三",123,321,"李四")

构造函数

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

在实例化时调用构造函数直接传值

//语法格式
var myFunction = new Function("a","b","return a * b")

//实际运用
let myFun = new Function("a","b","return a * b");
//实例化
let res = myFun(10,20);
console.log(res)    //200

函数重载

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

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

参数类型不同：

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

参数数量不同：

function fu2(n1:number):void;
function fu2(n1:number,n2:number):void;

参数类型顺序不同：

function fu2(n1:number,n2:string):void;
function fu2(n1:string,n2:number):void;

如果参数不同：则将参数类型设置为any

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

//函数重载语法格式
export default {};
// 创建一个重载函数
function chong(num1: any, num2: any) {
  return num1 + num2;
}
console.log(chong("12312", 123)); //12312123
console.log(chong(12312, 123)); //12435

类

类的使用

TypeScript是面向对象的JavaScript

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

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

类名首字母建议大写

//语法格式
class class_name{
    //类作用域
}

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

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

构造函数 — 类实例化时调用，可以为类的对象分配内存构造函数中的this指向该类

方法 — 方法为对象执行的操作，

export default {};
//创建一个类
class Person {
  //字段 属性：属性值
  name: string;
  age: number;
  //构造函数   参数可以与属性不一致 此参数可理解为形参
  constructor(name: string, age: number) {
    //this指向的是该Person类
    this.name = name;
    this.age = age;
  }
  //函数(方法)
  say(): void {
    console.log(`我的名字叫${this.name}，今年${this.age}岁`);
  }
}
// 实例化
let stu1 = new Person("赵六", 10);
// 调用函数
stu1.say(); //我的名字叫赵六，今年10岁

类的继承

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

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

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

export default {};
//语法格式
//class son_class_name extends fa_class_name
//super()  子类构造中使用super()  表示调用父类的构造函数
//super.方法名()   表示调用父类中的方法

// 创建一个类
class Person {
  // 属性
  name: string;
  age: number;
  //   构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  //   方法
  say(): void {
    console.log(`我叫${this.name},我是父类`);
  }
}
// 子类继承父类
class Son extends Person {
  // 子类属性
  score: number;
  //   构造函数
  constructor(name: string, age: number, score: number) {
    // 调用父类属性 super()
    super(name, age);
    this.score = score;
  }
  //   子类方法
  say(): void {
    // 调用父方法
    super.say(); //我叫赵六, 我是父类;
    // 重写父类方法
    console.log(`我叫${this.name},我是子类`); //我叫赵六, 我是子类;
  }
}
// 实例化
let stu1 = new Son("张三", 20, 99);
// 调用实例化的对象
stu1.say();

static与instanceof

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

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

// instaceof 判断对象是否是某个指定类型 格式:对象名 instaceof 类名 返回布尔值
// 创建一个类
class Student {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
let stu1 = new Student("李四", 14);
console.log(stu1 instanceof Student);   //true

类中的修饰符

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

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

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

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

export default {};
class Person {
  protected sName: string; //受保护属性,可以被其自身及其子类访问
  private age: number; //私有属性,只能被其定义所在的类访问
  readonly sex: string; //只读属性,只可读取,不可赋值修改
  constructor(name: string, age: number, sex: string) {
    this.sName = name;
    this.age = age;
    this.sex = sex;
  }
}
let p1 = new Person("赵六", 20, "男");
// console.log(p1.name); //报错 类中的name为受保护属性 只可以被本身及其子类访问
// console.log(p1.age); //报错 类中的age为私有属性 只能被其定义所在的类访问
console.log(p1.sex); //男
// p1.sex = "李四"  //报错 类中的sex为只读属性

getter与setter

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

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

注意：

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

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

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

export default {};
// 声明一个类
class Person {
  // 私有属性
  private name: string = "赵六";
  // 取值
  get getName() {
    console.log("get被触发");
    return this.name;
  }
  //   设置值   传入值
  set setName(name: string) {
    console.log("set被触发");
    this.name = name;
  }
}
// 实例化一个对象
let p1 = new Person();
console.log(p1);
// 查看当前的name值
console.log(p1.getName); //get被触发    赵六
// 设置name值
p1.setName = "李四"; //set被触发
// 查看修改后的name值
console.log(p1.getName); //get被触发    李四

抽象类

抽象类作为其他派生类的基类使用，他们一般不会直接被实例化

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

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

抽象类和接口的区别：

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

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

export default {};
// 声明一个抽象类
abstract class Person {
  abstract name: string;
  abstract age: number;
  show() {}
}
// 声明一个类继承
class Student extends Person {
  name: string = "张三";
  age: number = 20;
}
let stu1 = new Student();
console.log(stu1); //Student { name: '张三', age: 20 }

类的初始化顺序

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

export default {};
// 父类
class Old {
  name: string = "张三";
  constructor() {
    console.log(`我的名字是：${this.name}`);
  }
}
// 子类
class Young extends Old {
  name: string = "李四";
  constructor() {
    super();
  }
}
let y = new Young();
console.log(y);
//1、我的名字是：张三     Old类
//2、Young { name: '李四' }       Young类

_忆拾

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript函数

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

扫一扫