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

news2024/10/5 21:14:40

课程地址:【黑马程序员前端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.coloradmin.cn/o/1469101.html

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

相关文章

C# WPF 桌面应用程序使用 SQlite 数据库

我们在开发 WPF 桌面应用程序时,数据库存的使用是必不可少的,除非你的应用没有数据存储的需求,有了数据存储需求,我们就会面临使用什么样的数据库的选择问题,我的选择方案是,单机版的应用我优先选择 Sqlite…

Spring篇----第五篇

系列文章目录 文章目录 系列文章目录前言一、Spring IoC 的实现机制。二、什么是 spring bean?三、spring 提供了哪些配置方式?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享…

手写redux和applyMiddleware中间件react示例

目录 一 核心代码 1.reducer 2.store.js 二 关于context API的使用 1. MyContext 2. createContext 3. ContextProvider 4. connect 三 组件验证效果 1. Todo 2. TodoList 3.TodoItem 4.TodoInput 5. App组件引入Todo组件 一 核心代码 1.reducer // 新增列表数…

springboot197基于springboot的毕业设计系统的开发

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的毕业设计系统的开发 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 第五章 第四章 …

餐饮管理系统的设计与实现

餐饮管理系统的设计与实现 获取源码——》公主号:计算机专业毕设大全

金融知识分享系列之:五日线

金融知识分享系列之:五日线 一、股票均线二、五日线三、五日线加量能三、五日线案例四、五日线案例五、五日线案例六、五日线案例七、五日线案例八、五日线案例 一、股票均线 股票均线是一种用于平滑股票价格的指标。它是根据一段时间内的股票价格计算得出的平均值…

只需三步即可更改centos7系统语言,centos7系统语言更换,centos7系统中文互换

只需三步即可更改centos7系统语言,centos7系统语言更换,centos7系统中文互换 操作系统:centOS7.8 64位 ssh登录工具:FinalShell FinalShell可以点此下载 先查看系统的默认语言 locale #zh_CN 中文如何验证是中文,可以使用umtui来验证 umtui是一款…

5 buuctf解题

命令执行 [BJDCTF2020]EasySearch1 打开题目 尝试弱口令&#xff0c;发现没有用 扫描一下后台&#xff0c;最后用御剑扫描到了index.php.swp 访问一下得到源码 源码如下 <?phpob_start();function get_hash(){$chars ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstu…

浅析Linux设备驱动:DMA内存映射

文章目录 概述DMA与Cache一致性DMA映射类型一致性DMA映射dma_alloc_coherent 流式DMA映射dma_map_single数据同步操作dma_direct_sync_single_for_cpudma_direct_sync_single_for_device 相关参考 概述 现代计算机系统中&#xff0c;CPU访问内存需要经过Cache&#xff0c;但外…

Javaweb之SpringBootWeb案例之配置优先级的详细解析

1. 配置优先级 在我们前面的课程当中&#xff0c;我们已经讲解了SpringBoot项目当中支持的三类配置文件&#xff1a; application.properties application.yml application.yaml 在SpringBoot项目当中&#xff0c;我们要想配置一个属性&#xff0c;可以通过这三种方式当中…

Android LinearLayout 如何让子元素靠下居中对齐 center bottom

Android LinearLayout 如何让子元素靠下居中对齐 center bottom 首先你需要知道两个知识点&#xff1a; android:layout_gravity 指定的是当前元素在父元素中的位置android:gravity 指定的是当前元素子元素的排布位置 比如&#xff1a; 有这么一个布局&#xff0c;我需要让…

IDEA创建java项目

1. 创建单个项目 1.1 点击New Project 刚安装好会进入下面的创建页面&#xff0c;选择直接New Project创建新项目。 如果后续打开IDEA&#xff0c;并且上次的项目存在&#xff0c;则会打默认开上次的项目&#xff0c;此时可以选择File -> New->Project创建新项目。 …

《TCP/IP详解 卷一》第4章 地址解析协议ARP

目录 4.1 引言 4.2 一个例子 4.3 ARP缓存 4.4 ARP帧格式 4.5 ARP例子 4.6 ARP缓存超时 4.7 代理ARP 4.8 免费ARP和地址冲突检测 4.9 ARP命令 4.10 使用ARP设置嵌入式设备IPv4地址 4.11 与ARP相关攻击 4.12 总结 4.1 引言 地址解析&#xff1a; IPv4&#xff1a;AR…

fpga_RGB模型与硬件加速思维

一 RGB模型 人眼之所以可以看到各种颜色的光&#xff0c;主要是红绿蓝三种感光细胞综合感觉的结果&#xff0c;而红绿蓝三色被称为三原色。 饱和度均为100%的RGB能组合成8种颜色&#xff0c;计算机处理的BMP图片为24bit的位图&#xff0c;即每一通道的颜色可以组合为2的8次方&a…

什么是智慧公厕?智慧公厕改善城市环境,提升居民生活质量

智慧公厕是指通过信息化、数字化和智慧化技术手段&#xff0c;对公共厕所进行高效管理和服务。它利用先进的科技手段&#xff0c;提升城市环境、改善居民生活质量&#xff0c;成为现代城市建设的重要组成部分。下面将以智慧公厕源头厂家广州中期科技有限公司&#xff0c;大量精…

Gitflow:一种依据 Git 构建的分支管理工作流程模式

文章目录 前言Gitflow 背景Gitflow 中的分支模型Gitflow 的版本号管理简单模拟 Gitflow 工作流 前言 Gitflow 工作流是一种版本控制流程&#xff0c;主要适用于较大规模的团队。这个流程在团队中进行合作时可以避免冲突&#xff0c;并能快速地完成项目&#xff0c;因此在很多软…

Unity(第三部)新手绘制地形

1、创建地形 游戏对象3d对象地形 2、功能 1、 红框内按键为创建相邻地形、点击后相近地形会呈现高亮框、点击高亮区域可以快速创建地形 每块地形面积是1km*1km 2、第二个按钮是修改地形 下面的选择是修改类型 选项含义描述Raise or Lower Terrain升高或降低地形单击左键可…

分布式ID开源框架简单介绍

UidGenerator(百度) 一款基于 Snowflake(雪花算法)的唯一 ID 生成器。 UidGenerator 对 Snowflake(雪花算法)进行了改进&#xff0c;生成的唯一 ID 组成如下&#xff1a; sign(1bit):符号位&#xff08;标识正负&#xff09;&#xff0c;始终为 0&#xff0c;代表生成的 ID…

STM32 TCP实现OTA

芯片&#xff1a;stm32f407 开发平台&#xff1a;stm32cubeide 上位机开发平台&#xff1a;visual studio 2017 1. FLASH分配 将flash划分为四个部分&#xff1a; bootloader: 0x8000000-0x800ffff app1: 0x8010000-0x805ffff app2: …

Qt Android sdk配置报错解决

使用的jdk8总是失败&#xff0c;报错command tools run以及platform sdk等问题。后来主要是设置jdk版本为17&#xff0c;就配置生效了。Android sdk路径可以选用Android Studio自带的&#xff0c;但是也要在Qt中点击“设置SDK”按钮做必要的下载更新等。 编译器这里会自动检测到…