TypeScript 基本介绍 ===

目录

TypeScript是什么？

TypeScript 和 JavaScript 的区别

 使用 TypeScript 

ts-node 简化运行 TS 的步骤

ts-node报错问题

类型注解

类型推论

TS的类型

原始类型

联合类型

数组类型

类型别名

函数-单个定义

函数-统一定义函数格式

函数返回值是void

void和undefined的区别

函数-可选参数

可选和默认值的区别

对象类型-单独使用

对象类型-类型别名

对象类型-接口

接口和类型的区别

接口继承

接口继承的示例

元组

元组 Tuple

字面量类型

解释

字面量类型

字面量的作用

---

TypeScript是什么？

1. TypeScript 简称：TS，是 JavaScript 的超集。
   简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。

2. 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript

3. TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行

// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

TypeScript 和 JavaScript 的区别

js的缺陷

1.JS 的类型系统是弱类型的，没有类型的概念

let ar = 11  // 这里是数值
ar = []  // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误

没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率

2. JavaScript 属于动态类型的编程语言

边解释边执行，错误只能在运行阶段才能发现。

TS属于静态类型的编程语言  

1. 它要先编译，再执行。不能直接执行，需要编译成js才能执行

2. 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

对比：

• 使用 JS：

  1. 在 VSCode 里面写代码

  2. 在浏览器中运行代码 --> 运行时，才会发现错误【晚】

• 使用 TS：

  1. 在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】

  2. 在浏览器中运行代码

 区别：

1. ts完全兼容javascript，它可以编译成javascript

2. 使用TS会有强大的代码类型提示

3. 提升了代码的可维护性，使得重构代码更容易

4. 支持最新的 ECMAScript 语法。.ts-----编译---> .js

 使用 TypeScript 

全局安装编译 TS 的工具包

安装包：npm i -g typescript

• typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化

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

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript

ts-node 简化运行 TS 的步骤

安装命令

npm i -g ts-node

使用方式：ts-node hello.ts 相当于：1 tsc 命令 2 node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

ts-node报错问题

解决方式

1. tsc --init 生成配置文件 tsconfig.json

2. 写代码时，用{}包起来

类型注解

 可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

格式

let 变量名: 类型 = 初始值

示例代码:

let age: number = 18

说明：代码中的 : number 就是类型注解

作用：为变量添加类型约束**。

上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'

类型推论

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。
好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

发生类型推论的 2 种常见场景

1. 声明变量并初始化时

2. 决定函数返回值时

   // 变量 age 的类型被自动推断为：number
   let age = 18
   
   // 函数返回值的类型被自动推断为：number
   function add(num1: number, num2: number) {
     return num1 + num2
   }

TS的类型

将 TS 中的常用基础类型分为两类

1. JS 已有类型

   1. 原始类型：number/string/boolean/null/undefined/symbol

   2. 对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

   1. 联合类型

   2. 自定义类型(类型别名)

   3. 接口

   4. 元组

   5. 字面量类型

   6. 枚举

   7. void

   8. any 等

• 注意：

  1. 原始类型在 TS 和 JS 中写法一致

  2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法