Typescript基础

01. TypeScript 是什么

• TypeScript 是微软开发的开源编程语言， Type + JavaScript（type是类型 => 在 JS 基础之上，为 JS 添加了类型支持）
• 简称：TS，是 JavaScript 的超集，

 ts学啥

• javascript中的变量，循环，函数在ts中正常使用，不需要额外学习语法
• 学习ts主要是学习：

• • 类型
  • 与具体前端开发框架的结合使用

02. 为什么要有typescript

       JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）类型错误的例子： var num = 18; num.toLowerCase();

       这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率

• 从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言

• • 静态类型：编译期做类型检查
  • 动态类型：执行期做类型检查

• 代码编译和代码执行的顺序：1 编译 2 执行
• 对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）
• 对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）

并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间

03. 安装编译 TS 的工具包

• 问题：为什么要安装编译 TS 的工具包?
• 回答：Node.js(或者是浏览器)，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行
• 安装命令：npm i -g typescript  或者 yarn global add typescript

• • typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
  • 注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript  yarn 全局安装：sudo yarn global add typescript

• 验证是否安装成功：tsc –v(查看 typescript 的版本)

04. 编译并运行 TS 代码

1. 创建 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
2. 将 TS 编译为 JS：在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
3. 执行 JS 代码：
   1. 在终端中输入命令，node hello.js
   2. 把hello.js引入某个html文件来运行

1. 创建 ts 文件  ===>  2 编译 TS  ===>  3 执行 JS

• 说明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可
• 注意：由 TS 编译生成的 JS 文件，代码中就没有类型信息了

注意：

真正在开发过程中，其实不需要自己手动的通过tsc把ts文件转成js文件，这些工作应该交给webpack或者vite来完成

05. 类型注解(重点)

• TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

• • 所有的 JS 代码都是 TS 代码
  • JS 有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查

• TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

let age1 = 18

let age2: number = 18

• 说明：代码中的 : number 就是类型注解
• 作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
• 解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错
• 约定了类型之后，代码的提示就会非常的清晰

06. TypeScript类型概述

可以将 TS 中的常用基础类型细分为两类：

• JS 已有类型

• • 原始类型，简单类型（number/string/boolean/null/undefined）
  • 复杂数据类型（数组，对象，函数等）