TS入门学习

---

前言

第一遍学习TS

---

一、TS是什么？

官方介绍：TypeScript 是 JavaScript 的超集，这意味着它可以完成 JavaScript 所做的所有事情，而且额外附带了一些能力。
Typed JavaScript at Any Scale. 它强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何规模。
我们知道，JavaScript 是一门非常灵活的编程语言，

• 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
• 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
• 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
• 函数是 JavaScript中的一等公民，可以赋值给变量，也可以当作参数或返回值。

JavaScript 本身是一种动态类型语言，这意味着变量可以改变类型。从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。使用 TypeScript 的主要原因是就是为了给 JavaScript 添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能改变。它可以防止很多bug !

Ts是静态类型

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型
静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型

TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。
python是强类型，在处理以下代码时需要强制转换类型后才不会报错

print(str(1) + '1')  // 打印出字符串 '11'

强/弱是相对的，Python 在处理整型和浮点型相加时，会将整型隐式转换为浮点型，但是这并不影响 Python 是强类型的结论，因为大部分情况下 Python 并不会进行隐式类型转换。相比而言，JavaScript 和 TypeScript 中不管加号两侧是什么类型，都可以通过隐式类型转换计算出一个结果——而不是报错——所以 JavaScript 和 TypeScript 都是弱类型。

虽然 TypeScript 不限制加号两侧的类型，但是我们可以借助 TypeScript 提供的类型系统，以及 ESLint 提供的代码检查功能，来限制加号两侧必须同为数字或同为字符串。这在一定程度上使得 TypeScript 向「强类型」更近一步了——当然，这种限制是可选的。

这样的类型系统体现了 TypeScript 的核心设计理念[6]：在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。

二、安装TS

1.引入库

TypeScript 的命令行工具安装方法如下：

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

编译 TypeScript 文件：

tsc hello.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。
但是每次修改ts文件都要运行一遍tsc很麻烦，使用了vscode编译器配置

在当前文件夹下执行tsc --init 生成文件 tsconfig.json
terminal中现在run task

三、TS基础

原始类型

javascript有七种原始数据类型，布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt

let isDone: boolean = false; //布尔值

let decLiteral: number = 6; //数值，es6中的其他进制会被编译为十进制
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

let myName: string = 'Tom'; //字符串
// 空值 用来赋值给没有返回数据的函数
function alertName():void{
   
  alert('my name is haha')
}
//声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
let unusable: void = undefined;

let name:undefined = undefined //
let n: null = null;
//与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量,而 void 类型的变量不能赋值给 number 类型的变量
let a:undefined
let a:number = 1

数组

let ids: number[] = [1, 2, 3, 4, 5]; // 只能包含 number
let names: string[] = ['ConardLi', 'Tom', 'Jerry']; // 只能包含 string
// let options: boolean[] = [true, false, false]; 只能包含 true false
let books: object[] = [
  {
    name: 'Tom', animal: 'cat' },
  {
    name: 'Jerry', animal: 'mouse' },
]; // 只能包含对象
let arr: any[] = ['hello', 1, true]; // 啥都行，回到了 JS

ids.push(6);
// ids.push('7'); // ERROR: Argument of type 'string' is not assignable to parameter of type 'number'.

// 数组可以包含多个类型
let person: (string | number | boolean)[] = ['ConardLi', 1, true];
person[0] = 100;
// person[1] = {name: 'ConardLi'} // Error - person array can't contain objects

// 如果数组有默认值，ts也会进行类型推断

//ts中可以定义一种特殊类型的数组，元组，元组是具有固定大小和已知数据类型的数组，他比常规数组更严格
let persona:[string,number,boolean]=['conaeadli',1,true]
// persona[0]=17  //Error - Value at index 0 can only be a string

对象

在定义对象的类型时，我们通常会使用 interface。如果我们需要检查多个对象是否具有相同的特定属性和值类型时，是很有用的：

interface Person {
   
  name: string;
  age: number;