TypeScript概述与安装指南
TypeScript概述与安装指南
HarmonyOS Next主要开发语言是ArkTS,ArkTS又是TS的超集,为了更好的学习HarmonyOS 和 ArkTS,从基础的TS入口介绍TS语法。
第一章:TypeScript概述与安装指南
1.1 什么是TypeScript?
TypeScript 是由微软开发并维护的一种开源编程语言,它是 JavaScript 的超集。也就是说,任何有效的 JavaScript 代码在 TypeScript 中都是合法的,并且 TypeScript 通过引入静态类型检查和一些新特性,提升了 JavaScript 的开发体验。TypeScript 的主要目标是增强 JavaScript 的可维护性和可扩展性,尤其是在大型应用和团队协作开发中,它提供了更多的编译时错误检查和类型安全,从而大大减少了运行时错误的发生。
1.2 为什么选择TypeScript?
- 类型安全:TypeScript 支持静态类型系统,这意味着可以在编写代码时发现潜在的类型错误。例如,你可以指定一个变量只接受字符串类型,而不是任意类型的数据,这在 JavaScript 中是无法做到的。
- 代码可读性与可维护性:通过类型注解,TypeScript 可以让你在团队开发中清晰地表达意图,从而提高代码的可读性和可维护性。尤其是在大型项目中,类型系统可以帮助开发者理解每个变量和函数的使用方式。
- IDE支持与工具链:由于 TypeScript 是强类型的,许多 IDE(如 VS Code)能提供自动补全、类型推断、代码重构等智能提示功能,这些功能大大提高了开发效率。
- 兼容现有JavaScript代码:TypeScript 是 JavaScript 的超集,这意味着现有的 JavaScript 代码可以无缝地集成进 TypeScript 项目中。这使得开发者可以逐步迁移现有项目到 TypeScript,而无需重写所有代码。
- 现代语言特性:TypeScript 支持最新的 JavaScript 特性(如 async/await、模块化等),并能够将其编译成兼容旧版浏览器的 JavaScript 代码。
1.3 TypeScript与JavaScript的区别
特性 | JavaScript | TypeScript |
---|---|---|
类型系统 | 动态类型(运行时检查) | 静态类型(编译时检查) |
编译器支持 | 无 | 需要编译器进行编译,编译时可以发现类型错误 |
类型注解 | 不支持 | 支持,允许指定变量、函数、类等的类型 |
兼容性 | 所有浏览器和平台都支持 | 编译成标准 JavaScript,兼容所有平台 |
面向对象编程(OOP) | 支持面向对象编程,但缺乏类型相关的特性 | 更强大的面向对象支持,包括接口、泛型、抽象类等 |
1.4 TypeScript的安装与配置
1.4.1 安装TypeScript
要使用 TypeScript,首先需要安装 TypeScript 编译器。可以通过 npm(Node.js 包管理工具)进行安装。
-
安装 Node.js 和 npm
如果你还没有安装 Node.js 和 npm,可以访问 Node.js官网 下载并安装最新的稳定版本。npm 是 Node.js 自带的包管理工具,用于安装 JavaScript 和 TypeScript 的依赖包。 -
全局安装 TypeScript
安装 TypeScript 编译器:npm install -g typescript
使用
-g
选项是将 TypeScript 安装为全局工具,这样你可以在命令行中随时使用tsc
命令来编译 TypeScript 代码。 -
检查安装是否成功
安装完成后,可以通过以下命令检查 TypeScript 版本:tsc --version
如果安装成功,你将看到 TypeScript 的版本号。
1.4.2 创建一个简单的 TypeScript 项目
-
初始化项目
在终端中执行以下命令,创建一个新的项目文件夹,并进入该文件夹:mkdir my-typescript-project cd my-typescript-project
-
初始化 npm 项目
在项目文件夹中初始化一个 npm 项目,这将创建一个package.json
文件:npm init -y
-
安装 TypeScript
通过 npm 在本地安装 TypeScript:npm install typescript --save-dev
这将会把 TypeScript 安装到项目的
node_modules
文件夹中,并且将其作为开发依赖项添加到package.json
中。 -
配置 TypeScript
使用 TypeScript 前,建议生成一个tsconfig.json
配置文件,来配置 TypeScript 的编译选项。可以通过以下命令来生成:npx tsc --init
这将会创建一个默认的
tsconfig.json
文件,其中包含了 TypeScript 编译器的一些常见设置。例如:{"compilerOptions": {"target": "es5","module": "commonjs","strict": true,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true} }
可以根据自己的需求修改这些配置项,通常来说,
target
设置为es5
是为了确保兼容性,而module
则指定了模块系统(例如 CommonJS 或 ESModules)。 -
创建 TypeScript 文件
在项目中创建一个 TypeScript 文件(例如index.ts
)并写入以下内容:let message: string = "Hello, TypeScript!"; console.log(message);
-
编译 TypeScript 文件
使用tsc
命令编译 TypeScript 文件。运行以下命令:tsc
这将会生成一个 JavaScript 文件(
index.js
),可以在 Node.js 中运行:node index.js
输出:
Hello, TypeScript!
1.4.3 自动化编译:watch模式
可以通过 --watch
或 -w
选项让 TypeScript 编译器在文件更改时自动重新编译代码。例如:
tsc -w
每当你修改 index.ts
文件并保存时,TypeScript 会自动重新编译并生成新的 index.js
文件。
1.5 TypeScript 基础示例
接下来,我们来创建一个更复杂的 TypeScript 示例,展示 TypeScript 的一些基本特性:类型注解、接口、类和泛型。
-
接口与类
创建一个描述用户信息的接口,并通过类实现该接口:interface IUser {name: string;age: number; }class User implements IUser {constructor(public name: string, public age: number) {}greet() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);} }const user = new User("Alice", 30); user.greet();
-
泛型函数
TypeScript 的泛型允许你编写可以接受任意类型的函数或类。在以下示例中,我们定义了一个泛型函数,能够接受不同类型的参数:function identity<T>(arg: T): T {return arg; }let output = identity<string>("Hello, TypeScript!"); console.log(output); // 输出:Hello, TypeScript!
1.6 总结
本章介绍了 TypeScript 的基本概念,安装步骤,及如何配置一个简单的 TypeScript 项目。通过 TypeScript,我们可以为 JavaScript 代码提供类型安全,并享受更好的开发工具支持。接下来的章节将深入探讨 TypeScript 的类型系统、面向对象编程以及如何在实际开发中应用 TypeScript。
相关文章:
TypeScript概述与安装指南
TypeScript概述与安装指南 HarmonyOS Next主要开发语言是ArkTS,ArkTS又是TS的超集,为了更好的学习HarmonyOS 和 ArkTS,从基础的TS入口介绍TS语法。 第一章:TypeScript概述与安装指南 1.1 什么是TypeScript? TypeSc…...
学技术学英文:代码中的锁:悲观锁和乐观锁
本文导读: 1. 举例说明加锁的场景: 多线程并发情况下有资源竞争的时候,如果不加锁,会出现数据错误,举例说明: 业务需求:账户余额>取款金额,才能取钱。 时间线 两人共有账户 …...
Git配置公钥步骤
GIt公钥的配置去除了git push输入账号密码的过程,简化了push流程。 1.生成SSH公钥和私钥 ssh-keygen -t rsa -b 4096 -C “your_emailexample.com” 遇到的所有选项都按回车按默认处理。获得的公钥私钥路径如下: 公钥路径 : ~/.ssh/id_rsa.pub 私钥路径…...
NSDT 3DConvert:高效实现大模型文件在线预览与转换
NSDT 3DConvert 作为一个 WebGL 展示平台,能够实现多种模型格式免费在线预览,并支持大于1GB的OBJ、STL、GLTF、点云等模型进行在线查看与交互,这在3D模型展示领域是一个相当强大的功能。 平台特点 多格式支持 NSDT 3DConvert兼容多种3D模型…...
优先队列【东北大学oj数据结构9-3】C++
优先队列 优先级队列是一种数据结构,其中保存了一组数据 S,其中每个元素都有一个键,并执行以下操作: insert(S, k):将元素k插入集合S extractMax(S):从S中取出S中key最大的元素并返回其值 创建一个程序&am…...
全志H618 Android12修改doucmentsui功能菜单项
背景: 由于当前的文件管理器在我们的产品定义当中,某些界面有改动的需求,所以需要在Android12 rom中进行定制以符合当前产品定义。 需求: 在进入File文件管理器后,查看...功能菜单时,有不需要的功能菜单,需要隐藏,如:新建窗口、不显示的文件夹、故代码分析以及客制…...
SAP PP ECN CSAP_MAT_BOM_MAINTAIN
刚开始的时候ECN总是加不上, 参考kimi给出的案例 点击链接查看和 Kimi 智能助手的对话 https://kimi.moonshot.cn/share/cth1ipmqvl7f04qkggdg 效果 加上了 FUNCTION ZPBOM_PLM2SAP. *"------------------------------------------------------------------…...
STM32HAL I2C函数
8.5 使用IIC协议读写EEPROM 硬件方式实现 (HAL库) **HAL_I2C_Mem_Write() :这种方法可以写1个或者多个字节 ** /*** brief 以阻塞模式向指定的内存地址写入数据* param hi2c 指向 I2C_HandleTypeDef 结构体的指针,包含指定 I2C 的配置信息…...
技术转管理需要有哪些思维上的转变?
不少项目管理行业的负责人都是从技术岗产生,那么技术岗做的是代码、调试之类的内容,除了负责范围增加外,还有什么思维方面的转变呢? 1、从个体到团队 个体的技能决定着工作的完成度,而在管理工作岗位上,项…...
数据结构漫游记:初识vector
嘿,各位技术潮人!好久不见甚是想念。生活就像一场奇妙冒险,而编程就是那把超酷的万能钥匙。此刻,阳光洒在键盘上,灵感在指尖跳跃,让我们抛开一切束缚,给平淡日子加点料,注入满满的…...
RestTemplate远程调用、服务注册、
一.RestTemplate Spring给我们提供了一个RestTemplate的API,可以方便的实现Http请求的发送。 同步客户端执行HTTP请求,在底层HTTP客户端库(如JDK HttpURLConnection、Apache HttpComponents等)上公开一个简单的模板方法API。RestTemplate通过HTTP方法为常…...
ARP..
ARP 0 前言 真正接触到现网才发现ARP十分重要,无论是排错还是S-MLAG都需要用到ARP这个协议,以前对于ARP的理解比较混乱;所以这次对其中的主要内容做个梳理;一定要学好ARP!!! 1 ARP的概念 Ar…...
电子电器架构 ---整车区域控制器
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源,以现象替代逻辑,以情绪代替思考,把消极接受现实的懦弱,伪装成乐观面对不幸的…...
HBase、Hive、Redis 和 MongoDB的对比
1. 数据库管理 操作HBaseHiveRedisMongoDB创建数据库N/A (HBase 没有数据库概念)CREATE DATABASE db_name;N/A (Redis 没有数据库命名功能)use db_name; (自动创建)查看数据库N/ASHOW DATABASES;INFO 查看全局信息show dbs;删除数据库N/ADROP DATABASE db_name CASCADE;N/Adb.…...
前端在WebSocket中加入Token
在WebSocket通信中加入Token主要是为了实现身份验证和授权,确保只有经过验证的用户可以建立WebSocket连接。由于WebSocket API本身不支持直接在连接时设置HTTP头部,因此需要采用一些变通的方法来传递Token。以下是几种常见的方法: 1、通过UR…...
图解HTTP-HTTP报文
参考资料:图解HTTP HTTP报文 用于HTTP协议交互的信息被称为HTTP报文。请求端的HTTP请求报文,响应端(服务器端)的叫做响应报文。HTTP报文本身是由多行(CR LF作为换行符)数据行构成的文本。 请求报文及响…...
后端使用Spring Boot框架 + 前端VUE 实现滑动模块验证码
在现在常用的登录验证码方式有很多种,但是都不可避免被攻击,但是有很多方式可以防止被攻击,从而进行维护。 现在我就讲解一下滑动块验证码的实现方式: 这个是前端代码,我使用的是vue,在使用的时候注意&am…...
NOTEBOOK_11 汽车电子设备分享(工作经验)
汽车电子设备分享 摘要 本文主要列出汽车电子应用的一些实验设备和生产设备,部分会给予一定推荐。目录 摘要一、通用工具:二、测量与测试仪器2.1测量仪器2.2无线通讯测量仪器2.3元器件测试仪2.4安规测试仪2.5电源供应器2.6电磁兼容测试设备2.7可靠性环境…...
Spring Mvc面试题(常见)
1 Spring MVC的执行流程 用户发起请求,请求先被Servlet拦截以后,转发给SpringMVC框架SpringMVC 里面的DispatcherServlet(核心控制器) 接收到请求,并转发给HandlerMappingHandlerMapping负责解析请求,根据请求信息和配置信息找到匹配的Controller类(当这里有配置拦截器,会…...
javaEE--计算机是如何工作的-1
目录 一.计算机的组成: 各组件的功能: 衡量cpu好坏的标准: 二.指令(instruction) 三.操作系统Operating System 四.进程/任务process/tesk 五.进程在系统中如何管理 1.进程在系统中的管理,从两个角度来分类: 2.进程控制块PCB(Process Control Block)) 3.P…...
【Mysql】函数有哪些
mysql函数有哪些? MySQL 提供了许多内置函数,用于执行各种操作,包括字符串处理、日期时间操作、数学计算、数据转换等。以下是一些常用的 MySQL 函数分类及其示例: 字符串函数 CONCAT(str1, str2, ...):将多个字符串…...
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。 关键词 UI互动应用评分统计状态管理数据处理多目标评分 一、功能说明 评分统计工具允许用…...
实验13 C语言连接和操作MySQL数据库
一、安装MySQL 1、使用包管理器安装MySQL sudo apt update sudo apt install mysql-server2、启动MySQL服务: sudo systemctl start mysql3、检查MySQL服务状态: sudo systemctl status mysql二、安装MySQL开发库 sudo apt-get install libmysqlcli…...
Azure虚拟机非托管磁盘大小调整
想要扩容一个Azure VM 的磁盘空间,门户里面竟然无法扩展,点点鼠标就完事的时代在离去,微软越来不想微软。 在门户里面即便使用Azure Cli命令行也不行。 PS /home/gpchina> az disk list [] 返回为空,根本没有返回磁盘。 不过使…...
MySQL数据库下载及安装教程
链接:MySQL数据库下载及安装教程(最最新版)_mysql下载安装-CSDN博客 亲测安装成功了💕 把这个路径放到系统环境变量里头 MD!我这安到C盘去了,就很烦🤬😡 在CMD登录试一下 mysql -h localhos…...
使用 UniApp 在微信小程序中实现 SSE 流式响应
概述 服务端发送事件(Server-Sent Events, SSE)是一种允许服务器向客户端推送实时更新的技术。SSE 提供了一种单向的通信通道,服务器可以持续地向客户端发送数据,而不需要客户端频繁发起请求。这对于需要实时更新的应用场景非常有用。 流式传输的特点是将数据逐步传输给客…...
基础数据结构---栈
顺序表实现 一、栈类的声明 栈是一种特殊的线性表,可以由顺序表来实现,也可以由链表来实现,这节课,我们采用顺序表来实现栈。 #include <iostream>#include <stdexcept>using namespace std;template<typename …...
Redis 最佳实践
这是以前写下来的文章,发出来备份一下 Redis 在企业中的最佳实践可以帮助提高性能、可用性和数据管理效率。以下是一些推荐的做法: 选择合适的数据结构: 根据需求选择适当的 Redis 数据结构(如 Strings、Lists、Sets、Hashes、So…...
前端零基础学习Day-Eight
CSS字体和文本样式 CSS文字样式 字体:font-family 语法:font-family:[字体1][,字体2][,…] p{font-family:“微软雅黑”,“宋体”,“黑体”;} 含空格字体名和中文,用英文引号括起 属性值:具体字体名,字体集 字体集&…...
在Vue3中实现文件上传功能,结合后端API
随着现代Web应用程序的不断发展,文件上传成为了用户交互中不可或缺的一部分。在本篇博客中,我们将深入讨论如何在Vue3中实现一个文件上传功能,并与后端API进行交互。我们将使用Vue3的Composition API(setup语法糖)来构…...
智慧商城:点击“加入购物车”判断是否登录来进行跳转到登录页登录并回跳 + 发请求渲染加入购物车数量的角标
点击“加入购物车”判断是否登录来进行跳转到登录页登录并回跳 按需引入需要的 Dialog 组件并进行全局注册 Vue.use( )仅仅在Vue组件的上下文中起作用,所以在Vue组件中通过 this.$ 来使用 在 js 文件中则还要导入,然后直接使用,并不需要 this…...
植物大战僵尸杂交版v3.0.2最新版本(附下载链接)
B站游戏作者潜艇伟伟迷于12月21日更新了植物大战僵尸杂交版3.0.2版本!!!,有b站账户的记得要给作者三连关注一下呀! 不多废话下载链接放上: 夸克网盘链接::https://pan.quark.cn/s/5c…...
后端统一接口返回状态【初步模板】
后端统一接口返回状态【模板】 文章目录 后端统一接口返回状态【模板】1 .Result类编写2 .Constants类编写3 .更改Controller层下的类return格式 开发过程中,每个接口的返回格式设计都是一样的,这样可以大大提高开发效率。 项目结构如下图:分…...
QML Text组件
文章目录 前言主体基本文本显示字体和样式富文本支持长文本的处理文本样式与效果超链接Label 元素总结 前言 在 QML 中,Text 和 Label 是常用的文本显示元素,它们在显示文本方面具有相似性,但在功能和定制性上也存在一些差异。Text 元素用于…...
cv2.addWeighted用法详解
cv2.addWeighted 是 OpenCV 中用于图像加权叠加的函数,常用于将两张图像按一定比例融合在一起。它通过对两张图像的像素进行加权和求和的操作,可以实现透明度调整、图像混合、图像融合等效果。 函数定义 cv2.addWeighted(src1, alpha, src2, beta, gam…...
基于微信小程序的消防隐患在线举报系统
博主介绍:java高级开发,从事互联网行业六年,熟悉各种主流语言,精通java、python、php、爬虫、web开发,已经做了多年的设计程序开发,开发过上千套设计程序,没有什么华丽的语言,只有实…...
牛客网 SQL36查找后排序
SQL36查找后排序 select device_id,age from user_profile order by age asc #select [字段1,字段2] from [表名] order by [字段1] [升序(asc)/降序(desc)],[字段2] [升序(asc)/降序(desc)] #select:查询 #order by 排序 每日问题 如何实现对象的克隆࿱…...
Dart 中的构造函数
在 Dart 中,类的构造函数用于初始化类的对象。当你创建一个类的实例时,构造函数被自动调用。Dart 支持多种构造函数的写法,包括常规构造函数、命名构造函数、工厂构造函数等。 一、传统构造函数 默认构造函数是没有名字的构造函数ÿ…...
实现 WebSocket 接入文心一言
目录 什么是 WebSocket? 为什么需要 WebSocket? HTTP 的局限性 WebSocket 的优势 总结:HTTP 和 WebSocket 的区别 WebSocket 的劣势 WebSocket 常见应用场景 WebSocket 握手过程 WebSocket 事件处理和生命周期 WebSocket 心跳机制 …...
GO--堆(have TODO)
堆 堆(Heap)是一种特殊的数据结构。它是一棵完全二叉树(完全二叉树是指除了最后一层外,每一层上的节点数都是满的,并且最后一层的节点都集中在左边),结放在数组(切片)中…...
【Python随笔】Enigma密码机的原理及python代码实现
最近笔者接触到了Cypher这款游戏,玩法很简单,就是通过文字、图片等各种表达手段组成的谜面,猜一段英文,算是初步接触了密码学的一些知识。游戏中提到了很多类型的密码,其中Enigma密码机就是单独一种,在电影…...
二叉树 -- 堆(详解)
目录 1、堆的概念及结构 2、堆的实现(附代码) 2.1、向下调整算法建堆 3、堆的应用(附代码) 3.1、堆排序 3.2、TOP-K问题 1、堆的概念及结构 如果有一个关键码的集合K { k0,k1 ,k2 ,…,k(n-1) },把它的所有元素…...
gradle项目下载依赖报错
报错信息 Cannot resolve external dependency org.projectlombok:lombok:1.18.36 because no repositories are defined. Required by:project :Possible solution:- Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/…...
WPS怎么都无法删除空白页_插入空白页一次插入两张?_插入横屏空白页_横屏摆放图片_这样解决_显示隐藏段落标记---WPS工作笔记001
在wps使用的过程中你们有没有碰到过这种问题,就是,我贴图,因为图片太大,我需要把图片,横屏显示,这个时候我需要插入一个空白页,那么,在空白菜单下,点击,有时候会点击插入空白页,会一下子自动插入两张空白页.而且,怎么删除都删除不掉. 都快疯掉了. 网上搜索也没有找到好的方法,后…...
flask before_request 请求拦截器返回无值则放行,有值则拦截
环境 Python 3.11.5 Flask 2.2.2完整代码如下: from flask import Flask, make_response, Blueprintapp Flask(__name__) user_blue Blueprint(user, __name__, url_prefix/api/user) user_blue.before_request def befor…...
前端XMLHttpRequest get请求能不能在body中传参数?
文档 查看mdn文档,文档XMLHttpRequest.send()有提到: XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。 测试 一个简单的nodejs服务器 var…...
C语言的函数指针
介绍案例 什么是函数指针? 函数指针 是指向函数的指针变量,它可以用来间接调用函数。在 C/C 中,函数指针允许程序在运行时选择调用不同的函数,这使得代码更加灵活和动态。函数指针广泛应用于回调函数、事件处理、动态选择算法等…...
网络安全的学习方向和路线是怎么样的?
石器时代 第一个阶段——石器时代,针对的是纯新手小白刚刚入场。在这个阶段,主要是打基础,需要学习的有五部分内容: Windows Windows上基础的一些命令、PowerShell的使用和简单脚本编写,以及Windows以后经常会打交道…...
酒蒙子骰子小程序系统
酒蒙子流量变现小程序小游戏 后端tp8 前端uniapp 会员变现 分销推广 流量主 …...
html+css网页设计 美食 餐饮杰12个页面
htmlcss网页设计 美食 餐饮杰12个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1ÿ…...