TypeScript 全面介绍(2)

本文涉及的产品
访问控制,不限时长
简介: TypeScript 全面介绍 2

6. 重载

       在旧 js 中,重载定义一个函数,在函数内根据传入的参数不同执行不同的逻辑;


       而在 TS 中:先定义多个形参列表不同的同名函数声明,且先不实现函数体,


function 函数名():void; 
function 函数名(形参:数据类型):void;  
//void代表这个函数,没有返回值
//如果函数有返回值,必须将void改为返回值的具体类型
        其次定义一个可实际执行多种任务的函数来支持上方多种重载的情况。
function 函数名(){
}

举例:使用重载实现三种支付方式;


// 先定义三种重载的情况
// void代表这个函数没有返回值
function pay(): void;
function pay(money: number): void;
function pay(card: string, pwd: string): void;
function pay(...arr: any[]) {
  if (arr.length == 0) {
    console.log(`手机支付`);
  } else if (arr.length == 1) {
    console.log(`微信支付`);
  } else {
    console.log(`刷卡支付`);
  }
}
pay(); //手机支付
pay(10000); //微信支付
pay("123456", "000"); //刷卡支付
//pay(123,456)  不符合最初定义的三种重载情况时直接报错

运行结果如下:

image.png


7. class

class 类型的定义:


class 类型名{
   属性名1:数据类型=初始值;
   属性名2:数据类型=初始值;
 constructor(形参1:数据类型, 形参2:数据类型){
   this.属性名1=形参1;
   this.属性名2=形参2;
   }
   方法名():数据类型{ ... }
}

       注意:TS 中 class 的属性必须在构造函数上方提前定义并指定数据类型,这样才能在构造函数中执行 this.属性名=赋值。


举例:定义学生类型,描述学生统一结构;


class student {
  sname: string = "";
  sage: number = 0;
  constructor(sname: string, sage: number) {
    this.sname = sname;
    this.sage = sage;
  }
  intr(): any {
    console.log(`我是${this.sname},我今年${this.sage}岁。`);
  }
}
var zhang = new student("张飞", 52);
zhang.intr();
console.log(zhang);

运行结果如下:

image.png

       class 中的所有成员无论在 class 内还是在子类型内或者在全局,都可用 ”this.属性名” 或” 对象名.属性名”方式访问;但如果有些数据不想让随意访问,就需要用到访问控制修饰符。


       访问修饰符是专门修饰一个属性或一个方法的可用范围的关键字;格式如下:


访问控制修饰符 属性名 : 数据类型 = 初始值


访问控制修饰符的三种类型:


(1)public 公有(默认),表示子类型和类外部都可访问到的类成员;


(2)protected 受保护,表示只有父子类型范围内才能使用,外部不可用;


(3)private 私有,表示仅 class 内可用,子类型和外部都不能用。


举例:通过一个一家人管钱的例子说明访问控制修饰符的三种类型;


class Father {
  public moneyPublic: string = "Father公开的钱";
  protected moneyProtected: string = "Father和Son的钱";
  private moneyPrivate:string="Father私有的钱";
  fatherPay() {
    console.log(`Father用${this.moneyPublic}给自己买了一包烟!`);
    console.log(`Father用${this.moneyProtected}给自己买了一块表!`);
    console.log(`Father用${this.moneyPrivate}给自己买了一身衣服!`);
  }
}
class Son extends Father {
  sonPay() {
    console.log(`Son用${this.moneyPublic}给自己买了一个玩具!`);
    console.log(`Son用${this.moneyProtected}给自己买了零食!`);
  }
}
var f1 = new Father();
var s1 = new Son();
f1.fatherPay();
s1.sonPay();
// 全局mother
console.log(`mother用${f1.moneyPublic}给自己买了一个包包!`);

运行结果如下:

image.png


8. 接口

       如果希望开发人员一定要按照架构师的要求实现程序结构时,都用接口来规范。首先是定义接口:


interface I接口名{
  规定的属性名: 类型;
  规定的方法名(参数:数据类型):返回值;
}

       接下来“实现接口”:

class 类型名 implements I接口名{
  //必须包含接口中规定的属性和方法
}

举例:使用接口规范实现飞机飞行;


interface IPlane {
  x: number;
  y: number;
  fly(): void;
}
class Plane implements IPlane {
  x: number = 0;
  y: number = 0;
  score: number = 0;
  constructor(x: number, y: number, score: number) {
    this.x = x;
    this.y = y;
    this.score = score;
  }
  fly(): void {
    console.log(`飞到x=${this.x},y=${this.y}的位置`);
  }
  getScore(): void {
    console.log(`击落敌机得${this.score}分`);
  }
}
var p = new Plane(100, 20, 20);
p.fly();
p.getScore();
console.log(p);

运行结果如下:

image.png



9. 模块化开发

       模块化开发即哪个文件想使用另一个文件的内容,直接 引入即可。


       只导出一个接口或类型时:


//先创建类型/接口
//导出
export default 类型名/接口名
//引入
import 类型名 from “相对路径”
        导出多个接口或类型:
//先创建多个类型/接口
//导出
export { 类型名, … }
//引入
import { 类型名, … } from “相对路径”
相关实践学习
消息队列+Serverless+Tablestore:实现高弹性的电商订单系统
基于消息队列以及函数计算,快速部署一个高弹性的商品订单系统,能够应对抢购场景下的高并发情况。
云安全基础课 - 访问控制概述
课程大纲 课程目标和内容介绍视频时长 访问控制概述视频时长 身份标识和认证技术视频时长 授权机制视频时长 访问控制的常见攻击视频时长
相关文章
|
2月前
|
JavaScript 安全
TypeScript使用真的很麻烦吗?
TypeScript使用真的很麻烦吗?
29 3
|
7月前
|
JavaScript 前端开发 开发者
TypeScript一
JavaScript开发迅速但维护成本高,适合小型项目,因其动态类型导致编辑器提示不全。TypeScript是JS超集,增加了类型系统,提高开发效率和代码质量。安装TypeScript需先安装Node.js,然后通过npm安装tsc。案例演示创建`.ts`文件,转换成`.js`并运行。TypeScript支持多种数据类型,如any、number、string等,并有严格变量声明和函数定义规则,包括函数重载和匿名函数。
|
7月前
|
JavaScript 前端开发
TypeScript二
JavaScript Number对象包含多种方法,如`toExponential()`将数值转化为指数形式,`toFixed()`保留指定位数的小数,`toLocaleString()`按本地格式显示数字,`toPrecision()`格式化数字到指定长度,`toString()`以指定基数表示数字,而`valueOf()`返回原始数值。此外,示例中还展示了Date对象的格式化方法。对于String对象,有`constructor`返回创建对象的函数,`length`获取字符串长度,`prototype`用于扩展对象,以及一系列如`charAt()`、`indexOf()
|
7月前
|
开发框架 JavaScript 前端开发
什么是TypeScript
什么是TypeScript
37 0
|
7月前
|
JavaScript 前端开发 Java
TypeScript
TypeScript是JavaScript的一个超集,简称ts,ts是能够完全兼容js的ts是一门静态类型的语言,js是动态类型的语言
59 0
|
JavaScript
【TypeScript理解】
【TypeScript理解】
|
JavaScript 前端开发 数据库
TypeScript 期中考试现在开始
相信这段时间来,对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。如果计划开始学习但是还没有开始,或者没有找到资料的同学,可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程,自行学习。
|
JSON JavaScript 前端开发
Typescript知识总结(1)
Typescript知识总结(1)
Typescript知识总结(1)
|
JavaScript 前端开发
初识 TypeScript 二。
初识 TypeScript 二。
初识 TypeScript 二。