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

请添加图片描述

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

  • 了解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.mzph.cn/news/205429.shtml

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

相关文章

Jmeter 性能测试基础!

压力测试   压力测试分两种场景&#xff1a;一种是单场景&#xff0c;压一个接口的&#xff1b;第二种是混合场景&#xff0c;多个有关联的接口。压测时间&#xff0c;一般场景都运行10-15分钟。如果是疲劳测试&#xff0c;可以压一天或一周&#xff0c;根据实际情况来定。 压…

springboot 在自定义注解中注入bean,解决注入bean为null的问题

问题&#xff1a; 在我们开发过程中总会遇到比如在某些场合中需要使用service或者mapper等读取数据库&#xff0c;或者某些自动注入bean失效的情况 解决方法&#xff1a; 1.在构造方法中通过工具类获取需要的bean 工具类代码&#xff1a; import org.springframework.beans…

Spring到底是如何解决循环依赖问题的?

Spring作为当前使用最广泛的框架之一&#xff0c;其重要性不言而喻。所以充分理解Spring的底层实现原理对于咱们Java程序员来说至关重要&#xff0c;那么今天笔者就详细说说Spring框架中一个核心技术点&#xff1a;如何解决循环依赖问题&#xff1f; 什么是循环依赖问题&#x…

JVM理解

1、JVM是什么&#xff1f; JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;由一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域等组成。 他是帮助我们将java代码 生成编译后 的 class 文件。 2、JRE、JDK和JVM 的关系 …

用AI批量生成文章的工具有哪些?免费AI生成工具

人工智能&#xff08;AI&#xff09;技术不断演进&#xff0c;为许多领域带来了前所未有的便利。其中&#xff0c;AI生成文章技术作为一个备受关注的领域&#xff0c;为大家提供了独特的解决方案&#xff0c;特别是在批量文章生成的需求上。 1. AI生成文章的方法 开放式AI模型…

基于Browscap对浏览器工具类优化

项目背景 原有的启动平台公共组件库comm-util的浏览器工具类BrowserUtils是基于UserAgentUtils的&#xff0c;但是该项目最后一个版本发布于 2018/01/24&#xff0c;之至今日23年底&#xff0c;已有5年没有维护更新&#xff0c;会造成最新版本的部分浏览器不能正确获取到浏览器…

使用python操作excel文档

导入xlsxwriter包 python轻量化的语言&#xff0c;用来操作文档简直易如反掌&#xff0c;首先你需要导入的是import xlsxwriter包&#xff0c;他包括了操作文档所需要的全部工具方法&#xff0c;你只需要调用就好了。 操作excel指南 首先你需要创建一个文件xlsxwriter.Workb…

http与apache

目录 1.http相关概念 2.http请求的完整过程 3.访问浏览器背后的原理过程 4.动态页面与静态页面区别 静态页面&#xff1a; 动态页面&#xff1a; 5.http协议版本 6.http请求方法 7.HTTP协议报文格式 8.http响应状态码 1xx&#xff1a;提示信息 2xx&#xff1a;成功…

CPU密集型和IO密集型初学习

目录 1、CPU密集型 2、IO密集型 3、CPU密集型和IO密集型的区别 4、CPU密集型和IO密集型对CPU内核之间的关系 5、核心线程数计算公式 5、扩展&#xff1a;进程和线程 小结 1、CPU密集型 CPU密集型是指计算机程序或任务在执行过程中主要依赖于中央处理器&#xff08;CPU&…

IOday5作业

使用两个线程完成两个文件的拷贝&#xff0c;分支线程1完成前一半内容拷贝&#xff0c;分支线程2完成后一半内容的拷贝&#xff0c;主线程完成资源的回收 #include<myhead.h> //定义结构体 struct file {const char* srcfile;//背拷贝文件路径const char* destfile;//拷…

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

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

【设计模式-3.1】结构型——外观模式

说明&#xff1a;本文介绍设计模式中结构型设计模式中的&#xff0c;外观模式&#xff1b; 亲手下厨还是点外卖&#xff1f; 外观模式属于结构型的设计模式&#xff0c;关注类或对象的组合&#xff0c;所呈现出来的结构。以吃饭为例&#xff0c;在介绍外观模式之前&#xff0…

你们如何看待华为的鸿蒙ArkTS语言?

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript&#xff08;简称TS&#xff09;基本语法风格的基础上&#xff0c;对TS的动态类型特性施加更严格的约束&#xff0c;引入静态类型。同时&#xff0c;提供了声明式UI、状态管理等相应的能力&#xff0c;让开发者可以以更简洁、…

画好一张规范的原理图,这些点你可要注意了!

不光是代码有可读性的说法&#xff0c;原理图也有。很多时候原理图不仅仅是给自己看的&#xff0c;也会给其它人看&#xff0c;如果可读性差&#xff0c;会带来一系列沟通问题。所以&#xff0c;要养成良好习惯&#xff0c;做个规范的原理图。此外&#xff0c;一个优秀的原理图…

【云原生-K8s】镜像漏洞安全扫描工具Trivy部署及使用

基础介绍基础描述Trivy特点 部署在线下载百度网盘下载安装 使用扫描nginx镜像扫描结果解析json格式输出 总结 基础介绍 基础描述 Trivy是一个开源的容器镜像漏洞扫描器&#xff0c;可以扫描常见的操作系统和应用程序依赖项的漏洞。它可以与Docker和Kubernetes集成&#xff0c;…

temu数据如何看:多多情报通助力商家数据选品

拼多多作为中国最大的农村电商平台&#xff0c;吸引了大量的商家和消费者。对于拼多多商家来说&#xff0c;了解市场趋势、优化产品和店铺运营、了解竞争对手等方面的数据分析至关重要。为了满足商家的需求&#xff0c;拼多多推出了多多情报通&#xff08;原名&#xff1a;多多…

批量AI写作生成器有哪些?免费的批量AI写作生成器

当今信息爆炸的时代&#xff0c;文案需求量庞大&#xff0c;传统文案写作已无法满足快速迭代的需求。批量AI写作生成器应运而生&#xff0c;成为许多行业的得力助手。在众多AI写作工具中&#xff0c;147原创助手以其批量AI写作功能和在各大平台显示原创首发的特性脱颖而出。本文…

利用TCP通信实现文件传输和通信

前言 我们上一章已经熟悉了理论知识&#xff0c;这一章来练习一下 1.实现文件的传输 1.1 客户端 dir_client.c #include <stdio.h> #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include <sys/types.h> #include …