1. 什么是Typescript?

  • 学习文档 官方文档

  • 我们可以同通俗的认为Typescript = Type + JavaScript(再原先的js基础上新增了类型支持)

  • 最简单的代码展示:

// Typescript代码: 有明确的类型指向(静态类型), 即:number(数值类型)
let a: number = 1 

//JavaScript代码: 无明确的类型指向(动态类型)
let a = 1
  • TypeScript 为什么要为 JS 添加类型支持
    • 背景：JS 的类型系统存在“先天缺陷”，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）
    • 问题：增加了找 Bug、改 Bug 的时间，严重影响开发效率
    • 从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JS 属于动态类型的编程语言。
    • 静态类型：编译期做类型检查； 动态类型：执行期做类型检查。
    • 代码编译和代码执行的顺序：1 编译 2 执行
    • 对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）。
    • 对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）。
    • 并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间

Typescript特点:

  1. TypeScript是JavaScript的超集。
  2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
  3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
  4. TS完全兼容JS，换言之，任何的TS代码都可以直接当成JS使用。
  5. TS不能被JS解析器直接执行,反之,JS却能被TS解析器直接执行
  6. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。
    image

2. 环境搭建

  1. 下载node.js

  2. 安装node.js

  3. 安装编译 TS 的工具包

    • Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行。
    • image
    • 安装指令
npm i -g typescript
  1. 编译并运行 TS 代码
    1. 创建 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
    2. 将 TS 编译为 JS：在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）。
    3. 执行 JS 代码：在终端中输入命令，node hello.js
  2. 简化运行 TS 的步骤
    1. 问题描述：每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐
    2. 简化方式：使用 ts-node 包，直接在 Node.js 中执行 TS 代码。
    3. 安装命令：npm i -g ts-node（ts-node 包提供了 ts-node 命令）。
    4. 使用方式：ts-node hello.ts。
    5. 解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码。
      image

代码展示:

// 设置一个字符串类型变量并输出
/*
	解释:声明了一个变量hello并指定它的类型为string(字符串)类型,
		a在以后的使用过程中只能是字符传类型
*/ 
let hello:string = 'hellow! Typescript!!'
console.log(hello);
  • 结果展示:
    image