Ⅰ.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 的优势

  1. 更早(写代码的同时)发现错误,减少改bug,找bug的时间,提升开发效率。
  2. 程序中任何位置的代码都有代码提示,随时随地的安全感,增强了开发体验。
  3. 强大的类型系统提升了代码的可维护性,使得重构代码更加容易
  4. 支持最新的ECMAScript语法,优先体验最新的语法,让你走在前端技术的最前沿。
  5. 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代码)相关推荐

  1. TypeScript入门指南:从JS到TS的转变

    文章目录 引言 为什么需要使用 TypeScript? 简单认识一下 TypeScript 的基础语法 1. 类型注解 2. 接口 3. 类 4. 泛型 5. 枚举 从JS到TS的转变策略 总结 引言 ...

  2. 腾讯云香港轻量服务器宝塔Linux镜像入门教程(初体验)

    腾讯云轻量应用服务器30M峰值带宽24元/月,价格很不错新手站长网选择了一台入门级1核1G的轻量应用服务器lighthouse,镜像安装宝塔Linux面板,新手站长网来详细说下腾讯云香港轻量应用服务器 ...

  3. 网络安全技术入门-kali linux初体验

    特别声明:网络不是法外之地.不要贸然攻击别人操作系统,出现类似事件,本人概不负责.如果你继续阅读本博客.代表你同意并知悉声明内容! kali渗透工具 metasploit metasploit简称ms ...

  4. webpack从入门到精通(一)初体验

    1. webpack简介 1.1 webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 在 webpack 看来, 前端的所有资源文件(j ...

  5. TypeScript 初体验:第一个 TS 文件

    步骤 1. 创建ts文件: ① 在桌面中创建文件夹:code. ② 在文件夹上点击鼠标右键,然后点击 Open With Code(用VSCode打开文件夹). ③ 在 VSCode 中新建ts文件: ...

  6. vue create()获取ref_vue-next+typescript 初体验

    无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...

  7. php的swoole教程,PHP + Swoole2.0 初体验(swoole入门教程)

    PHP + Swoole2.0 初体验(swoole入门教程) 环境:centos7 + PHP7.1 + swoole2.0 准备工作: 一. swoole 扩展安装 1 .下载swoole cd/ ...

  8. python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨

    python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...

  9. 我的GO+语言初体验-Go+入门安装避坑手册

    一.入门简介 英文介绍 For engineering: working in the simplest language that can be mastered by children. For ...

最新文章

  1. 搭建本地YUM源服务器
  2. (转载)linux如何设置为低内核启动(降核)
  3. 面试官问:如果MySQL引起CPU消耗过大,你会怎么优化
  4. C++:String的写时拷贝
  5. 内存引起的几种故障的解决
  6. 01.26 小组功能初步总结
  7. ajax fetch api,fetch 简介: 新一代 Ajax API
  8. linux命令行效率,聊聊那些可以提高工作效率的Linux命令
  9. 单选框,下拉菜单美化
  10. 如何理解 RxJS?RxJS的中文API和使用教程
  11. ELK pipeline
  12. db2 随机数函数_sql中的随机函数怎么用?
  13. html图片轮播效果加链接,HTML首页怎么加图片轮播?
  14. 查询linux下的业务端口,Linux系统查询显示端口信息用什么命令
  15. 【stm32CubeMX】STM32F103c8t6串口通信
  16. 安卓8.1系统SDK去掉系统设置中的自动调节亮度
  17. 解密微信小程序用户敏感数据获取用户信息
  18. 亲测,idea切换分支异常:error: The following untracked working tree files would be overwritten by checkout
  19. g2o学习记录(1)安装和运行其下面的unit_test项目
  20. Change Log for Pruning Undesired Code of Joomsport

热门文章

  1. Android X86和手机arm上的android开发是不同的。
  2. EZ-USB 68013在WIN7 64位下驱动识别方法
  3. c++ 编一程序,输入一行字符串,将其中的大写英文字母改为小写,再输出。
  4. 来,让携程技术人带你“看”世界——2020携程技术年度盛典侧记
  5. h5(微信sdk/企信sdk)页面跳转微信小程序,监听微信小程序关闭事件,已解决
  6. 【IOS】IOS开发问题解决方法索引(四)
  7. 每日简报 5月17日简报新鲜事 每天一分钟 了解新鲜事
  8. 人心隔肚皮,如何才能保证别人对你说的都是真的?
  9. 心法利器[54] | NLP任务上线前评测
  10. 林园:站在牛市入口微笑