『TypeScript』深入理解变量声明、函数定义、类与接口及泛型

news2024/11/24 13:07:50

请添加图片描述

请添加图片描述
📣读完这篇文章里你能收获到

  • 了解TypeScript变量声明与类型注解
  • 掌握TypeScript函数与方法的使用
  • 掌握TypeScript类与接口的使用
  • 掌握TypeScript泛型的应用

请添加图片描述

文章目录

  • 一、变量声明与类型注解
    • 1. 变量声明
    • 2. 类型注解
    • 3. 类型推断
  • 二、函数与方法定义
    • 1. 函数定义
    • 2. 方法定义
    • 3. 参数和返回类型
  • 三、类与接口的使用
    • 1. 类(Class)
      • 1.1 定义类
      • 1.2 创建对象
    • 2. 接口(Interface)
      • 2.1 定义接口
      • 2.2 实现接口
      • 2.3 使用接口
  • 四、泛型的应用
    • 1. 什么是泛型?
    • 2. 泛型类型
    • 3. 泛型约束

请添加图片描述

一、变量声明与类型注解

1. 变量声明

在TypeScript中,我们可以使用关键字let或const来声明变量。let用于声明可变的变量,而const用于声明不可变的变量(常量)。通过这种方式,我们可以限制变量被修改的范围,减少潜在的错误。

let count: number = 10;
const name: string = "John";

2. 类型注解

类型注解是TypeScript中的一个重要概念,它允许我们明确指定变量的类型。通过在变量后面使用冒号(:)加上类型,我们可以告诉编译器应该为变量分配何种类型。

let count: number = 10;
let name: string = "John";

类型注解能够提供更好的类型安全性,让我们在编码过程中更早地发现潜在的类型错误。

3. 类型推断

TypeScript还支持类型推断,即根据变量的初始值自动推断出变量的类型。当我们没有显式地指定变量的类型时,TypeScript会根据上下文推断出变量的类型。

let count = 10; // 推断为number类型
let name = "John"; // 推断为string类型

类型推断的好处是可以减少代码中的冗余,同时仍然提供了类型安全性。我们无需在每一个变量声明中都显式地指定类型,TypeScript能够自动推断正确的类型。

请添加图片描述

二、函数与方法定义

在TypeScript中,函数和方法的定义是非常重要的,因为它们是构建可维护、可扩展和可重用代码的基础。本文将介绍如何在TypeScript中定义函数和方法,并探讨一些最佳实践。

1. 函数定义

在TypeScript中,你可以使用function关键字来定义一个函数。下面是一个简单的示例:

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

上面的代码定义了一个名为greet的函数,它接受一个字符串类型的参数name并且不返回任何值(void表示没有返回值)。在调用这个函数时,你需要传入一个字符串作为参数。

2. 方法定义

在面向对象的编程中,方法是与类相关联的函数。在TypeScript中,方法的定义也很简单:

class Greeter {
  private greeting: string;

  constructor(greeting: string) {
    this.greeting = greeting;
  }

  greet() {
    console.log(`Hello, ${this.greeting}!`);
  }
}

上面的代码定义了一个名为Greeter的类,其中包含一个名为greet的方法。在这个例子中,greet方法并不接受任何参数,它直接访问类的成员变量greeting并输出相应的问候语。

3. 参数和返回类型

在TypeScript中,你可以为函数和方法指定参数的类型以及返回值的类型。这有助于提高代码的可读性和健壮性。下面是一个带有参数和返回类型的函数定义示例:

function add(x: number, y: number): number {
  return x + y;
}

在上面的示例中,add函数接受两个number类型的参数x和y,并返回它们的和作为number类型的结果。

请添加图片描述

三、类与接口的使用

1. 类(Class)

类是面向对象编程的基本概念,它是一种将数据和行为组合在一起的结构。在 TypeScript 中,我们可以使用类来创建对象,并通过类的实例来访问对象的属性和方法。

1.1 定义类

类使用 class 关键字进行定义,以下是一个简单的类示例:

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  walk(): void {
    console.log(`${this.name} is walking.`);
  }
}

1.2 创建对象

通过类来创建对象的过程称为实例化。我们可以使用 new 关键字来实例化一个类,并获取一个类的实例。

const cat = new Animal("Tom");
cat.walk(); // 输出: "Tom is walking."

2. 接口(Interface)

接口是一种抽象的定义,它描述了对象的行为和属性。在 TypeScript 中,我们可以使用接口来定义对象的结构,并进行类型检查。

2.1 定义接口

接口使用 interface 关键字进行定义,以下是一个简单的接口示例:

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

2.2 实现接口

接口本身并不具备任何实际的数据,它只是一种规范或约束。我们需要通过类来实现接口,并提供具体的实现。

class Student implements Person {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

2.3 使用接口

一旦我们定义了接口,并且通过类实现了接口,我们就可以使用接口来进行类型检查和约束。

function printInfo(person: Person): void {
  person.sayHello();
}

const student = new Student("Tom", 20);
printInfo(student);

请添加图片描述

四、泛型的应用

1. 什么是泛型?

泛型是一种在编程中使用类型参数来创建可重用代码的方法。通过泛型,我们可以编写能够处理多种类型数据的代码,而不需要针对每种类型都编写一遍。

function identity<T>(arg: T): T {
  return arg;
}

在上面的示例中,我们定义了一个identity函数,它使用了一个类型参数T。这个函数可以接收任何类型的值,并返回相同类型的值。在这里,我们可以将T看作是一个占位符,当我们实际调用这个函数时传入的类型会替换掉它。

2. 泛型类型

除了可以使用泛型函数,我们还可以创建泛型类型。泛型类型在实现某些数据结构时非常有用,例如数组或元组。

interface Box<T> {
  contents: T;
}

let box1: Box<number> = { contents: 42 };
let box2: Box<string> = { contents: "hello" };

在上面的示例中,我们定义了一个Box接口,它使用了一个类型参数T,表示这个盒子中可以装任何类型的物品。我们可以使用不同的类型参数来定义不同的Box,例如box1是一个存储数字的盒子,而box2是一个存储字符串的盒子。

3. 泛型约束

有时候,我们希望泛型能够处理某些特定类型的数据,而不是任何类型。在这种情况下,我们可以使用泛型约束。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity("hello world"); // 输出 11

在上面的示例中,我们定义了一个Lengthwise接口,它表示拥有一个length属性的对象。然后我们定义了一个泛型函数loggingIdentity,并使用extends关键字来限制泛型参数T必须继承自Lengthwise接口。这样一来,我们就可以在函数内部使用arg.length属性。

请添加图片描述

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1292696.html

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

相关文章

学习Opencv(蝴蝶书/C++)相关1——4.图形和大型数组类型

文章目录 1. 多维度数组和多通道数组区别2. NAryMatIterator详解2.1 介绍2.2 dispatch和SIMD(OpenCV和numpy)2.2.1 OpenCV的2.2.2 numpy的2.2.3 OpenCV文档搜索2.3 调用指令集对代码进行优化2.4 NAryMatIterator理解2.4.1 plane和连续2.4.2 构造函数和迭代2.5 NAryMatIterato…

Cisco Packet Tracer配置命令——交换机篇

交换机VLAN配置 在简单的网络环境中&#xff0c;当交换机配置完端口后&#xff0c;即可直接应用&#xff0c;但若在复杂或规模较大的网络环境中&#xff0c;一般还要进行VLAN的规划&#xff0c;因此在交换机上还需进行 VLAN 的配置。交换机的VLAN配置工作主要有VLAN的建立与删…

CAN总线协议编程实例

1. can.h #ifndef __CAN_H #define __CAN_H#include "./SYSTEM/sys/sys.h"/******************************************************************************************/ /* CAN 引脚 定义 */#define CAN_RX_GPIO_PORT GPIOA #define CAN_RX_GPI…

超大规模集成电路设计----FPGA时序模型及FSM的设计(八)

本文仅供学习&#xff0c;不作任何商业用途&#xff0c;严禁转载。绝大部分资料来自----数字集成电路——电路、系统与设计(第二版)及中国科学院段成华教授PPT 超大规模集成电路设计----RTL级设计之FSM&#xff08;八&#xff09; 7.1 CPLD的时序模型7.1.1 XPLA3 时序模型7.1.…

算法___

文章目录 算法两数之和 算法 两数之和 题目如下图&#xff1a; 我的答案如下图&#xff1a; 我采用的是最笨的思路&#xff0c;直接暴力的两次循环&#xff0c;第一次外循环是取数组的第一个元素&#xff0c;然后内循环会遍历数组后面除第一个的所有元素&#xff0c;然后和…

煤矿电力监控系统

煤矿电力监控系统是一种用于煤矿电力系统的监控解决方案。该系统在重点煤矿的矿井变电站、主运输、主通风、主排水、主副提升等重要设备上加装智能用电融合终端&#xff0c;实时监测煤矿重要设备的电流、电压、负载等主要数据变化。为管理人员提供实时监测、报表管理、告警中心…

初始类与对象

初始类与对象 实验介绍 本课程是进一步对类与对象的深入认识&#xff0c;如何定义并实例化一个类&#xff0c;介绍如何使用 C 标准库 string 类等。 知识点 认识类与对象内联函数string 类类的定义与实例化 认识类与对象 官方定义 类&#xff1a;在面向对象编程中是一种…

小白学习java理解栈手写栈——第四关(青铜挑战)

内容1.理解栈的基本特征2.理解如何使用数组来构造栈3.理解如何使用链表来构造栈 1.栈的基础知识 1.1栈的特征 栈和队列是比较特殊的线性表&#xff0c;又称为访问受限的线性表。栈是很多表达式、符号等运算的基础&#xff0c;也是递归的底层实现&#xff0c;理论上递归能做的…

vim常见操作

vim常见操作 文章目录 vim常见操作1. 回退/前进2. 搜索3. 删除4. 定位到50行5. 显示行号6. 复制粘贴7. 剪贴8. 替换9. vim打开文件的时候出现 1. 回退/前进 1.esc进入命令模式 2.ctrlr 前进 u 回退2. 搜索 1&#xff09; esc进入命令模式 2&#xff09; /text  查找text&am…

JavaScript如何实现按键音效、视频播放,标签分类切换横向滚动

1.使用HTML5的audio标签 &#xff08;音频播放&#xff09; <audio id"click-sound"><source src"audio/show.mp3" type"audio/mpeg"> </audio> <button id"button">按钮</button> var clickSound d…

Linux_vi/vim编辑器

3.VI 与 VIM 3.1概述 vi编辑器&#xff1a;是Linux和Unix上最基本的文本编辑器&#xff0c;工作在字符模式下。由于不需要图形界面&#xff0c;vi是效率很高的文本编辑器。 vim是&#xff1a;vi的增强版&#xff0c;比vi更容易使用。vi的命令几乎全部都可以在vim上使用。 3…

QT----自定义信号和槽

第二天 2.1自定义信号和槽 新建一个Qtclass 自定义信号&#xff1a;返回值是void &#xff0c;只需要声明&#xff0c;不需要实现&#xff0c;可以有参数&#xff0c;可以重载 自定义槽&#xff1a;返回值void &#xff0c;需要声明&#xff0c;也需要实现&#xff0c;可以有…

华为OD机试 - 攀登者1(Java JS Python C)

题目描述 攀登者喜欢寻找各种地图,并且尝试攀登到最高的山峰。 地图表示为一维数组,数组的索引代表水平位置,数组的元素代表相对海拔高度。其中数组元素0代表地面。 例如:[0,1,2,4,3,1,0,0,1,2,3,1,2,1,0],代表如下图所示的地图,地图中有两个山脉位置分别为 1,2,3,4,5…

JDBC常见的几种连接池使用(C3P0、Druid、HikariCP 、DBCP)(附上代码详细讲解)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍JDBC常见的几种连接池使用&#xff08;C3P0、Druid、HikariCP 、DBCP&#xff09;以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学…

SpringSecurity6 | 修改默认用户

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Java从入门到精通 ✨特色专栏: MySQL学习 🥭本文内容:SpringSecurity6 | 修改默认用户 📚个人知识库 :知识库,欢迎大家访问 学习参考…

C++ STL容器与常用库函数

STL是提高C编写效率的一个利器 STL容器&#xff1a; 一、#include <vector> 英文翻译&#xff1a;vector &#xff1a;向量 vector是变长数组(动态变化)&#xff0c;支持随机访问&#xff0c;不支持在任意位置O(1)插入。为了保证效率&#xff0c;元素的增删一般应该在末尾…

机器学习 sklearn 中的超参数搜索方法

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

软著项目推荐 深度学习实现语义分割算法系统 - 机器视觉

文章目录 1 前言2 概念介绍2.1 什么是图像语义分割 3 条件随机场的深度学习模型3\. 1 多尺度特征融合 4 语义分割开发过程4.1 建立4.2 下载CamVid数据集4.3 加载CamVid图像4.4 加载CamVid像素标签图像 5 PyTorch 实现语义分割5.1 数据集准备5.2 训练基准模型5.3 损失函数5.4 归…

探索SpringBoot发展历程

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 循序渐进学SpringBoot ✨特色专栏&…

《消息队列MyMQ》——参考RabbitMQ实现

目录 一、什么是消息队列&#xff1f; 二、需求分析 1&#xff09;核心概念 2&#xff09;核心API 3&#xff09;交换机类型 4&#xff09;持久化 5&#xff09;网络通信 ​编辑 6&#xff09;消息应答 三、 模块划分 四、创建核心类 1.ExChange 2.MSGQueue 3.Bind…