前端项目为什么需要 TypeScript 来强化?

什么是TypeScript?

TypeScript 是一个为开发大规模应用程序而设计的语言。它是 JavaScript 的一个超集,包含 JavaScript 全部的功能,并扩展了一些新的特性。具体来说,TypeScript 增加了如类型注解和编译时类型检查等特性:

 let num : number = 'hello'; // 错误:不能将类型 "hello" 赋给类型 number

在上面的代码示例中,TypeScript 阻止了将一个字符串赋值给一个数字变量的行为。

此外,TypeScript 方便我们编写和处理更复杂的类型结构,如接口,类,模块,泛型编程等,这都大大增强了软件工程能力。

为什么需要TypeScript?

JavaScript 是动态类型语言,这意味着在代码执行时可以在变量中保存任何类型的数据,并且其数据类型可以在运行时更改。这使得在 JavaScript 中引入 bug 非常容易。TypeScript 通过引入静态类型检查,解决了这个问题。

  • 静态类型检查: TypeScript 在代码执行前进行类型检查,帮助开发人员发现可能的错误。例如,如果你试图将一个字符串赋值给一个预期是数字的变量,TypeScript 就会在编译时发出警告。
  • *更好的 IDE 支持:**由于 TypeScript 的类型系统,IDE如 Visual Studio Code, WebStorm, Atom 等可以提供更强大的自动完成功能、代码导航、重构工具等。
  • 代码可读性和可维护性: 通过增加类型注解,帮助你理解自己和其他开发者的代码。当函数或组件的输入参数被明确的类型注解修饰后,任何使用这个函数或组件的开发者,都可以清楚地知道应该怎么使用。
  • ESNext 特性支持: TypeScript 支持未来JavaScript的新特性,典型的如可选链 ?.,空值合并运算符 ??,你可以提前体验和学习新特性。

TypeScript 有哪些类型?

TypeScript 包括了多种内置的类型。

  1. Boolean 类型

    它是最基本的数据类型,在 TypeScript 中,使用 boolean 表示,它只有两个值: truefalse

    let isDone: boolean = false;
    
  2. Number 类型

    在 TypeScript 中,所有的数字都是 number 类型,这不仅仅包括整数,还包括浮点数。

    let decimal: number = 6;
    let hex: number = 0xf00d; // 这是一个16进制数字
    let binary: number = 0b1010; // 这是一个2进制数字
    let octal: number = 0o744; // 这是一个8进制数字
    
  3. String 类型

    TypeScript 也支持文本数据类型,可以使用 string 表示。

    let color: string = "blue";
    color = 'red';
    let fullName: string = `Bob Bobbington`;
    let age: number = 37;
    let sentence: string = `Hello, my name is ${fullName}. I'll be ${age + 1} years old next month.`;
    
  4. Array 类型

    TypeScript 强大的类型系统也包含了数组类型,我们可以使用 元素类型[] 或者 Array<元素类型> 表示。

    let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3]; // 范型语法
  5. Tuple 类型

    元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

    let x: [string, number];
    x = ['hello', 10]; // OK
  6. Enum 类型

    使用枚举类型我们可以定义一些带名字的常量。

    enum Color {Red, Green, Blue}
    let c: Color = Color.Green;
  7. Any 类型

    我们可能需要处理一些我们不知道数据类型的变量,这时我们希望它们能被检查器忽略,我们可以使用 any 类型。

    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false;
  8. Void 类型

    void 类型表示没有任何类型,常常用于表示函数没有返回值。

    function warnUser(): void {console.log("This is my warning message");
    }
  9. Null 和 Undefined 类型

    TypeScript 包含两种特殊类型: nullundefined,它们各自有各自的类型名称 nullundefined

    let u: undefined = undefined;
    let n: null = null;
  10. Never 类型

    never类型表示的是那些永远不存在的值的类型。

    function error(message: string): never {throw new Error(message);
    }
  11. Object 类型

    object 类型表示非原始类型,也就是除 numberstringbooleansymbolnullundefined 之外的类型。

    declare function create(o: object | null): void;create({ prop: 0 }); // OK
    create(null); // OK

如何使用 TypeScript?

Untitled.png

使用 TypeScript 基本步骤如下:

  1. 安装 TypeScript

    npm install -g typescript
    
  2. 编写 TypeScript 代码

    创建一个 .ts 的文件,然后在该文件中编写 TypeScript 的代码,例如:

    function greet(person: string): string {return 'Hello, ' + person + '!';
    }console.log(greet('Developer'));
  3. 编译 TypeScript 代码

    在命令行窗口中输入 tsc filename.ts ,该命令将 TypeScript 转化为 JavaScript:

    tsc greet.ts
    

    这时,你会发现生成了一个新的 JavaScript 文件 greet.js

  4. 执行 JavaScript 文件

    最后,就可以像正常的 JavaScript 文件那样执行这个文件。

    node greet.js
    

    运行这个命令,你会在终端看到输出 Hello, Developer!

总结

在实践中,我们通常会在更复杂的环境中使用 TypeScript,像是整合到 Webpack, Babel 工作流中,或者在VS Code 这样的编辑器中使用 TypeScript 提供更强大的智能感知和代码提示功能。他们都提供了对 TypeScript 的全面支持,使开发体验更好。

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

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

相关文章

淘宝通过关键字搜索商品列表API接口对接详细步骤(支持免费测试)

通过关键字搜索商品&#xff0c;批量获取到相关商品&#xff0c;这是几乎所有电商平台购物商城都有的功能。我将此功能封装为API&#xff0c;可供外部软件直接调用&#xff0c;实现通过关键字搜索淘宝商品的功能。 接口名称&#xff1a;item_search-按关键字搜索淘宝商品 请求…

微信小程序promise封装

一. 在utils文件夹内创建一个request.js 写以下封装的 wx.request() 方法 const baseURL https:// 域名 ; //公用总路径地址 export const request (params) > { //暴露出去一个函数&#xff0c;并且接收一个外部传入的参数let dataObj params.data || {}; //…

pytorch中nn.Sequential详解

1 nn.Sequential概述 1.1 nn.Sequential介绍 nn.Sequential是一个序列容器&#xff0c;用于搭建神经网络的模块被按照被传入构造器的顺序添加到容器中。除此之外&#xff0c;一个包含神经网络模块的OrderedDict也可以被传入nn.Sequential()容器中。利用nn.Sequential()搭建好…

蓝牙耳机编码方式

蓝牙耳机编码方式 蓝牙耳机的编码方式指的是蓝牙耳机如何处理和传输音频数据。主要的蓝牙编码方式包括&#xff1a; SBC (Subband Coding)&#xff1a;这是蓝牙音频的标准编码方式&#xff0c;所有蓝牙音频设备都支持。虽然它的音质不是最佳&#xff0c;但兼容性很好。 AAC (A…

【重点】【DP】5.最长回文子串|516.最长回文子序列

两个求解目标类似的题目&#xff0c;对比记忆&#xff01; 5.最长回文子串 题目 法1&#xff1a;二维DP 最基础方法&#xff01;必须掌握&#xff01; O(N^2) O(N^2) class Solution {public String longestPalindrome(String s) {int n s.length();if (n 1) {return s…

webpack之介绍

学习webpack之前&#xff0c;请先让我们大家了解一下什么是webpack&#xff1f;为什么要用webpack&#xff1f; Webpack是一个现代化的JavaScript应用程序的静态模块打包工具。它可以将多个模块打包成一个或多个静态资源文件&#xff0c;以便在浏览器中使用。 Webpack的主要功…

连几句恶语都容它不下,那是鸡肠鼠肚,有大度才能成大器。

连几句恶语都容它不下&#xff0c;那是鸡肠鼠肚&#xff0c;有大度才能成大器。

Spring Boot测试 - JUnit整合及模拟Mvc

概述 在现代软件开发中&#xff0c;测试是确保应用程序质量和稳定性的关键步骤。Spring Boot框架为开发人员提供了丰富的测试工具和集成&#xff0c;其中JUnit是最常用的测试框架之一。本文将介绍如何在Spring Boot项目中集成JUnit测试&#xff0c;以及如何使用模拟Mvc来进行W…

csrf自动化检测调研

https://github.com/pillarjs/understanding-csrf/blob/master/README_zh.md CSRF 攻击者在钓鱼站点&#xff0c;可以通过创建一个AJAX按钮或者表单来针对你的网站创建一个请求&#xff1a; <form action"https://my.site.com/me/something-destructive" metho…

一些问题/技巧的集合(仅个人使用)

目录 第一章、1.1&#xff09;前端找不到图片1.2&#xff09;1.3&#xff09;1.4&#xff09; 第二章、2.1&#xff09;2.2&#xff09;2.3&#xff09; 第三章、3.1&#xff09;3.2&#xff09;3.3&#xff09; 第四章、4.1&#xff09;4.2&#xff09;4.3&#xff09; 友情提…

系列一、GitHub搜索技巧

一、GitHub搜索技巧 1.1、概述 作为程序员&#xff0c;GitHub大家应该都再熟悉不过了&#xff0c;很多时候当我们需要使用某一项技能而又无从下手时&#xff0c;通常会在百度&#xff08;面向百度编程&#xff09;或者在GitHub上通过关键字寻找相关案例&#xff0c;比如我想学…

IU5070E线性单节锂电池充电管理IC

IU5070E是一款具有太阳能板最大功率点跟踪MPPT功能&#xff0c;单节锂离子电池线性充电器&#xff0c;最高支持1.5A的充电电流&#xff0c;支持非稳压适配器。同时输入电流限制精度和启动序列使得这款芯片能够符合USB-IF涌入电流规范。 IU5070E具有动态电源路径管理(DPPM)功能&…

如果你带着热爱专注地做些事,很多有趣的事就会随之而来。

如果你带着热爱专注地做些事&#xff0c;很多有趣的事就会随之而来。

第11章 GUI Page403~405 步骤三 设置滚动范围

运行效果&#xff1a; 源代码&#xff1a; /**************************************************************** Name: wxMyPainterApp.h* Purpose: Defines Application Class* Author: yanzhenxi (3065598272qq.com)* Created: 2023-12-21* Copyright: yanzhen…

一款外置MOS开关降压型 LED 恒流控制器应用方案

一、基本概述 TX6121 是一款高效率、高精度的降压型大功率 LED 恒流驱动控制器芯片。芯片采用固定关断时间的峰值电流控制方式&#xff0c;关断时间可通过外部电容进行调节&#xff0c;工作频率可根据用户要求而改变。 通过调节外置的电流采样电阻&#xff0c;能控制高亮度 LE…

火力发电厂电气一次部分初步设计(论文+图纸)

1 原始资料 设计电厂为中型是凝汽式发电厂&#xff0c;共4台发电机组&#xff0c;2台75MW机组&#xff0c;2台50MW机组&#xff0c;总的装机容量为250MW&#xff0c;占系统容量的比例为&#xff1a; 250/(3500250)100%6.7%<15%&#xff0c;未超过电力系统的检修备用容量和…

Jwt 如何在 springboot 项目中进行接口访问鉴权

文章目录 1 springboot 框架负责接口的拦截和放行1.1 原理1.2 思路1.3 坑: Springboot 访问了错误处理路径 /error 2 jwt token 负责携带数据和签名的生成及校验2.1 初始化2.2 设置 Header2.3 携带数据 payload2.4 签名 sign 后, 生成 token2.5 校验2.6 获取信息2.7 字段说明 3…

WebGL在教育和培训的应用

WebGL在教育和培训领域具有广泛的应用&#xff0c;其强大的图形渲染能力和跨平台性使得它成为创建交互式、视觉化的数字内容的理想选择。以下是一些WebGL在教育和培训上的应用示例&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司…

PlatEMO UI 界面

&#x1f389; 博主相信&#xff1a; 有足够的积累&#xff0c;并且一直在路上&#xff0c;就有无限的可能&#xff01;&#xff01;&#xff01; &#x1f468;‍&#x1f393;个人主页&#xff1a; 青年有志的博客 &#x1f4af; Github 源码下载&#xff1a;https://github.…