typescript怎么用 typescript ??

admin2024-08-22  9

TypeScript 是什么

TypeScript (简称:TS )是 JavaScript 的超集 ( JS 有的 TS 都有)。TypeScript = Type + JavaScript (在 JS 基础之上,为 JS 添加了类型支持)。 TypeScript 是微软开发的开源编程语言,可以在任何运行 JavaScript 的地方运行。

在JS的基础下为什么要用ts

  1. js最开始是为了在前端做数据效验,本身是有缺陷的----变量没有类型
  2. 在大型项目中,js在出错之后,不好定位出错的代码,在执行阶段才能发现
    3.ts需要添加类型,在代码编译的时候ts(代码执行前)就可以发现错误 。
  3. ts属于静态类型的编程语言, JS 属于动态类型的编程语言。
    静态类型:编译期做类型检查; 动态类型:执行期做类型检查。
    代码编译和代码执行的顺序: 先编译 后执行。

TS的特点

  1. 给变量和函数参数定义数据类型
  2. ts需要编译,在编译阶段(cnpm i typescript -g )就可以发现数据类型错误,从根源上解决数据类型导致的一些bug
  3. 新增了一些特殊类型:元祖 泛型 联合类型 字符串常量 构造类修饰器–public(公共成员)、private(私有成员)、protected(保护成员)
  4. 只要是js可以执行的平台(浏览器,node),ts都可以使用
  5. ts不能直接使用,需要编译成js之后再去调用
  6. 可以给ts添加配置选项,指定比如需要编译的ts文件/目录,以及转成的js版本,模块化的标准(commonJS/ES6)
  7. 程序中任何位置的代码都有代码提示 ,随时随地的安全感,增强了开发体验。
  8. 强大的类型系统提升了代码的可维护性,使得重构代码更加容易。
  9. TS 类型推断机制, 不需要在代码中的每个地方都显示标注类型 ,让你在享受优势的同时,尽量降低了成本。

怎么使用TS

1.创建一个.ts文件

typescript怎么用 typescript ??,typescript怎么用 typescript ??_typescript,第1张

2.全局安装ts(在终端编辑cnpm i typescript -g )

typescript怎么用 typescript ??,typescript怎么用 typescript ??_typescript_02,第2张

为什么要安装编译 TS 的工具包?

Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为 JS 代码, 然后才能运行。

3.如果不知道有没有安装成功可以查看一下版本

typescript怎么用 typescript ??,typescript怎么用 typescript ??_javascript_03,第3张

4 开始编译

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_04,第4张

随后就会自动生成一个.js文件

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_05,第5张

5 在.ts里开始写代码,并且编译,.js文件随后也会同步(报错可以不必理会,问题不大,不会影响运行)

typescript怎么用 typescript ??,typescript怎么用 typescript ??_typescript_06,第6张

typescript怎么用 typescript ??,typescript怎么用 typescript ??_前端_07,第7张

6. 在.ts里给变量添加类型注解

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_08,第8张

开始运行

typescript怎么用 typescript ??,typescript怎么用 typescript ??_typescript怎么用_09,第9张

出现上图错误表明编译错了文件,应该编译.js文件

typescript怎么用 typescript ??,typescript怎么用 typescript ??_前端_10,第10张

8. 全局监听

初始化

typescript怎么用 typescript ??,typescript怎么用 typescript ??_typescript_11,第11张

自动生成(也可以自己手动添加)

typescript怎么用 typescript ??,typescript怎么用 typescript ??_前端_12,第12张

打开文件,只留下编译选项

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_13,第13张

编译一下(会发现不会再报错了)

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_14,第14张

然后进行全局监听

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_15,第15张

typescript怎么用 typescript ??,typescript怎么用 typescript ??_编程语言_16,第16张

出现上图情况表明已经监听成功

为什么要进行监听

每次修改代码后 ,都要重复执行两个命令 ,才能运行 TS 代码, 太繁琐,于是就进行监听 ,监听当前目录下的ts文件改变,并且如果没有发现错误,就可以运行 JS 代码。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!