❤ React体系19-TypeScript认识和使用

更新部分包含以下内容...

• 联合类型
• 类型别名
• 函数类型(1 单独指定参数和返回值的类型)
• 函数类型(2同时指定参数和返回值的类型)
• void类型
• 函数可选参数
• 对象类型
• 对象可选属性
• 接口
• 接口和类型别名的对比
• 接口继承
• 元组
• 类型推论
• 类型断言

1、认识TypeScript

（1）TypeScript简介

————————————————

由微软开发的自由和开源的编程语言。是JavaScript的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作Prototype

简单来说： TypeScript 是 JavaScript进化版，并添加了额外的语法来支持类型

————————————————

（2）Ts和JS的关系

（3）TS命名上：

TypeScript 文件的扩展是 .ts ，而不是 JavaScript 文件的 .js 扩展名 TypeScript的优化 • 将可选类型引入 JavaScript。 • 在当前 JavaScript 的基础上实现未来 JavaScript 的计划功能，即 ​​ECMAScript​​ Next 或 ES Next。

（4）TS增加的功能上

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

以下功能是从 ECMA 2015 反向移植而来：

• 类
• 模块
• lambda 函数的箭头语法
• 可选参数以及默认参数

（5）TS基本类型

（1）JavaScript 已有类型

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

对象类型：object(数组、对象、函数等)

（2）TypeScript 新增类型 联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any 等

总结（TypeScript常用基础类型分类）

TypeScript的基础类型主要有布尔值、数字、字符串、数组、元组、枚举、Any、Void、Null 、Undefined、Never、Object等。

总结（TypeScript 原始类型 ）

原始数据类型包括：Boolean、Number、String、Null、Undefined、Symbol（ES6 新增）

2、TypeScript的优缺点：

你可以初步的理解为：

TypeScript为JavaScript添加了类型支持

TS相比JS的优势

1. （类型系统）JS有的TypeScript都有，是Type和JavaScipt的结合，在JS的基础上为 JS 添加了类型系统，强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
2. 从编程语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。
3. 静态类型是编译期做类型检查，动态类型是执行期做类型检查。代码编译和代码执行的顺序本身是1编译2执行.通过使用类型，我们可以在编译时捕获错误，而不是让它们在运行时发生。
4. 支持最新的ECMAScript语法，优先体验最新的语法，时刻在前端技术的最前沿。
5. 对于JS来说：需要等到代码真正去执行的时候才能发现错误(晚)。
6. 对于TS来说：在代码编译的时候(代码执行前)就可以发现措误(早)。
7. TS类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本。除此之外，Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首先编程语言。 10.配合VSCode等开发工具,在程序中任何位置的代码都有代码提示。更早(写代码的同时)发现错误，减少找Bug、改Bug时间，提升开发效率,开发体验更友好

TypeScript小案列：:

JavaScript 相加函数使用：

如果我们从 HTML 输入元素中获取值并将它们传递给函数，我们可能会得到意想不到的结果

function add(x, y) {
   return x + y;
}
let result = add(input1.value, input2.value);
console.log(result); // result of concatenating strings
 
let result = add('10', 20);
console.log(result); // 1020用户输入 10 和 20，则 ​​add()​​函数将返回 1020，而不是 30

​​原因​​:

input1.value 和 input2.value 是字符串，而不是数字

TypeScript 相加函数使用

function add(x: number, y: number) {
	return x + y;
}

指定函数的参数类型为数字类型时， 函数 add() 将只接受数字，而不接受任何其他值

3、安装和使用

安装编译TS的工具包

打开Windows下的命令提示符，输入命令

npm install -g typescript //安装
tsc -v  //查看版本

编译并运行TS代码

创建一个app.ts文件

const hello : string = "Hello World!"
console.log(hello)

执行以下命令将 TypeScript 转换为 JavaScript 代码

tsc app.ts //将 TypeScript 转换为 JavaScript 代码
node app.js  //输出hello word

简化运行TS的步骤

使用 ts-node包，直接在Node.js中执行TS代码

安装命令
npm i -g ts-node 
使用方式：
ts-node ts文件名

4、基本语法

类型注解

类型注解是TypeScript区别于JavaScript最显著的特点

不同数据类型变量的类型注解

TypeScript 使用类型注释来显式指定标识符的类型，例如变量、函数、对象等

var age: number = 44;          // 数字变量
var name: string = "Rahul";     // 字符串变量
var isUpdated: boolean = true; // 布尔变量 

这里面代码之中的 : number 就是类型注解

6、Ts在React之中的使用

（1）基本类型使用

常见的一些类型只需要在后面加一个类型注解就可以

  let age: number = 18
  let myName: string = '老师'
  let isLoading: boolean = false

（2）数组类型的两种写法

这里我推荐第一种写法，因为非常清晰

// 写法一： let numbers: number[] = [1, 3, 5] 

// 写法二： let strings: Array<string> = ['a', 'b', 'c']

（3）联合类型写法

数组中既有 number 类型，又有 string 类型

正常我们的数组数据定义是这样子：
let arr= [1,2,3];


加上我们想要约束的数字类型
let arr:number[]= [1,2,3];

如果这个数组里面又有number 类型，又有 string 类型
这个时候我们就需要更改为联合类型：
let arr:(number|string)[]= [1, 'a', 3, 'b'];

（4）类型别名

当上述的代码类型我们多次使用的时候，难免会出现大量的堆积 这个时候我们可以使用类型别名来简化代码，复用

这块说白了，还是抽离和复用思想，简单的很

let arrA:(number|string)[]= [1, 'a', 3, 'b'];
let arrB:(number|string)[]= [1, 'a', 3, 'b'];

我们使用类型别名优化以后
type CustomArray = (number | string)[]
let arrA:CustomArray= [1, 'a', 3, 'b'];
let arrB:CustomArray= [1, 'a', 3, 'b'];