【TS篇三】类、函数、for-of循环、类型推断

news/2024/11/7 18:31:28/

文章目录

    • 一、类
      • 1.1 基本示例
      • 1.2 继承
      • 1.3 实例成员访问修饰符
        • 1.3.1 `public` 开放的
        • 1.3.2 `private` 私有的
        • 1.3.3 `protected` 受保护的
        • 1.3.4 `readonly` 只读的
        • 1.3.5 在参数中使用修饰符
      • 1.4 属性的存(get)取(set)器
      • 1.5 静态成员
    • 二、函数
      • 2.1 函数参数
      • 2.2 箭头函数
    • 三、for-of 循环
    • 四、类型推断(Type Inference)
    • 五、模块
      • 5.1 概念
      • 5.2 模块通信:导出
      • 5.3 模块通信:导入

一、类

1.1 基本示例

class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}sayHello() {console.log(this.name);}
}let zs: Person = new Person('张三', 18);

1.2 继承

class Animal {move(distanceInMeters: number = 0) {console.log(`Animal moved ${distanceInMeters}m.`);}
}class Dog extends Animal {bark() {console.log('Woof! Woof!');}
}const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

这个例子展示了最基本的继承:类从基类中继承了属性和方法。 这里, Dog是一个 派生类,它派生自 Animal 基类,通过 extends关键字。 派生类通常被称作 子类,基类通常被称作 超类

因为 Dog继承了 Animal的功能,因此我们可以创建一个 Dog的实例,它能够 bark()move()

下面是一个更复杂的例子:

class Animal {name: string;constructor(theName: string) { this.name = theName; }move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}class Snake extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 5) {console.log("Slithering...");super.move(distanceInMeters);}
}class Horse extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 45) {console.log("Galloping...");super.move(distanceInMeters);}
}let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");sam.move();
tom.move(34);

与前一个例子的不同点是,派生类包含了一个构造函数,它 必须调用 super(),它会执行基类的构造函数。 而且,在构造函数里访问 this的属性之前,我们 一定要调用 super()。 这个是TypeScript强制执行的一条重要规则。

这个例子演示了如何在子类里可以重写父类的方法。 Snake类和 Horse类都创建了 move方法,它们重写了从Animal继承来的 move方法,使得 move方法根据不同的类而具有不同的功能。 注意,即使 tom被声明为Animal类型,但因为它的值是 Horse,调用 tom.move(34)时,它会调用 Horse里重写的方法:

Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 34m.

1.3 实例成员访问修饰符

1.3.1 public 开放的
  • 默认为 public
class Animal {public name: string;public constructor(theName: string) { this.name = theName; }public move(distanceInMeters: number) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}
1.3.2 private 私有的
  • 不能被外部访问,只能在类的内部访问使用
  • 私有成员不会被继承
class Person {public name: string;public age: number = 18;private type: string = 'human'public constructor (name, age) {this.name = namethis.age = age}
}
1.3.3 protected 受保护的
  • private 类似,但是可以被继承
class Person {protected name: string;constructor(name: string) { this.name = name; }
}class Employee extends Person {private department: string;constructor(name: string, department: string) {super(name)this.department = department;}public getElevatorPitch() {return `Hello, my name is ${this.name} and I work in ${this.department}.`;}
}let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // 错误

注意,我们不能在 Person类外使用 name,但是我们仍然可以通过 Employee类的实例方法访问,因为Employee是由 Person派生而来的。

1.3.4 readonly 只读的
1.3.5 在参数中使用修饰符

在上面的例子中,我们不得不定义一个受保护的成员 name和一个构造函数参数 theNamePerson类里,并且立刻给 nametheName赋值。 这种情况经常会遇到。 参数属性可以方便地让我们在一个地方定义并初始化一个成员。

class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}
}

可以简写为:

class Person {constructor(public name: string, public age: number) {}
}

1.4 属性的存(get)取(set)器

let passcode = "secret passcode";class Employee {// 私有成员,外部无法访问private _fullName: string;// 当访问 实例.fullName 的时候会调用 get 方法get fullName(): string {return this._fullName;}// 当对 实例.fullName = xxx 赋值的时候会调用 set 方法set fullName(newName: string) {if (passcode && passcode == "secret passcode") {this._fullName = newName;}else {console.log("Error: Unauthorized update of employee!");}}
}let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {alert(employee.fullName);
}

1.5 静态成员

  • 不需要实例化访问的成员称之为静态成员,即只能被类访问的成员
  • static 关键字
class Grid {static origin = {x: 0, y: 0};calculateDistanceFromOrigin(point: {x: number; y: number;}) {let xDist = (point.x - Grid.origin.x);let yDist = (point.y - Grid.origin.y);return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;}constructor (public scale: number) { }
}let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scaleconsole.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

二、函数

2.1 函数参数

  • 参数及返回值类型
function add(x: number, y: number): number {return x + y
}
  • 可选参数
function add(x: number, y?: number): number {return x + 10
}
  • 默认参数
function add(x: number, y: number = 20): number {return x + y
}
  • 剩余参数
function sum(...args: number[]): number {let ret: number = 0args.forEach((item: number): void => {ret += item})return ret
}sum(1, 2, 3)

2.2 箭头函数

  • 基本示例
let add = (x: number, y: number): number => x + y

三、for-of 循环

  • for 循环
  • forEach
    • 不支持 break
  • for in
    • 会把数组当作对象来遍历
  • for of
    • 支持 break

四、类型推断(Type Inference)

TypeScript 编译器会根据一些简单的规则来推断你定义的变量的类型

​ 当你没有标明变量的类型时,编译器会将变量的初始值作为该变量的类型

let num = 3
//此时我未标注 num 变量的类型 ,初始值为数字类型 , 变量num为数字类型
let str = 'string'
//此时我未标注 str 变量的类型 ,初始值为字符串类型 , 变量str为字符串类型

当然,类型推断不仅仅发生在简单数据类型上面,复杂数据类型上依然可以被TypeScript编译器进行推断

let arr = ['one','two','three']
//此时未标注 arr 数组中的每个元素类型 , 初始值为字符串,则相当于:
//let arr : string[]//但如果数组中没有元素,为空数组,则类型为 neverlet obj = {a:1,b:2}
//此时未标注对象内的数据类型,默认为初始值,为数字类型
//let obj : {a:number,b:number}//不仅如此,ts编译器还会推断函数的返回值类型
const fun = (a:number,b:number) =>{retrun a + b;
}
//const fun =(a:number,b:numer) => number

但在使用函数返回值类型推断时,在编写函数内部的代码就失去了函数返回值类型检测功能,使用函数返回值的类型需要明确的指定

​ 正常情况下,TypeScirpt编译器时可以推断出变量类型的,开发者不需要编写类型注释,但在TypeScirpt编译器不能正常推断类型时,开发者需要编写类型注释

  • 第一种情况:
    如果一个变量被声明后,没用被立即初始化,那么编译器将不能正确推断出它的类型,将被赋予any类型

    let anything 
    //此时变量未被及时初始化,编译器默认它为any类型:let anything :any
  • 第二种情况:
    当被调用的函数的返回值为any类型的时候,应该使用类型注释来声明它的类型

    let json ='{"name":"张三"}';
    let person = JSON.parse(json);
    //let json:string
    //let person:any => let person:{name:string}
  • 第三种情况:
    ​ 当变量有可能有多个类型时:

    let num = [-10,-1,20]
    //target => bollean|number
    let target =falsefor(let i=0;i<num.length;i++){if(num[i]>0){//不能将number类型分配给bollean类型target = num[i];}
    }
  • 第四种情况:
    函数的参数必须标注类型,TypeScript并不能推断函数参数的类型

五、模块

5.1 概念

5.2 模块通信:导出

export default xxxexport const foo: string = 'bar';
export const bar: string = 'foo';

5.3 模块通信:导入

// 加载默认成员
import xxx from '模块标识'// 按需加载模块成员
import {foo, bar} from '模块'

http://www.ppmy.cn/news/1195640.html

相关文章

rhcsa-vim

命令行的三种模式 将ets下的passwd文件复制到普通用户下面 编辑模式的快捷方式 a--光标后插入 A--行尾插入 o--光标所在上一行插入 O--光标所在上一行插入 i--光标前插入 I--行首插入 s--删除光标所在位然后进行插入模式 S--删除光标所在行然后进行插入 命令模式的快捷…

成人听力筛查的现状

作者&#xff1a;兰明&#xff0c;医学硕士&#xff0c;听力学博士&#xff0c;听觉健康门诊主任。 你有听力障碍吗&#xff1f;你的家人有听力障碍吗&#xff1f;如果有人提出这样的问题&#xff0c;你的回答多数都是“真不知道”。为什么&#xff1f; 因为我们缺乏成人…

代码之言:程序员的注释之道

目录 前言程序员不写注释的立场如何写出漂亮的注释结语 前言 在编程世界中&#xff0c;注释是一种看似微不足道但实际上至关重要的元素。它们是代码的伴随者&#xff0c;为代码库的使用者和维护者提供了重要的上下文和指导。然而&#xff0c;有一群程序员坚持不写注释&#xf…

SpringBoot集成Dubbo

在SpringMVC中Dubbo的使用https://tiantian.blog.csdn.net/article/details/134194696?spm1001.2014.3001.5502 阿里巴巴提供了Dubbo集成SpringBoot开源项目。(这个.....) 地址GitHub https://github.com/apache/dubbo-spring-boot-project 查看入门教程 反正是pilipala一大…

docker 安装 mysql (单体架构)

文章归档&#xff1a;https://www.yuque.com/u27599042/coding_star/nckzqa73g47hgz3x 查询 MySQL 镜像 docker search mysql拉取 MySQL 镜像 docker pull mysql在宿主机创建映射目录 mkdir -p \ /home/docker/mysql/log \ /home/docker/mysql/data \ /home/docker/mysql/co…

mit6.s081 笔记

1、系统调用 系统调用具体过程。 在任何地方&#xff0c;当我们需要使用系统调用时&#xff0c;只需要include “user/user.h”&#xff0c;就可以通过里面的函数声明来调系统调用&#xff0c;其函数的具体实现由 user/usys.pl 脚本帮我们生成对应的汇编代码&#xff08;具体代…

[AUTOSAR][诊断管理][ECU][$37] 请求退出传输。终止数据传输的(上传/下载)

文章目录 一、简介二、服务请求报文定义肯定响应支持的NRC三、示例流程Step 1:Step 2:报文示例:Step 1:请求RequestDownload(0x34)服务Step 2:请求TransferData (0x36)服务,传输数据Step 3:请求RequestTransferExit(0x37)服务总结:三、示例代码37_req_transfer_e…

2. 网络之网络编程

网络编程 文章目录 网络编程1. UDP1.1 DatagramSocket1.1.1 DatagramSocket 构造方法1.1.2 DatagramSocket 方法&#xff1a; 1.2 DatagramPacket1.2.1 DatagramPacket构造方法1.2.2 DaragramPacket方法1.2.3InetSocketAddress API 1.3 UDP回显服务器1.3.1 框架结构1.3.2 读取请…