『TypeScript』从零开始编写你的第一个TypeScript程序

请添加图片描述

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

  • 了解TypeScript及为什么使用TypeScript
  • TypeScript的安装过程
  • 编写第一个HelloTs程序

请添加图片描述

文章目录

  • 一、TypeScript简介
    • 1. 什么是TypeScript?
    • 2. 为什么选择使用TypeScript?
      • 2.1 静态类型检查
      • 2.2 更好的代码维护性
      • 2.3 更丰富的工具支持
      • 2.4 渐进式采用
  • 二、TypeScript安装
  • 三、编写第一个TypeScript程序
    • 1. 生成js文件
    • 2. 直接运行ts文件s

请添加图片描述

一、TypeScript简介

1. 什么是TypeScript?

TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,为 JavaScript 添加了静态类型检查。TypeScript 扩展了 JavaScript 的语法,并引入了强类型和面向对象的特性,使得 JavaScript 可以用更严格的方式进行开发。
与 JavaScript 相比,TypeScript 提供了更好的代码提示和自动补全功能,减少了潜在的运行时错误,并提高了代码的可读性和可维护性。同时,TypeScript 可以编译为纯 JavaScript 代码,在任何支持 JavaScript 的环境中运行,这意味着现有的 JavaScript 代码可以无缝迁移到 TypeScript 中。

2. 为什么选择使用TypeScript?

2.1 静态类型检查

JavaScript 是一种动态类型语言,这意味着变量的类型在运行时才确定。这样的特性带来了一些潜在的问题,比如类型错误只能在运行时被发现。而 TypeScript 引入了静态类型检查,可以在编译时捕获类型错误,避免了许多常见的错误。

2.2 更好的代码维护性

TypeScript 强调代码的可读性和可维护性。通过类型注解和接口定义,我们可以清晰地了解代码的意图和结构。TypeScript 还支持模块化开发,可以将代码分割为多个模块,提高了代码的组织性和可复用性。

2.3 更丰富的工具支持

TypeScript 提供了丰富的开发工具支持。主流的集成开发环境(IDE)如 Visual Studio Code 和 WebStorm 都对 TypeScript 提供了良好的支持,包括代码提示、自动补全、重构等功能。此外,TypeScript 还有强大的类型定义库,可以方便地使用第三方 JavaScript 库。

2.4 渐进式采用

TypeScript 的语法和 JavaScript 基本兼容,现有的 JavaScript 代码可以逐步迁移到 TypeScript 中,不需要一次性重写整个项目。这使得团队可以根据实际情况选择性地采用 TypeScript,无需投入过多的时间和资源。

请添加图片描述

二、TypeScript安装

  1. 安装node.js
  2. 全局安装typescript
npm i -g typescript
  1. 安装完成后,检查是否成功
tsc -v

请添加图片描述

三、编写第一个TypeScript程序

1. 生成js文件

  1. 创建一个ts文件_hello.ts_
console.log('helloTS');
  1. 使用tsc对文件进行编译

tsc .\hello.ts

  1. 编译成功:

生成了对应的js文件
image.pngw

2. 直接运行ts文件s

  1. 安装ts-node工具
sudo npm install -g ts-node
  1. 初始化tsconfig.json配置文件
tsc -init
  1. 使用ts-node运行.ts文件
ts-node .\hello.ts

image.png
请添加图片描述

请添加图片描述

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

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

相关文章

【尘缘送书第五期】Java程序员:学习与使用多线程

目录 1 多线程对于Java的意义2 为什么Java工程师必须掌握多线程3 Java多线程使用方式4 如何学好Java多线程5 参与方式 摘要:互联网的每一个角落,无论是大型电商平台的秒杀活动,社交平台的实时消息推送,还是在线视频平台的流量洪峰…

【头歌实训】分布式文件系统 HDFS

文章目录 第1关:HDFS的基本操作任务描述相关知识HDFS的设计分布式文件系统NameNode与DataNode HDFS的常用命令 编程要求测试说明答案代码 第2关:HDFS-JAVA接口之读取文件任务描述相关知识FileSystem对象FSDataInputStream对象 编程要求测试说明答案代码 …

基于单片机设计的激光测距仪(采用XKC-Kl200模块)

一、前言 随着科技的不断进步和应用需求的增加,测距仪成为了许多领域必备的工具之一。传统的测距仪价格昂贵、体积庞大,使用起来不够方便。本项目采用STC89C52单片机作为主控芯片,结合XKC-KL200激光测距模块和LCD1602显示器,实现…

ZKP Understanding Nova (2) Relaxed R1CS

Understanding Nova Kothapalli, Abhiram, Srinath Setty, and Ioanna Tzialla. “Nova: Recursive zero-knowledge arguments from folding schemes.” Annual International Cryptology Conference. Cham: Springer Nature Switzerland, 2022. Nova: Paper Code 2. Unders…

Vue的Nuxt项目部署在服务器,pm2动态部署和npm run build静态部署

Nuxt项目的部署有两种方式,一种是静态部署,一种是动态部署 静态部署需要关闭项目的ssr功能,动态部署则不需关闭,所以怎么部署项目就看你用不用ssr功能了 。 1.静态部署 先说静态部署,很简单,只需要在nuxt…

React创建项目

React创建项目 提前安装好nodejs再进行下面的操作,通过node -v验证是否安装 1.设置源地址 npm config set registry https://registry.npmmirror.com/2.确认源地址 npm config get registry返回如下 https://registry.npmmirror.com/3.输入命令 npx create-re…

Clickhouse Join

ClickHouse中的Hash Join, Parallel Hash Join, Grace Hash Join https://www.cnblogs.com/abclife/p/17579883.html https://clickhouse.com/blog/clickhouse-fully-supports-joins-full-sort-partial-merge-part3 总结 本文描述并比较了ClickHouse中基于内存哈希表的3种连接…

一天一个设计模式---原型模式

基本概念 原型模式(Prototype Pattern)是一种创建型设计模式,其主要目的是通过复制现有对象来创建新对象,而不是通过实例化类。原型模式允许在运行时动态创建对象,同时避免了耦合与子类化。 在原型模式中&#xff0…

Mysql综合案例练习<1>

MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九 题目一 创建数据库test01_library 创建表 books&#xff0c;表结构如下&#xff1a; CREATE DATABASE …

mysql基础之约束

在mysql中null和任何值都不相同&#xff0c;null和null也不相同 1.约束简介 1.1概念 约束英文&#xff1a;constraint 约束实际上就是表中数据的限制条件 1.2.作用 表在设计的时候加入约束的目的就是为了保证表中的记录完整性和有效性&#xff0c;比如用户表有些列的值&am…

docker-compose部署sonarqube 8.9 版本

官方部署文档注意需求版本 所以选择8.9版本 一、准备部署配置 1、持久化目录 rootlocalhost:/root# mkdir -p /data/sonar/postgres /data/sonar/sonarqube/data /data/sonar/sonarqube/logs /data/sonar/sonarqube/extensions rootlocalhost:/root# chmod 777 /data/sona…

「Swift」类淘宝商品瀑布流展示

前言&#xff1a;需要做一个类似于淘宝商品页面的瀑布流展示 结构分析&#xff1a; ps&#xff1a;图片来源 思路分析&#xff1a; 该瀑布流主要还是基于UICollectionView进行展示&#xff0c;只是在cell展示的UICollectionViewFlowLayout需要进行相应调整和自定义&#xff…

智能优化算法应用:基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.北方苍鹰算法4.实验参数设定5.算法结果6.参考…

python技术栈之单元测试中mock的使用

什么是mock&#xff1f; mock测试就是在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;用一个虚拟的对象来创建以便测试的测试方法。 mock的作用 特别是开发过程中上下游未完成的工序导致当前无法测试&#xff0c;需要虚拟某些特定对象以便测试…

[node] Node.js的Web 模块

[node] Node.js的Web 模块 什么是 Web 服务器&#xff1f;Web的应用架构http使用方式使用 Node 创建 Web 服务器使用 Node 创建 Web 客户端 什么是 Web 服务器&#xff1f; Web服务器一般指网站服务器&#xff0c;是指驻留于因特网上某种类型计算机的程序&#xff0c;Web服务器…

使用WalletConnect Web3Modal v3 链接钱包基础教程

我使用的是vueethers 官方文档&#xff1a;WalletConnect 1.安装 yarn add web3modal/ethers ethers 或者 npm install web3modal/ethers ethers2.引用 新建一个js文件&#xff0c;在main.js中引入&#xff0c;初始化配置sdk import {createWeb3Modal,defaultConfig, } from…

Vue3 Element-Plus 一站式生成动态表单:简化前端开发流程

文章目录 1. 引言2. Vue3 和 Element-Plus 简介2.1 Vue32.2 Element-Plus 3. 动态表单的需求与挑战4. Vue3 和 Element-Plus 动态表单的优势4.1 Vue3的组合式API4.2 Element-Plus的表单组件 5. 一站式生成动态表单的实现5.1 准备工作5.2 创建动态表单组件5.3 使用动态表单组件 …

uniapp横向滚动示例

目录 插件市场案例最后 插件市场 地址 案例 地址 最后 感觉文章好的话记得点个心心和关注和收藏&#xff0c;有错的地方麻烦指正一下&#xff0c;如果需要转载,请标明出处&#xff0c;多谢&#xff01;&#xff01;&#xff01;

读书笔记-《数据结构与算法》-摘要4[插入排序]

插入排序 核心&#xff1a;通过构建有序序列&#xff0c;对于未排序序列&#xff0c;在已排序序列中从后向前扫描(对于单向链表则只能从前往后遍历)&#xff0c;找到相应位置并插入。实现上通常使用in-place排序(需用到O(1)的额外空间) 从第一个元素开始&#xff0c;该元素可…

Science | 张锋实验室:聚类算法揭示188种新型CRISPR系统

微生物序列数据库包含大量有关酶和其他可用于生物技术的分子的信息。但近年来&#xff0c;这些数据库已经变得非常庞大&#xff0c;以至于很难有效地搜索到感兴趣的酶。 2023年11月23日&#xff0c;博德研究所张锋及美国国立卫生研究院Eugene V. Koonin共同通讯在Science 在线…