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

【TypeScript】TS入门级基础学习(一)

【TypeScript】TS入门级基础学习(一)

在这里插入图片描述

一、前言

TypeScript 是一种用于应用程序规模的 JavaScript 语言。 TypeScript 向 JavaScript 添加了可选类型,支持用于任何浏览器、任何主机、任何操作系统的大规模 JavaScript 应用程序的工具。

TypeScript 可编译为可读的、基于标准的 JavaScript。TypeScript属于强类型语言,JavaScript属于弱类型语言,强类型语言支持静态语言和动态语言,弱类型语言支持动态语言。

这里是TypeScript官方仓库 TypeScript ,有兴趣的可以更深层次了解其本质。

二、基本概念

1.强类型语言和弱类型语言
  • 强类型语言:强类型语言不允许改变变量的数据类型,除非进行强制类型转换。比如C++、Java、C#。
  • 弱类型语言:定义与强类型语言相反,一个变量可以被赋予不同数据类型的值。PHP、Ruby、Python。
2.动态语言和静态语言
  • 静态语言:编译时确定变量的数据类型,运行期间不可以改变其结构,比如C++、Java、C#。
  • 动态语言:运行时才确定数据结构和类型,变量使用之前不需要类型声明,比如:JavaScript、PHP、Ruby、Python。

三、TypeScript与JavaScript的区别

TypeScriptJavaScript
强类型语言,支持动态语言和静态语言弱类型语言,支持动态语言
用于解决大型项目的代码复杂性脚本语言,创建动态网页
可以在编译期间发现并纠正错误只能在运行时发现错误
先被浏览器编译成js语言在浏览器可以直接使用
支持模块、泛型、接口不支持模块、泛型、接口

四、环境搭建及演练准备

对于TypeScript,不能像JavaScript直接在浏览器可以运行,因此我们需要安装编译环境,有两种方案进行练习与演练,其一就是直接安装到本地练习,另一种就是使用官方提供的在线环境进行演练。

4.1 安装到本地
  • 安装
    yarn add typescript -g
    或者
    npm install typescript -g
    
  • 查看版本
    tsc -V
    

在这里插入图片描述

  • 编译ts文件,编译后生成以ts结尾的文件

    tsc xxx.ts
    

我们创建 hellowworld.ts , 添加内容如下,针对 userName 进行了类型定义,定义为基本数据类型string, 然后通过 tsc 命令进行编译,编译成浏览器可直接运行的代码

  var userName:string = '我是suwu150';console.log(userName);

编译后,能够发现在同文件夹下生成同名JavaScript代码 hellowworld.js ,其内容是编译之后的JavaScript代码,可直接在浏览器运行。

  var userName = '我是suwu150';console.log(userName);
4.2 在线运行

这个是官方提供的一个在线演练的环境,后面有很多演练的例子,我们会在此基础上进行演示

官方在线演示环境的地址: https://www.typescriptlang.org/play/

同样的,我们将 TypeScript 代码编写到左侧编辑器,能够同步在右侧看到编译之后的结果

  var userName:string = '我是suwu150';console.log(userName);

编译后结果
在这里插入图片描述

以上就是TypeScript基础知识及环境准备。希望喜欢的同学能够点赞关注。


在这里插入图片描述

相关文章:

【TypeScript】TS入门级基础学习(一)

【TypeScript】TS入门级基础学习(一) 一、前言 TypeScript 是一种用于应用程序规模的 JavaScript 语言。 TypeScript 向 JavaScript 添加了可选类型,支持用于任何浏览器、任何主机、任何操作系统的大规模 JavaScript 应用程序的工具。 Type…...

jenkins执行jmeter时,报Begin size 1 is not equal to fixed size 5

jenkins执行jmeter脚本的时候一直提示如下错误: Tidying up ... Fri Jul 28 17:03:53 CST 2023 (1690535033178) Error generating the report: org.apache.jmeter.report.dashboard.GenerationException: Error while processing samples: Consumer failed wi…...

在 “小小容器” WasmEdge 里运行小小羊驼 llama 2

昨天,特斯拉前 AI 总监、OpenAI 联合创始人 Andrej Karpathy 开源了 llama2.c 。 只用 500 行纯 C 语言就能训练和推理 llama 2 模型的框架,没有任何繁杂的 python 依赖。这个项目一推出就受到大家的追捧,24 小时内 GitHub 收获 4000 颗星&am…...

【C#】async和await 续

前言 在文章《async和await》中,我们观察到了一下客观的规律,但是没有讲到本质,而且还遗留了一个问题: 这篇文章中,我们继续看看这个问题如何解决! 我们再看看之前写的代码: static public void TestWait2() {var t…...

【Matlab】基于粒子群优化算法优化BP神经网络的数据回归预测(Excel可直接替换数据)

【Matlab】基于粒子群优化算法优化 BP 神经网络的数据回归预测(Excel可直接替换数据) 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码5.1 fun.m5.2 main.m6.完整代码6.1 fun.m6.2 main.m7.运行结果1.模型原理 基于粒子群优化算法(Particle Swarm Optimization, PSO)…...

QPainter绘制雷达界面

文章目录 功能实现定义的结构体定义的函数效果图gitee源码链接 功能实现 相较于上一版,这一版添加的功能有: 1、自适应窗口 2、扫描方式(圆周扫描、扇形扫描(指定起始角度和结束角度)) 3、扫描方向&#x…...

flutter:BottomNavigationBar和TabBar

区别 BottomNavigationBarr和TabBar都是用于创建导航栏的组件,但它们有一些区别。 位置不同:BottomNavigationBar通常位于屏幕底部,用于主要导航;而TabBar通常位于屏幕顶部或底部,用于切换不同的视图或页面。 样式不…...

【图论】Prim算法

一.介绍 Prim算法是一种用于解决最小生成树问题的贪心算法。最小生成树问题是指在一个连通无向图中找到一个生成树,使得树中所有边的权重之和最小。 Prim算法的基本思想是从一个起始顶点开始,逐步扩展生成树,直到覆盖所有顶点。具体步骤如下…...

第九十二回 在Flutter中解析JSON数据

文章目录 概念介绍解析方法convert库插件工具 示例代码经验总结 我们在上一章回中介绍了"对dio库进行封装"相关的内容,本章回中将介绍 如何在Flutter中解析JSON数据.闲话休提,让我们一起Talk Flutter吧。 概念介绍 我们在前面章回中介绍了通…...

银河麒麟安装mysql数据库(mariadb)-银河麒麟安装JDK-银河麒麟安装nginx(附安装包)

银河麒麟离线全套安装教程(手把手教程) 1.银河麒麟服务器系统安装mysql数据库(mariadb) 2.银河麒麟桌面系统安装mysql数据库(mariadb) 3.银河麒麟服务器系统安装JDK 4.银河麒麟桌面系统安装JDK 5.银河麒麟…...

文件上传

js绕过 打开网页尝试上传一句话木马,发现只能上传图片文件 审计源代码,发现使用一个checkfile函数js对文件类型进行了屏蔽 于是我们修改网页代码,去除返回值的检查函数 checkFile() 上传成功,使用蚁剑连接 连接成功 .htaccess绕…...

tinkerCAD案例:22. Backpack Zipper Pull 背包拉链头

tinkerCAD案例:21. Custom Stamp 定制印章 原文 tinkerCAD案例:22. Backpack Zipper Pull 背包拉链头 Lesson Overview: 课程概述: Now we’re going to make a zipper pull! 现在我们要做一个拉链头! Your backpack, howev…...

Unity 性能优化四:UI耗时函数、资源加载、卸载API

UI耗时函数 1.1 Canvas.SendWillRenderCanvases 这个函数是由于自身UI的更新,产生的耗时 1. 这里更新的是vertex 属性,比如 color、tangent、position、uv,修改recttransform的position、scale,rotation并不会导致顶点属性改变…...

【Linux】用户相关内容

如果命令ll 出现以上信息,UID为具体的数字,代表之前UID为502的用户被删除了。 更改目录或文件所属用户和所属组 在Linux中,创建一个文件时,该文件的拥有者都是创建该文件的用户。 更改所属用户 chown 用户名 文件名/目录名 更…...

基于多场景的考虑虑热网网损的太阳能消纳能力评估研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

【动态规划part10】| 121.买卖股票的最佳时机、122.买卖股票的最佳时机II

目录 🎈LeetCode121. 买卖股票的最佳时机 🎈LeetCode122.买卖股票的最佳时机II 🎈LeetCode121. 买卖股票的最佳时机 链接:121.买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定…...

java 页面html常用写法总结

​(注意&#xff1a;本文章默认base html中已经引入bootstrap.min.css、style.css等css样式) input &#xff1a;输入标签 <#input required"必填" id"cycle" name"周期" underline"true" style"width:75%" itype&quo…...

阿里云服务器全方位介绍_优势_使用_租用费用详解

阿里云服务器全方位介绍包括云服务器ECS优势、云服务器租用价格、云服务器使用场景及限制说明&#xff0c;阿里云服务器网分享云服务器ECS介绍、个人和企业免费试用、云服务器活动、云服务器ECS规格、优势、功能及应用场景详细你说明&#xff1a; 目录 什么是云服务器ECS&…...

【Kafka】常用操作

1、基本概念 1. 消息&#xff1a; Kafka是一个分布式流处理平台&#xff0c;它通过消息进行数据的传输和存储。消息是Kafka中的基本单元&#xff0c;可以包含任意类型的数据。 2. 生产者&#xff08;Producer&#xff09;&#xff1a; 生产者负责向Kafka主题发送消息。它将消息…...

【Spring框架】SpringBoot配置文件

目录 配置文件作用application.properties中午乱码问题&#xff1a;配置文件里面的配置类型分类SpringBoot热部署properties基本语法properties配置文件的优缺点&#xff1a;yml配置文件说明yml基本语法配置对象properties VS yml 配置文件作用 整个项⽬中所有重要的数据都是在…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...