【黑马程序员】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博客

结果 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探究全链路压力测试的含义与重要性

全链路压力测试是指对整个应用系统的各个环节或组件进行压力测试,以模拟实际生产环境中的用户负载和流量,评估系统在高负载条件下的性能表现。 1. 全链路压力测试的含义 全链路压力测试涉及系统的所有组件和环节,包括前端用户界面、应用服务器…

算法沉淀——动态规划之路径问题(leetcode真题剖析)

算法沉淀——动态规划之路径问题 01.不同路径02.不同路径 II03.珠宝的最高价值04.下降路径最小和05.最小路径和06.地下城游戏 01.不同路径 题目链接:https://leetcode.cn/problems/unique-paths/ 一个机器人位于一个 m x n 网格的左上角 (起始点在下图…

c++: 用c++语言对车辆进行建模

一 原理 1.1 阿克曼转向模型 转向半径:后轴中心点到原点O的距离 已知道转向半径,可以反求转向角。或者知道转向角,可以求出转向半径。 四个顶点的转向半径。 还要定义这两个参数 1.2 车辆运动的建模 运动写在大的while循环里。 绘制车辆的思路;(1)清

020 基于Spring Boot + Thymeleaf 实现的任务发布网站(源码+数据库)

部分代码地址: https://github.com/XinChennn/xc020-springboot-recruit 基于Spring Boot Thymeleaf 实现的任务发布网站(源码数据库) 一、系统介绍 雇主:登录、注册、发布任务、选择中标雇员、评价雇员雇员:登录、…

如何解决Nginx启动出现闪退问题?

哈喽,大家好,我是小浪。那么大家首次在启动nginx的时候,绝大部分同学会出现以下情况,就是我们双击nginx.exe文件之后,屏幕闪退一下就没了,然后我们访问localhost:8080提示404. 那么出现这种情况其实是我们…

【深度学习笔记】 3_13 丢弃法

注:本文为《动手学深度学习》开源内容,部分标注了个人理解,仅为个人学习记录,无抄袭搬运意图 3.13 丢弃法 除了前一节介绍的权重衰减以外,深度学习模型常常使用丢弃法(dropout)[1] 来应对过拟合…

“点击查看显示全文”遇到的超链接默认访问的问题

今天在做一个例子,就是很常见的点击展开全文。 我觉得这是一个很简单的效果,也就几行代码的事,结果点击了以后立刻隐藏不见,控制台代码也不报错,耽误了我很长时间,最后才发现问题出在超链接身上。 “展开全…

k8s-kubeapps部署 20

部署kubeapps应用,为Helm提供web UI界面管理: 下载最新版本的kubeapps并修改其values.yaml文件 下载并拉取所需镜像: 部署应用 添加解析 修改svc暴露方式为LoadBalancer 得到分配地址 访问http://192.168.182.102 授权并获取token 1.24前的…

osmnx笔记:从OpenStreetMap中提取点和边的shp文件(FMM文件准备内容)

1 导入库 import osmnx as ox import time from shapely.geometry import Polygon import os import numpy as np 2 提取Openstreetmap 的graph Gox.graph_from_place(Huangpu,Shanghai,China,network_typedrive,simplifyTrue) ox.plot_graph(G) 3 提取graph中的点和边 gdf…

pytest如何在类的方法之间共享变量?

在pytest中,setup_class是一个特殊的方法,它用于在类级别的测试开始之前设置一些初始化的状态。这个方法会在类中的任何测试方法执行之前只运行一次。 当你在setup_class中使用self来修改类属性时,你实际上是在修改类的一个实例属性。在Pyth…

《模仿游戏》:天才团队如何破解密码学之谜

引言 计算机科学相关的电影不少,有探索人工智能的《黑客帝国》、还有逻辑和结构学的《盗梦空间》、还有互联网创业的《社交网络》和《硅谷海盗》、还有探索虚拟世界的《源代码》,更甚有国产计算机科学科幻启蒙儿童电视剧《快乐星球》。上述电影充满科技和…

函数——递归6(c++)

角谷猜想 题目描述 日本一位中学生发现一个奇妙的 定理,请角谷教授证明,而教授 无能为力,于是产生了角谷猜想。 猜想的内容:任给一个自然数, 若为偶数则除以2,若为奇数则乘 3加1,得到一个新的…

JDK8新特性全解析:Java8变革之旅

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

云原生之容器编排实践-ruoyi-cloud项目部署到K8S:MySQL8

背景 前面搭建好了 Kubernetes 集群与私有镜像仓库,终于要进入服务编排的实践环节了。本系列拿 ruoyi-cloud 项目进行练手,按照 MySQL , Nacos , Redis , Nginx , Gateway , Auth ,…

测试圈的网红工具:Jmeter到底难在哪里?!

小欧的公司最近推出了一款在线购物应用,吸引了大量用户。然而随着用户数量的增加,应用的性能开始出现问题。用户抱怨说购物过程中页面加载缓慢,甚至有时候无法完成订单,小欧作为负责人员迫切需要找到解决方案。 在学习JMeter之前…

[VNCTF2024]-Web:CheckIn解析

查看网页 一款很经典的游戏,而且是用js写的 在调试器里面我们可以看见,如果游戏通关的话,它会进行一系列操作,包括使用console.log(_0x3d9d[0]);输出_0x3d9d[0]到控制台,那我们就直接在点击在控制台求出它的值

基于SpringBoot实现的医院药品管理系统

一、系统架构 前端:html | layui | js | css 后端:springboot | mybatis-plus 环境:jdk1.6 | mysql | maven 二、代码及数据库 三、功能介绍 01. 登录页 02. 药品库存管理-登记出入口信息 03. 药品库存管理-问题药品信息 …

软考45-上午题-【数据库】-数据操纵语言DML

一、INSERT插入语句 向SQL的基本表中插入数据有两种方式: ①直接插入元组值 ②插入一个查询的结果值 1-1、直接插入元组值 【注意】: 列名序列是可选的,若是所有列都要插入数值,则可以不写列名序列。 示例: 1-2、插…

基于ZYNQ的PCIE高速数据采集卡的设计(二)总体设计与上位机

采集卡总体设计及相关技术 2.1 引言 本课题是来源于雷达辐射源识别项目,需要对雷达辐射源中频信号进行采集传输 和存储。本章基于项目需求,介绍采集卡的总体设计方案。采集卡设计包括硬件设计 和软件设计。首先对采集卡的性能和指标进行分析&#x…

ELK 简介安装

1、概念介绍 日志介绍 日志就是程序产生的,遵循一定格式(通常包含时间戳)的文本数据。 通常日志由服务器生成,输出到不同的文件中,一般会有系统日志、 应用日志、安全日志。这些日志分散地存储在不同的机器上。 日志…