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

文章目录

    • 一、类
      • 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.mzph.cn/news/129450.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt之动画】详解

概述 QPropertyAnimation类用于动画化Qt属性。 QPropertyAnimation类在Qt属性上进行插值。由于属性值存储在QVariants中&#xff0c;所以该类继承自QVariantAnimation&#xff0c;并支持与其父类相同的元类型的动画。 声明属性的类必须是QObject。为了可以动画化一个属性&am…

【李群李代数】【manif 】基于固定信标的2D机器人定位 (Error State Kalman Filter)...

demo演示 运行结果 我们考虑一个机器人在平面上被少量的准时地标或_信标 包围。 机器人以轴向速度和角速度的形式接收控制动作&#xff0c;并且能够测量信标相对于其自身参考系的位置。 机器人位姿 X 在 SE(2) 中&#xff0c;信标位置 b_k 在 R^2 中&#xff0c; | cos th -si…

AM@二阶常系数非齐次线性微分方程@待定系数法可解决的经典类型1

文章目录 abstract二阶常系数非齐次线性微分方程待定系数法可解类型类型1小结例 abstract 二阶常系数非齐次线性微分方程待定系数法可解决的经典类型1及其解法总结与应用 本文给出类型1为什么可以通过待定求出特解,并且待定函数要设成什么形式推理过程有一定工作量,而在应用中…

Android系统Launcher启动流程学习(二)launcher启动

Zygote&#xff08;孵化器&#xff09;进程启动 在init进程中有解析.rc文件&#xff0c;在这个rc文件中配置了一个重要的服务service–zygote&#xff0c;这是app程序的鼻祖 zygote进程主要负责创建Java虚拟机&#xff0c;加载系统资源&#xff0c;启动SystemServer进程&#…

求两个(法)向量之间的rpy夹角

主要使用Eigen库实现: 1. 四元素到欧拉角的转换 #include <array> #include <Eigen/Geometry>template <typename T> inline Eigen::Matrix<typename std::remove_reference<T>::type::Scalar, 3, 1> eulerAnglesZYX(T q_in) {typedef typenam…

Postgresql批量按照顺序更新某一个字段

如批量更新采购订单行sequence字段&#xff0c;按照订单行id的顺序赋值1&#xff0c;2&#xff0c;3&#xff0c;4...&#xff1a; UPDATE purchase_order_line_copy1 SET sequence subquery.new_sequence FROM (SELECT id, ROW_NUMBER() OVER (ORDER BY id) AS new_sequence…

Pytest-Allure及Allure命令使用

一、Allure介绍 Allure是Pytest用于生成测试报告的框架&#xff0c;提供丰富的测试报告功能&#xff1b; 二、Allure安装 Allure安装分为2块&#xff0c;分别是pytest-Allure库安装&#xff0c;本地生成报告并导出的命令行allure安装&#xff1b; 1、pytest-Allure库安装 …

Ubuntu22.04离线安装docker

Ubuntu22.04离线安装docker carrycarryvm:~/deploy/docker_deploy$ tree -L 2 . ├── pkgs │ ├── containerd.io_1.6.8-1_amd64.deb │ ├── docker-ce-cli_24.0.5-1~ubuntu.22.04~jammy_amd64.deb │ ├── docker-ce_24.0.5-1~ubuntu.22.04~jammy_amd64.deb …

时序预测 | Python实现ARIMA-CNN-LSTM差分自回归移动平均模型结合卷积长短期记忆神经网络时间序列预测

时序预测 | Python实现ARIMA-CNN-LSTM差分自回归移动平均模型结合卷积长短期记忆神经网络时间序列预测 目录 时序预测 | Python实现ARIMA-CNN-LSTM差分自回归移动平均模型结合卷积长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 …

【vtk学习笔记4】基本数据类型

一、可视化数据的基本特点 可视化数据有以下特点&#xff1a; 离散型 计算机处理的数据是对无限、连续的空间进行采样&#xff0c;生成的有限采样点数据。在某些离散点上有精确的值&#xff0c;但点与点之间值不可知&#xff0c;只有通过插值方式获取数据具有规则或不规则的结…

机器学习 - 加油站数据分析

一、实验数据 数据集&#xff1a;“加油站数据.xls” 数据集介绍&#xff1a;该表记录了用户在11月和12月一天24小时内的加油信息&#xff0c;包括&#xff1a;持卡人标识&#xff08;cardholder&#xff09;、卡号&#xff08;cardno&#xff09;、加油站网点号&#xff08;n…

本人支付人民币100元,求解答。String,intern(),StringBuilder相关

求大佬解答 环境&#xff1a; java8 之前版本不考虑 执行顺序&#xff1a; 第一行 天 第二行 地 第三行 人 三行代码 每次都只执行一句代码 即 天地人 一次只执行一个 观察结果 求解答 为什么结果不同 能把我讲明白 直接发收款码 文章看了几篇 讲的各有各的道理 放在单个可…

LeetCode 面试题 16.13. 平分正方形

文章目录 一、题目二、C# 题解 一、题目 给定两个正方形及一个二维平面。请找出将这两个正方形分割成两半的一条直线。假设正方形顶边和底边与 x 轴平行。 每个正方形的数据 square 包含3个数值&#xff0c;正方形的左下顶点坐标 [X,Y] [square[0],square[1]]&#xff0c;以及…

Simulink的To Workspace

To Workspace模块将Simulink产生的数据存储到matlab的工作区。 用To Workspace模块中的数据进行绘图。 参见Matlab/simulink/simscape multibody-to wotkspace模块使用_to workspace模块_五VV的博客-CSDN博客To workspace模块入门详解_哔哩哔哩_bilibili&#xff08;很好&#…

c++之类和对象

首先我们要理解cin,cout只能自动识别内置类型&#xff0c;原因就是因为cin,cout里面的函数重载。 那么如果我想输入非内置类型&#xff0c;就要进行运算符重载。 但是会发生如下的情况。 友元函数可以访问对象的私有。 运算符重载的总结 成员初始化既可以用函数体内初始化也可…

月报总结|Moonbeam 10月份大事一览

万圣节快乐&#xff01;时间一晃眼&#xff0c;10月已经迈入尾声&#xff0c;也即将迎来寒冷的冬天。但与季节相反&#xff0c;加密产业近期的发展可以说是高潮起伏&#xff0c;热度不断攀升。Moonbeam在10月中也发布了许多重大的更新&#xff0c;如Uniswap V3前段上线、众贷DO…

antd的Table组件使用rowSelection属性实现多选时遇到的bug

前言 前端样式框架采用AntDesign时&#xff0c;经常会使用到Table组件&#xff0c;如果要有实现多选或选择的需求时往往就会用到rowSelection属性&#xff0c;效果如下 rowSelection属性属性值如下 问题 文档中并没有说明选择时以数据中的哪个属性为准&#xff0c;看官方案例…

python第一课 变量

1.离线的情况下首选txt文档 2.有道云笔记 3.思维导图 xmind mindmaster 4.博客 5.wps流程图 # 变量的命名规则 1.变量名只能由数字字母下划线组成 2.变量名不能以数字开头 3.变量名不能与关键字重名 快捷键 撤销&#xff1a;Ctrl/Command Z 新建&#xff1a;Ctrl/Com…

VScode + opencv + c++ + win配置教程

准备&#xff1a; 1、下载opencv 2、下载MinGw 3、 3、下载CMake 下载完解压放到一个文件夹里面&#xff0c;便于环境管理&#xff0c;文件夹我重命名了&#xff0c;解压出来文件名不一样正常 环境变量配置 C:\Users\wuxulong\cpp_env\MinGw\mingw64\bin C:\Users\wuxulon…

linux下sqlplus登录oracle显示问号处理办法

问题描述 昨天紧急通过rpm按安装方式给客户装了一台linux的19c数据库&#xff0c;操作系统是CentOs Stream release 9&#xff0c;过程不再回忆了… 今天应用发现sqlplus登入后部分显示问号&#xff1f;&#xff0c;需要处理下 原因分析&#xff1a; 很明显&#xff0c;这就是…