TypeScript快速入门———(一)TypeScript 介绍以及初体验

news2024/12/23 12:47:52

文章目录

    • 1. TypeScript 介绍
      • 1.1 TypeScript 是什么
      • 1.2 TypeScript 为什么要为 JS 添加类型支持?
      • 1.3 TypeScript 相比 JS 的优势
    • 2. TypeScript 初体验
      • 2.1 安装编译 TS 的工具包
      • 2.2 编译并运行 TS 代码
      • 2.3 简化运行 TS 的步骤


1. TypeScript 介绍

1.1 TypeScript 是什么

  • TypeScript(简称:TS)是 JavaScript 的超集(JS 有的 TS 都有)
  • TypeScript = Type +JavaScript(在 JS 基础之上,为 JS 添加了类型支持
  • TypeScript是微软开发的开源编程语言,可以在任何运行 JavaScript 的地方运行

在这里插入图片描述

1.2 TypeScript 为什么要为 JS 添加类型支持?

背景:JS 的类型系统存在“先天缺陷”,JS 代码中绝大部分错误都是类型错误(Uncaught TypeError)。
问题:增加了找Bug、改 Bug 的时间,严重影响开发效率。

从编程语言的动静来区分,TypeScript 属于静态类型的编程语言,JS 属于动态类型的编程语言。
静态类型:编译期做类型检查; 动态类型:执行期做类型检查
代码编译和代码执行的顺序:1 编译 2 执行

对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)
对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)
并且,配合 VSCode 等开发工具,TS 可以提前到在编写代码的同时就发现代码中的错误,减少找 Bug、改 Bug 时间

1.3 TypeScript 相比 JS 的优势

  1. 更早(写代码的同时)发现错误,减少找 Bug、改 Bug 时间,提升开发效率。
  2. 程序中任何位置的代码都有代码提示,随时随地的安全感,增强了开发体验。
  3. 强大的类型系统提升了代码的可维护性,使得重构代码更加容易
  4. 支持最新的ECMAScript语法,优先体验最新的语法,让你走在前端技术的最前沿。
  5. TS 类型推断机制不需要在代码中的每个地方都显示标注类型,让你在享受优势的同时,尽量降低了成本。

除此之外,Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合,TypeScript 已成为大中型前端项目的首先编程语言。

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

问题:为什么要安装编译 TS 的工具包?
回答:Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为JS 代码,然后才能运行。

安装命令:npm i -g typescript。

typescript 包:用来编译 TS 代码的包,提供了 tsc 命令,实现了 TS -> JS 的转化。

在这里插入图片描述
验证是否安装成功:tsc –v(查看 typescript 的版本)。
在这里插入图片描述

2.2 编译并运行 TS 代码

在这里插入图片描述

  1. 创建 hello.ts 文件(注意:TS 文件的后缀名为 .ts
  2. 将 TS 编译为 JS:在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 JS 文件)
  3. 执行 JS 代码:在终端中输入命令,node hello.js
    请添加图片描述
    说明:所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可
    注意:由 TS 编译生成的 JS 文件,代码中就没有类型信息了

2.3 简化运行 TS 的步骤

问题描述:每次修改代码后,都要重复执行两个命令,才能运行 TS 代码,太繁琐。
简化方式:使用 ts-node 包,直接在 Node.js中执行 TS 代码。

安装命令:npm i -g ts-node(ts-node 包提供了 ts-node 命令)
使用方式:ts-node hello.ts
解释:ts-node 命令在内部偷偷的将 TS -> JS(注意这里外部不会重新生成JS文件),然后,再运行 JS 代码请添加图片描述

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

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

相关文章

[python入门㊺] - 异常中的finally

目录 ❤ finally的作用 ❤ try、except、finally的执行顺序是什么 ❤ 案列 finally 中不带return finally中有return ❤ finally的作用 finally内的代码不管有无异常发生,都会执行。具体来说: 无论是否发生了异常,一定会执行 fi…

若依-pro使用

前言 最近开始搞一个项目,使用的框架是若依-pro。新手上路,多多指教。 首先了解一下什么是若依,其实他就是将很多项目共同的代码进行了抽取,方便我们可以快速开发的一个javaweb项目(若依是一个项目,一个p…

中睿天下Coremail联合发布《2022年第四季度企业邮箱安全报告》(附下载)

近日,中睿天下联合CAC邮件安全大数据中心(以下简称CAC中心)发布《2022年第四季度企业邮箱安全报告》,对当前企业邮箱的应用状况和安全风险进行了分析。1.垃圾邮件同比下降22.16%日前,CAC(Coremail Anti Spa…

test3

数据链路层故障分析 一、网桥故障 a.主要用途简述 网桥作为一种桥接器,可以连接两个局域网。工作在数据链路层,是早期的两端口二层网络设备。可将一个大的VLAN分割为多个网段,或者将两个以上的LAN互联为一个逻辑LAN,使得LAN上的…

互联网舆情监测系统困境及措施,TOOM舆情监控平台应对及处置?

互联网舆情监测系统帮助政府、企业、媒体等机构了解公众的需求和诉求,及时发现和解决问题,防范和化解不良舆情,提高公众满意度和信任度。互联网舆情监测的技术手段包括爬虫、文本挖掘、情感分析、网络图谱等,互联网舆情监测系统困…

UE4 使用AE跟踪相机数据,演算任意视频的相机运动数据

参考链接 ae 3dsmax 摄像机互导 aehj 虚幻引擎5使用AE跟踪相机数据 一、软件版本:试过好几个版本,目前只有两组版本成功过 3dmax2016 AE2014 3dmax2020 AE2022 二、程序安装(执行exe和手动拷贝是相同的) 参考链接 重启AE后如…

工作记录------PostMan自测文件导入、导出功能

工作记录------PostMan自测文件导入、导出功能 测试文件导出 背景:写了一个文件下载功能,是数据写到excel中,下载,使用PostMan点击send后,返回报文是乱码。 解决办法: 点击send下面的 send and Downlo…

python学习之pandas库的使用总结

【1】读取CSV并进行透视 我们的原始数据格式: ① 读取数据 pd.read_csv 会读取csv表格并使用names指定读取后的列名称。 import pandas as pdreleaseNumOfYear pd.read_csv("data/releaseNumOfYear.csv", headerNone, names[Year, Genre, ReleaseNum]…

各种音频接口比较

时间 参考:https://www.bilibili.com/video/BV1SL4y1q7GZ/?spm_id_from333.337.search-card.all.click&vd_source00bd76f9d6dc090461cddd9f0deb2d51, https://blog.csdn.net/weixin_43794311/article/details/128941346 接口名字时间公司支持格式…

springcloud - 2021.0.3版本 - (一)服务注册nacos+feign

一,注册中心 最新版使用的是nacos,可替换为eureka,zookeeper,使用方式大同小异,这里不做扩展。 下载安装:(有机会重装时再补上) 管理页面:http://localhost:8848/naco…

RabbitMQ详解(二):Docker安装RabbitMQ

在Docker上安装部署RabbitMQ方便快捷,不需要额外安装Erlang环境,所以写该篇文章先来介绍如何在Docker上部署RabbitMQ。 一、安装并运行 (1)、在docker hub 中查找rabbitmq镜像 docker search rabbitmq:3.9.12-management带有“mangement”的版本&…

Python将脚本程序转变为可执行程序

Python将脚本程序转变为可执行程序 类似Java打包操作,若不想让人看到Python程序内部逻辑,也可将其转换为exe可执行文件 首先自己写一个Python程序,如下: print("start running...")listTest ["I","a…

网渗透(二十二)之Windows协议认证和密码抓取-Silver Ticket白银票据制作原理及利用方式

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…

知识图谱业务落地技术推荐之国内知识图谱平台汇总(竞品)[阿里、腾讯、华为等】

各位可以参考国内知识图谱平台产品进行对技术链路搭建和产品参考提供借鉴。

2.4G-WiFi连接路由器过程

一、概述 WiFi的数据通信基于802.11协议进行,无线AP在工作时会定时向空中发送beacon数据包,基站(STA)从beacon中解析出AP的名称、加密方式等信息,从而发起连接。 二、WiFi连接路由器的详细过程 WiFi连接过程主要可以…

tomcat打debug断点调试

windows debug调试 jdk版本:1.8.0_181 tomcat版本:apache-tomcat-9.0.68.0 idea版本:2020.1 方法一 修改catalina.bat 在%CATALINA_HOME%\bin\catalina.bat中找到 set “JAVA_OPTS%JAVA_OPTS% -Djava.protocol.handler.pkgsorg.apache…

TIOBE 2 月编程语言榜:C++ 势不可挡

继上个月,C 摘得 TIOBE 2022 年度最佳编程语言奖项之后,其发展势头仍然保持强劲。放眼整个编程语言榜单中,只有 C 突破了 2 字开头的增幅,其同比增幅为 5.93%,其次便是 C 以 1.31% 的增长趋势排在第二位。 在本月 Top …

U盘文件如何恢复?u盘还原,必学的4招(2023已更新)

移动U盘是大家经常使用的存储工具,它可以帮助我们保存各种文件数据。在学习和工作中,U盘文件丢失的原因五花八门。遇到U盘文件丢失该怎么办?u盘格式化了怎样恢复?u盘还原,我们必须要学习的4招! 第一招&…

如何提高短视频的播放量-4个技巧

做短视频自媒体,点击率是第一位,点击量越多,粉丝也就越多。可是,怎么才能增加短视频的点击率和提高播放量呢?今天就来教大家4个技巧: 1、蹭热点 热门话题自带流量,它的热度和价值,是…

IDEA配置部署tomcat详细步骤(maven web 和Javaweb)

目录 读者手册 一、概念与准备工作 (一)概念 (二)准备工作 (三)IDEA配置tomcat服务器(maven web项目演示) ( 四)Javaweb项目创建tomcat演示 读者手册 读…