当前位置: 首页 > article >正文

从0到1,带你开启TypeScript的奇妙之旅

目录

一、TypeScript 是什么?

二、为什么要学习 TypeScript?

三、快速上手:环境搭建与 Hello World

(一)安装 TypeScript

(二)创建第一个 TypeScript 文件

(三)编译 TypeScript 文件

(四)运行编译后的 JavaScript 文件

四、深入 TypeScript 核心语法

(一)基本数据类型

(二)变量声明与类型推断

(三)函数与类型注解

(四)数组与元组

(五)对象类型与接口

(六)类与面向对象编程

五、高级特性探索

(一)泛型

(二)类型别名与联合类型

(三)类型守卫与类型断言

六、实战项目:用 TypeScript 构建一个简单 Web 应用

(一)项目搭建

(二)功能实现

(三)部署

七、总结与展望


一、TypeScript 是什么?

        TypeScript 是由微软开发的一款开源编程语言,它是 JavaScript 的超集,简单来说,就是在 JavaScript 的基础上添加了静态类型系统 ,这意味着在编写 TypeScript 代码时,你可以为变量、函数参数和返回值指定类型。比如在 JavaScript 中,我们声明一个变量并赋值:

let num;

num = 10;

num = "hello";

        这里num变量的类型可以随意改变,在代码规模较小的时候,这种灵活性很方便,但当项目逐渐庞大,就很容易出现类型相关的错误,而且很难排查。

        而在 TypeScript 中,我们可以这样写:

let num: number;

num = 10;

num = "hello";

        当我们尝试将字符串"hello"赋值给声明为number类型的num时,TypeScript 编译器就会报错,提示类型不匹配,这能帮助我们在开发阶段就发现并解决问题,而不是等到代码运行时才暴露错误。

        再比如函数参数和返回值类型的定义,在 JavaScript 中:

function add(a, b) {

return a + b;

}

let result = add(1, "2");

        这里调用add函数时传入了一个数字和一个字符串,虽然代码不会报错,但结果可能并非我们预期。

        在 TypeScript 中:

function add(a: number, b: number): number {

return a + b;

}

let result = add(1, "2");

        当传入参数类型不匹配时,TypeScript 编译器同样会给出错误提示,确保函数在正确的类型下运行。

        从这些简单对比就能看出,TypeScript 通过静态类型检查,大大提高了代码的可靠性和可维护性,减少了运行时错误的发生概率,让我们的代码更加健壮 。同时,它完全兼容 JavaScript,现有的 JavaScript 代码可以直接在 TypeScript 项目中使用,这使得将 JavaScript 项目迁移到 TypeScript 变得相对容易,也能让开发者逐步适应 TypeScript 的开发模式。

二、为什么要学习 TypeScript?

  1. 提高代码可维护性:在大型项目中,代码的可维护性至关重要。TypeScript 的静态类型系统就像是给代码加上了一层坚固的 “保护网”,能有效避免因类型错误导致的难以调试的问题 。比如在一个电商项目中,商品数据可能涉及各种字段,像价格、库存数量等。使用 TypeScript,我们可以为这些数据字段明确指定类型,这样在后续对商品数据进行操作时,就能提前发现类型不匹配的错误,而不是等到用户下单时才发现库存数量变成了字符串类型,导致计算错误。这大大降低了代码维护的难度和成本,让项目的后续迭代更加顺畅。

  2. 增强代码可读性:清晰的类型定义让代码的结构和意图一目了然。假设我们在开发一个社交应用,有一个处理用户信息的函数,使用 TypeScript 为函数参数和返回值添加类型注解后,其他开发人员一看代码就能明白这个函数的输入输出要求,无需花费额外时间去猜测和调试。例如:

interface User {

name: string;

age: number;

email: string;

}

function getUserInfo(user: User): string {

return `Name: ${user.name}, Age: ${user.age}, Email: ${user.email}`;

}

        这样的代码,即使隔了很长时间再来看,也能迅速理解其功能,大大提高了代码的可读性和可理解性 。

        3. 类型推断提升开发效率:TypeScript 具有强大的类型推断功能,它能自动根据变量的赋值和使用情况推断出变量的类型。在开发过程中,我们无需总是显式地声明所有变量的类型,这在一定程度上减少了代码的编写量。例如:

let num = 10;

let str = "hello";

        这里num会被自动推断为number类型,str会被推断为string类型,我们在后续使用这些变量时,TypeScript 会根据推断的类型进行类型检查,既提高了开发效率,又保证了类型的安全性 。

        4. 广泛的行业应用:TypeScript 在行业中的应用越来越广泛。许多知名项目都在使用 TypeScript,像 Angular 框架就是完全基于 TypeScript 开发的,React 项目中也有大量使用 TypeScript 的案例 。据相关调查显示,在 2022 年,使用 TypeScript 的 Web 开发者占比达到了 84%,并且这个比例还在逐年上升 。这充分说明了 TypeScript 在前端开发领域的重要地位和受欢迎程度,掌握 TypeScript,无疑能让我们在求职和项目开发中更具竞争力。

三、快速上手:环境搭建与 Hello World

        在开始深入学习 TypeScript 之前,我们先快速搭建开发环境,体验一下 TypeScript 的开发流程 。

(一)安装 TypeScript

        首先,确保你已经安装了 Node.js,因为 TypeScript 依赖于 Node.js 运行时环境,Node.js 自带 npm 包管理器,我们可以使用 npm 来安装 TypeScript 。打开命令行工具,输入以下命令进行全局安装:

npm install -g typescript

        安装完成后,在命令行输入tsc -v,如果能看到 TypeScript 的版本号,就说明安装成功了 。比如我的环境中,执行tsc -v后输出Version 5.2.2,这表明 TypeScript 已成功安装在我的系统中 。

(二)创建第一个 TypeScript 文件

        在你喜欢的代码编辑器中(如 Visual Studio Code,简称 VSCode,它对 TypeScript 有非常友好的支持),创建一个新文件,命名为hello.ts 。然后在文件中输入以下代码:

let message: string = "Hello, TypeScript!";

console.log(message);

        这里我们声明了一个类型为string的变量message,并赋值为"Hello, TypeScript!",然后使用console.log将其输出到控制台 。

(三)编译 TypeScript 文件

        回到命令行,切换到hello.ts所在的目录,执行编译命令:

tsc hello.ts

        执行该命令后,你会发现同目录下多了一个hello.js文件,这就是 TypeScript 编译后的 JavaScript 文件 。打开hello.js,内容如下:

var message = "Hello, TypeScript!";

console.log(message);

        可以看到,编译后的代码去掉了类型注解,变成了标准的 JavaScript 代码 。这就是 TypeScript 的编译过程,它将带有类型信息的 TypeScript 代码转换为可以在浏览器或 Node.js 环境中运行的 JavaScript 代码 。在这个过程中,TypeScript 编译器会检查代码中的类型错误,如果有错误,会在命令行中给出提示,例如,如果你将message的类型声明为number,却赋值为字符串,编译时就会报错:

let message: number = "Hello, TypeScript!";

        执行tsc hello.ts时,命令行会提示:error TS2322: Type '"Hello, TypeScript!"' is not assignable to type 'number'.,这就帮助我们在开发阶段及时发现并修正类型错误 。

(四)运行编译后的 JavaScript 文件

        最后,我们可以使用 Node.js 来运行编译后的hello.js文件,在命令行输入:

node hello.js

        你会在控制台看到输出:Hello, TypeScript!,至此,我们成功运行了第一个 TypeScript 程序 。这个简单的示例展示了 TypeScript 从编写代码到编译、运行的基本流程,为我们后续深入学习 TypeScript 的各种特性打下了基础 。

四、深入 TypeScript 核心语法

(一)基本数据类型

        TypeScript 支持多种基本数据类型,这些类型是构建复杂数据结构和程序逻辑的基础 。

        布尔类型(boolean):表示逻辑值,只有true和false两个值 。例如:

let isDone: boolean = false;

        数字类型(number):用于表示数值,包括整数和浮点数 。示例如下:

let count: number = 10;

let price: number = 3.99;

        字符串类型(string):用于表示文本数据 。可以使用单引号或双引号来定义字符串 。例如:

let message: string = "Hello, TypeScript!";

        数组类型(array):用于表示多个相同类型的值的集合 。有两种定义方式,一种是使用方括号语法,另一种是使用Array<T>泛型语法 。示例:

let numbers: number[] = [1, 2, 3, 4, 5];

let fruits: Array<string> = ["apple", "banana", "orange"];

        元组类型(tuple):元组是一种特殊的数组,它允许表示一个已知元素数量和类型的数组,每个元素的类型可以不同 。比如:

let person: [string, number] = ["John", 25];

        枚举类型(enum):枚举类型用于定义一组命名的常量 。例如:

enum Color {

Red,

Green,

Blue

}

let myColor: Color = Color.Green;
原文地址:https://blog.csdn.net/xiaoyingxixi1989/article/details/146163610
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/590157.html

相关文章:

  • 《图解设计模式》 学习笔记
  • 自动注入@resource和@autowired的区别
  • Bridge Constructor Medieval for Mac 桥梁构造师:中世纪解谜建桥游戏 支持M、Intel芯片
  • uniapp+Vue3 开发小程序功能(下载文件)
  • 爬楼梯(js实现,LeetCode:70)
  • 每天五分钟深度学习PyTorch:循环神经网络RNN的计算以及维度信息
  • css的显示模式
  • Redis----大key、热key解决方案、脑裂问题
  • Matlab 舰载机自动着舰控制系统研究
  • SpringMVC(四)Restful软件架构风格
  • 【从零开始学习计算机科学】算法分析(三)动态规划 与 贪心算法
  • STM32---FreeRTOS事件标志组
  • 数学建模:MATLAB循环神经网络
  • PostgreSQL教程(二)九大类型
  • 第27周JavaSpringboot git初识
  • 如何在Django中设置CSRF Token?
  • 【计算机网络】浏览器组成、工作原理、页面渲染流程...
  • 什么是 Fisher 信息矩阵
  • JDBC数据库连接池技术详解——从传统连接方式到高效连接管理
  • Android Dagger2 框架注入模块源码深度剖析(四)