【黑马程序员】2、TypeScript介绍_黑马程序员前端TypeScript教程,TypeScript零基础入门到实战全套教程

课程地址:【黑马程序员前端TypeScript教程,TypeScript零基础入门到实战全套教程】 https://www.bilibili.com/video/BV14Z4y1u7pi/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

目录

 2、TypeScript初体验

2.1 安装编译TS的工具包                                

2.2 TypeScript初体验

2.3 简化TS运行的步骤


 2、TypeScript初体验

2.1 安装编译TS的工具包                                

安装步骤

  1. 下载Node.js   Node.js是一个开源跨平台的JavaScript运行时环境。

    • 64位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

    • 32位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

  2. 安装Node.js  判断是否安装成功  cmd里 node -v

     Node.js是为了使用TS编译器,接下来安装TS编译器

  3. 使用npm全局安装typescript      npm是Node.js的包管理器,通过npm可以安装Node下面各种各样的软件和应用,其中TS解析器就是这样的软件。(装好Node的时候npm已经装好了)

    • 进入命令行

    • 输入:npm i -g typescript  

      显示安装成功,tsc命令 

  4. 创建一个ts文件

  5. 使用tsc对ts文件进行编译  (网页不认ts文件,这里要使用编译器将ts文件转换成js文件)

    • 进入命令行

    • 进入ts文件所在目录

    • 执行命令:tsc xxx.ts 

      没有消息证明编译通过,代码没有问题。 

      得到的js文件,是可以在浏览器里执行。 

2.2 TypeScript初体验

编译并运行ts代码

1、创建ts文件;

2、ts编译为js:在终端输入命令:tsc  文件名.ts

选择将ts文件在终端打开。 

输入命令

 3、执行js代码:在终端输入命令: node 文件名.js

输入node命令,得到结果

所有合法的JS代码都是TS代码。

由TS编译生成的JS文件,代码没有类型信息。

2.3 简化TS运行的步骤

问题:每次都要先生成js,然后执行js

简化方式:使用ts-node包,直接在Node.js中执行TS代码

 按照视频来会报错,出现问题是ts-node版本太新了,解决方法参见使用ts-node demo.ts命令报错_阿妖呀的博客-CSDN博客

结果 

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

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

相关文章

mysql数据库 - 统诉

1、DDL - 数据库操作 show databases; create database 数据库名 use 数据库名 select database() drop database 数据库名 2、DDL- 表操作 show tables; create table desc 表名 show create table 表名 alter table 表名 add/modify/change/rename drop table 表名 3、DML …

hbuilderx创建、运行uni-app

创建uni-app 在点击工具栏里的文件 -> 新建 -> 项目: 选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。 uni-app自带的模板有 Hello uni-app ,是官方的组件和API示例。还有一个重要模…

解决easyExcel模板填充时转义字符\{xxx\}失效

正常我们在使用easyExcel进行模板填充时,定义的变量会填充好对应的实际数据,未定义的变量会被清空,但是如果这个未定义的变量其实是模板的一部分,那么清空了就出错了。 在这张图里,上面的是模板填充后导出的文件&…

Guitar Pro8.2吉他软件2024中文版功能特点介绍

Guitar Pro 8.2是一款功能强大的吉他乐谱软件,专为吉他手、音乐制作人和音乐爱好者设计。它提供了丰富的功能,帮助用户轻松创建、编辑、打印和分享吉他乐谱。以下是Guitar Pro 8.2的主要功能特点: Guitar Pro 2024 win-安装包下载如下&#x…

Java开发手册

技术栈 数据库 事务 概念 一组操作,要么都执行,要么都不执行 原理 事务提交后,发生变更的数据先更新到Buffer Pool缓冲区里,然后再合适的时机再持久化到磁盘为了防止持久化过程中数据库宕机,导致数据丢失&#xf…

MATLAB中,如何捕获和处理异常?如何在MATLAB中自定义错误消息?在MATLAB中,error函数和warning函数有什么区别?

MATLAB中,如何捕获和处理异常? 在MATLAB中,捕获和处理异常通常使用try-catch语句。try块包含可能引发异常的代码,而catch块则包含当异常发生时执行的代码。以下是如何在MATLAB中捕获和处理异常的基本步骤: 使用try关键…

华为HCIP Datacom H12-831 卷24

多选题 1、如图所示,某园区部署OSPF实现网络互通,其中Area1部署为NSSA区域。某工程师为了实现R1访问R4的环回口地址,在R4的OSPF进程中引入直连路由。以下关于该场景的描述,错误的有哪些项? A、在R4引入直连路由后,R1通过转换后的…

DFS排列组合问题

文章目录 DFS排列组合问题排列组合问题的标准模板排列LeetCode46全排列题目描述代码 LeetCode47全排列Ⅱ题目描述代码 组合LeetCode77组合题目描述代码 LeetCode39组合总和题目描述代码 LeetCode40组合总和Ⅱ题目描述代码 LeetCode216组合总和Ⅲ题目描述代码 DFS排列组合问题 …

【鸿蒙开发】第十四章 Stage模型应用组件-任务Mission

1 任务(Mission)管理场景 任务(Mission)管理相关的基本概念如下: AbilityRecord:系统服务侧管理一个UIAbility实例的最小单元,对应一个应用侧的UIAbility组件实例。系统服务侧管理UIAbility实例数量上限为512个。 Mi…

Day2 JS基础

2.1 运算符 赋值运算符 一元运算符 -- <script>let h20let kh hconsole.log(h) //22console.log(k) //42let i1console.log(i i i) //7 ​// 递增运算符&#xff1a;var a8aconsole.log(a) //9 ​var num10var bnumconsole.log(b) //10</script> 比较运…

C++面试:CPU的上下文切换、中断处理与系统调度

目录 一、上下文切换&#xff08;Context Switching&#xff09; 1. 切换基础 2. 减少切换 使用线程池 使用异步编程 使用共享内存 二、中断处理&#xff08;Interrupt Handling&#xff09; 中断基础 中断发生过程 三、系统调度&#xff08;Scheduling&#xff09; …

Code-Audit(代码审计)习题记录6-7

介绍&#xff1a; 自己懒得搭建靶场了&#xff0c;靶场地址是 GitHub - CHYbeta/Code-Audit-Challenges: Code-Audit-Challenges为了方便在公网练习&#xff0c;可以随地访问&#xff0c;本文所有的题目均来源于网站HSCSEC-Code Audit 6、习题6 题目内容如下&#xff1a; 源代…

探索水下低光照图像检测性能,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建海底生物检测识别分析系统

海底这类特殊数据场景下的检测模型开发相对来说比较少&#xff0c;在前面的博文中也有一些涉及&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《尝试探索水下目标检测&#xff0c;基于yolov5轻量级系列模型n/s/m开发构建海底生物检测系统》 《基于YOLOv5C3CBAMCBA…

【数据结构(顺序表)】

一、什么是数据结构? 数据结构是由“数据”和“结构”两词组合而来。 什么是数据&#xff1f;常见的数值1、2、3、4.....、教务系统里保存的用户信息&#xff08;姓名、性别、年龄、学历等等&#xff09;、网页里肉眼可以看到的信息&#xff08;文字、图片、视频等等&#xff…

【分布式事务 XA模式】MySQL XA模式详解

MYSQL中的XA事务 写在前面1. XA事务的基本原理2. MySQL XA事务操作 写在前面 MySQL 的 5.0.3 版本开始支持XA分布式事务&#xff0c;并且只有innoDB存储引擎支持XA事务。 1. XA事务的基本原理 XA事务本质上是一种基于两阶段提交的分布式事务&#xff0c;分布式事务可以理解成…

[LWC] Components Communication

目录 Overview ​Summary Sample Code 1. Parent -> Child - Public Setter / Property / Function a. Public Property b. Public getters and setters c. Public Methods 2. Child -> Parent - Custom Event 3. Unrelated Components - LMS (Lightning Message…

拍立淘助力电商新趋势:以图搜图购物成主流

拍立淘&#xff08;或称为“以图搜图”&#xff09;是一种基于图像识别的购物搜索技术&#xff0c;它允许用户通过上传图片或拍摄照片来搜索相似的商品。这一功能为电商领域带来了新的购物体验&#xff0c;使得搜索更加直观和便捷。 为了实现这样的功能&#xff0c;需要后端支…

【CSS-语法】

CSS-语法 ■ CSS简介■ CSS 实例■ CSS id 和 class选择器■ CSS 样式表■ 外部样式表(External style sheet)■ 内部样式表(Internal style sheet)■ 内联样式(Inline style)■ 多重样式 ■ CSS 文本■ CSS 文本颜色■ CSS 文本的对齐方式■ CSS 文本修饰■ CSS 文本转换■ CS…

网络原理 HTTP _ HTTPS

回顾 我们前面介绍了HTTP协议的请求和响应的基本结构 请求报文是由首行请求头空行正文来组成的 响应报文是由首行形影头空行响应正文组成的 我们也介绍了一定的请求头之中的键值对的属性 Host,Content-type,Content-length,User-agent,Referer,Cookie HTTP协议中的状态码 我们先…

网络原理TCP之“三次握手“

TCP内核中的建立连接 众所周知,TCP是有连接的. 当我们在客户端敲出socket new Socket(serverIp,severPort)时,就在系统内核就在建立连接 真正建立连接是在系统内核中建立的,我们程序员只是调用相关的api. 在此处,我们把TCP的建立连接称为三次握手. 系统在内核建立连接时如上…