1.TypeScript入门之TS初体验(运行TS代码)
Ⅰ.TypeScript介绍
1.1 TypeScript是什么
TypeScript(简称TS)是JavaScript的超集(JS有的TS都有)。
TypeScript = Type + JavaScript(在JS的基础之上,为JS添加了类型支持)
//TS代码:有明确的类型,即:number(数值类型)
let age1: number = 18
//JS代码:无明确类型
let age2 = 18
TypeScript是微软开发的开源编程语言,可以在任何运行JavaScript的地方运行(浏览器等)
1.2 TypeScript为什么要为JS提供类型支持?
背景:JS类型系统存在先天缺陷,JS代码中绝大部分错误都是类型错误(Uncaught TypeError)。
问题:增加了找bug,改bug的时间,严重影响了开发效率。
*TS属于静态类型的编程语言,JS属于动态类型的编程语言。
静态类型:编译期做类型检查;动态类型:执行期做类型检查
1.3 TS 相比于 JS 的优势
- 更早(写代码的同时)发现错误,减少改bug,找bug的时间,提升开发效率。
- 程序中任何位置的代码都有代码提示,随时随地的安全感,增强了开发体验。
- 强大的类型系统提升了代码的可维护性,使得重构代码更加容易。
- 支持最新的ECMAScript语法,优先体验最新的语法,让你走在前端技术的最前沿。
- TS 类型推断 机制,不需要在代码中的每个地方都显示标注类型,让你在享受优势的同时,尽量降低了成本。
除此之外,Vue3源码使用 TS 重写,Angular默认支持 TS,React与 TS 完美配合,TypeScript已成为大中型前端项目的首选编程语言。
Ⅱ.TypeScript初体验
2.1 安装编译TS 的工具包
Node.js/浏览器 都只认识JS代码,不认识TS代码。需要先将TS代码转换为JS代码后,然后才能运行。
npm i -g typescript
typescript包:用来编译TS代码的包,提供了 tsc命令 ,实现了TS -> JS的转换。
tsc -v(查看TypeScript的版本)
2.2 编译并运行TS 代码
1.创建hello.ts文件(注意:TS文件后缀名为**.ts**)。
2.将TS编译为JS:在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 JS 文件)。
3.执行JS 代码:在终端中输入命令,node hello.js。
创建TS文件 ————> **编译TS ** ————> 执行 JS
所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可
注意:由TS编译生成的 JS 文件 ,代码中就没有类型信息了
2.3 简化运行TS的步骤
使用 ts-node包,“直接”在Node.js中执行 TS 代码,ts-node并不会生成 JS 文件
安装命令:npm i -g ts-node(ts-node包提供了ts-node命令)。
查看版本:ts-node -v
使用方式:ts-node hello.ts
解释:ts-node命令在内部偷偷的将 TS -> JS ,然后,再运行 JS 代码
~~
~~
下一章节:TypeScript入门之TS常用类型(1)
1.TypeScript入门之TS初体验(运行TS代码)相关推荐
- TypeScript入门指南:从JS到TS的转变
文章目录 引言 为什么需要使用 TypeScript? 简单认识一下 TypeScript 的基础语法 1. 类型注解 2. 接口 3. 类 4. 泛型 5. 枚举 从JS到TS的转变策略 总结 引言 ...
- 腾讯云香港轻量服务器宝塔Linux镜像入门教程(初体验)
腾讯云轻量应用服务器30M峰值带宽24元/月,价格很不错新手站长网选择了一台入门级1核1G的轻量应用服务器lighthouse,镜像安装宝塔Linux面板,新手站长网来详细说下腾讯云香港轻量应用服务器 ...
- 网络安全技术入门-kali linux初体验
特别声明:网络不是法外之地.不要贸然攻击别人操作系统,出现类似事件,本人概不负责.如果你继续阅读本博客.代表你同意并知悉声明内容! kali渗透工具 metasploit metasploit简称ms ...
- webpack从入门到精通(一)初体验
1. webpack简介 1.1 webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 在 webpack 看来, 前端的所有资源文件(j ...
- TypeScript 初体验:第一个 TS 文件
步骤 1. 创建ts文件: ① 在桌面中创建文件夹:code. ② 在文件夹上点击鼠标右键,然后点击 Open With Code(用VSCode打开文件夹). ③ 在 VSCode 中新建ts文件: ...
- vue create()获取ref_vue-next+typescript 初体验
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...
- php的swoole教程,PHP + Swoole2.0 初体验(swoole入门教程)
PHP + Swoole2.0 初体验(swoole入门教程) 环境:centos7 + PHP7.1 + swoole2.0 准备工作: 一. swoole 扩展安装 1 .下载swoole cd/ ...
- python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- 我的GO+语言初体验-Go+入门安装避坑手册
一.入门简介 英文介绍 For engineering: working in the simplest language that can be mastered by children. For ...
最新文章
- 搭建本地YUM源服务器
- (转载)linux如何设置为低内核启动(降核)
- 面试官问:如果MySQL引起CPU消耗过大,你会怎么优化
- C++:String的写时拷贝
- 内存引起的几种故障的解决
- 01.26 小组功能初步总结
- ajax fetch api,fetch 简介: 新一代 Ajax API
- linux命令行效率,聊聊那些可以提高工作效率的Linux命令
- 单选框,下拉菜单美化
- 如何理解 RxJS?RxJS的中文API和使用教程
- ELK pipeline
- db2 随机数函数_sql中的随机函数怎么用?
- html图片轮播效果加链接,HTML首页怎么加图片轮播?
- 查询linux下的业务端口,Linux系统查询显示端口信息用什么命令
- 【stm32CubeMX】STM32F103c8t6串口通信
- 安卓8.1系统SDK去掉系统设置中的自动调节亮度
- 解密微信小程序用户敏感数据获取用户信息
- 亲测,idea切换分支异常:error: The following untracked working tree files would be overwritten by checkout
- g2o学习记录(1)安装和运行其下面的unit_test项目
- Change Log for Pruning Undesired Code of Joomsport
热门文章
- Android X86和手机arm上的android开发是不同的。
- EZ-USB 68013在WIN7 64位下驱动识别方法
- c++ 编一程序,输入一行字符串,将其中的大写英文字母改为小写,再输出。
- 来,让携程技术人带你“看”世界——2020携程技术年度盛典侧记
- h5(微信sdk/企信sdk)页面跳转微信小程序,监听微信小程序关闭事件,已解决
- 【IOS】IOS开发问题解决方法索引(四)
- 每日简报 5月17日简报新鲜事 每天一分钟 了解新鲜事
- 人心隔肚皮,如何才能保证别人对你说的都是真的?
- 心法利器[54] | NLP任务上线前评测
- 林园:站在牛市入口微笑