TypeScript学习笔记

1. 了解TS

1.1 TS与JS的关系

超集与子集： TypeScript 是 JavaScript 的超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。你可以直接在 TypeScript 中使用 JavaScript 语法。

静态类型检查： TypeScript 引入了静态类型系统，允许开发者在编译时捕获错误，而不是在运行时。这有助于提高代码质量、减少 bug，并且在大型项目中尤其有用。

可选的类型注解和接口： TypeScript 提供了类型注解和接口，使得开发者能够定义变量、函数参数和返回值的具体类型。这些类型信息是可选的，但在需要的地方提供类型注解可以帮助工具（如 IDE）提供更好的代码提示和自动完成。

新的语言特性： TypeScript 预先实现了许多 ECMAScript 标准草案中的新功能，例如类、模块、装饰器等。开发人员可以在 TypeScript 中使用这些新功能，然后编译成大多数浏览器可以理解的 ES5 或更低版本的 JavaScript 代码。

编译步骤 ： TypeScript 需要一个编译步骤来将源代码转换为 JavaScript，这个过程通常由 tsc 编译器或构建工具（如 Webpack 或 Gulp）处理。而 JavaScript 可以直接被浏览器执行，无需编译。

兼容性 ：虽然 TypeScript 是 JavaScript 的超集，但并非所有第三方库都提供了 TypeScript 类型定义文件（.d.ts）。幸运的是，社区已经创建了很多这样的类型定义文件，可以通过 npm 安装并使用。

1.2 TS与JAVA

1.2.1 相同

TypeScript (TS) 和 Java 虽然属于不同的编程语言，但它们之间也有一些共同点：

面向对象：

TypeScript 支持类和接口等面向对象的特性，可以实现封装、继承和多态。

Java 是一种完全的面向对象编程语言，所有的代码都必须定义在类中。

静态类型检查：

TypeScript 引入了静态类型系统，允许开发者在编译时捕获错误，而不是在运行时。

Java 同样是一种静态类型的编程语言，要求在声明变量和方法时提供类型信息。

强类型：

TypeScript 和 Java 都是强类型语言。这意味着一旦一个变量被赋予了一个特定的类型，它就不能被赋值为其他类型的值，除非进行了显式的类型转换。

访问修饰符：

TypeScript 和 Java 都支持访问修饰符，如 public、private 和 protected（java还包含default），用于控制类成员的可见性和可访问性。

命名空间和包管理：

TypeScript 使用模块（即命名空间）来组织代码，避免全局作用域中的命名冲突。

Java 使用包（package）来组织代码，并通过 import 语句引入外部类。

工具和框架支持：

TypeScript 和 Java 都有丰富的开发工具和框架支持，例如 IDEs（如 Visual Studio Code 或 IntelliJ IDEA）、构建工具（如 Gradle 或 Webpack）以及测试框架。

跨平台：

TypeScript 编译后的 JavaScript 可以在任何支持 JavaScript 的环境中运行，因此具有良好的跨平台性。

Java 则使用 JVM（Java Virtual Machine）实现了"一次编写，到处运行"的理念，可以在多种操作系统上运行。

开源社区和生态系统：

TypeScript 和 Java 都拥有庞大的开源社区，提供了大量的库和插件来扩展语言功能。

尽管 TypeScript 和 Java 在许多方面有所不同，但在一些基本的编程范式和设计原则上有相似之处，这使得从一种语言过渡到另一种语言时相对容易。

1.2.2 区别

TypeScript (TS) 和 Java之间的区别

目标平台和执行环境：

TypeScript 是 JavaScript 的超集，主要应用于浏览器端的前端开发。经过编译后，它生成的是 JavaScript 代码，可以在支持 JavaScript 的环境中运行，如浏览器。

Java 是一种面向对象的编程语言，常用于服务器端（后端）开发、Android 移动应用开发等。Java 程序需要在 Java 虚拟机 (JVM) 上运行。

静态类型与动态类型：

TypeScript 引入了静态类型系统，允许开发者在编译时检查类型错误。虽然 TypeScript 允许使用 any 类型来绕过类型检查，但它鼓励开发人员为变量和函数指定明确的类型。

Java 也是一种静态类型的编程语言，要求在声明变量和方法时提供类型信息。编译器会检查类型兼容性，并在编译阶段捕获许多类型相关的错误。

语法风格：

TypeScript 语法借鉴了许多来自 Java 的特性，例如类、接口、访问修饰符等。这使得熟悉 Java 的开发人员能够相对容易地学习 TypeScript。

Java 语法更为严格，遵循更传统的面向对象编程原则，比如强制实现抽象方法、严格的继承关系等。

异步编程：

TypeScript 由于其对 JavaScript 的原生支持，对于异步编程提供了更好的支持。它支持 Promise、async/await 等异步编程模型，这些在 JavaScript 中广泛使用。

Java 对于异步编程的支持相对较弱，但可以通过引入第三方库（如 Reactor、RxJava）来增强这一能力。

包管理器和模块系统：

TypeScript 通常使用 npm（Node.js 包管理器）来管理依赖项，并通过 ES6 模块或 CommonJS 规范来组织代码。

Java 使用 Maven 或 Gradle 进行依赖管理，而模块化方面则有 Java Platform Module System (JPMS)，但较新且不如 JavaScript 社区中的模块系统成熟。

运行时性能：

TypeScript 编译后的 JavaScript 代码是在解释性环境中运行的，性能取决于宿主环境（如浏览器），通常被认为比编译型语言慢。

Java 在 JVM 上运行，尽管是解释执行，但 JIT（Just-In-Time）编译器可以将热点代码编译为机器码，从而提高运行效率。

总的来说，TypeScript 更适合前端 Web 开发，具有更好的类型安全性，而 Java 则在企业级应用、服务器端开发和 Android 应用开发中占据主导地位。不过随着技术的发展，两者的界限也在逐渐模糊，例如 Java 可以通过框架（如 Vaadin）进行 Web 开发，而 TypeScript 也可以用于构建服务端应用程序。

2. 环境搭建

由于ts要运行，需要呗解析器转换为js才可以，解析器是基于node.js实现的，故要先安装node.js

2.1 下载node.js

官网地址：Download | Node.js

2.2 安装node.js

cs 复制代码

#安装成功后查看版本命令行输入
node -v
#设置国内的淘宝精选
npm config set registry https://registry.npm.taobao.org/

2.3 安装ts

cs 复制代码

#进入命令行输入
npm i -j typescript  安装ts
#查看ts版本命令行输入
tsc -v

2.4 创建文件

创建一个以.ts结尾的文件
javascript 复制代码
console.log('hello ts')

2.5 编译ts文件

（1）命令行进入当前目录。

（2）执行命令：tsc xxx.ts

（3）该文件夹下会生成一个xxx.js文件，为ts编译后的js文件。浏览器可以直接引入使用。

3 数据类型

3.1 类型声明

（1）类型的声明：

（1.1）类型的声明是ts非常重要的一个特点。

（1.2）通过类型的声明，可以指定ts中变量（参数，形参）的类型。

（1.3）指定类型后，变量重新赋值与原声明类型不同就会提示报错。

（1.4）变量声明类型后，就只能储存某种类型的值

（1.5）备注：虽然还可以编译为js（js中并没有问题，所以可以编译通过），但是后续

可以通过配置使其编译不通过。

语法：
javascript 复制代码
//声明变量a，类型为num
let a:number
let b:string
//如果声明后立刻赋值，ts会自动检测类型
let c=true
/*函数中的参数，
    js并不会指定类型
    ts中不仅会指定类型，还会判定参数数量,也可以指定返回值类型
*/
function sum(a:number,b:number):number{
    return a+b
}
（2）自动判断类型：

当赋值与声明同时进行，ts会自动判断变量的类型（类型判断机制）。

（3）函数中的参数：

js并不会指定类型

ts中不仅会指定类型，还会判定参数数量,也可以指定返回值类型。

3.2 ts中的数据类型

3.2.1基本数据类型

Boolean （布尔型）：表示真或假的值，如 true 或 false。

Number （数字型）：表示整数或浮点数，如 42 或 3.14。在 TypeScript 中，所有的数值类型都使用浮点数来表示。

String （字符串型）：表示文本信息，如 "Hello, world!"。

Null 和 Undefined ：分别表示 JavaScript 的 null 和 undefined 值。注意，在 TypeScript 中，null 和 undefined 是不同的类型。

Symbol：唯一标识符，可以作为对象属性的键。

3.2.2复合数据类型

Array （数组型）：由相同类型的元素组成的数据结构，可以是任意类型的数组，如 number[]、string[] 或 [string, number][]。可以使用泛型来定义更灵活的数组类型，例如 Array<number>。

Tuple （元组型）：固定长度且元素类型的组合，例如 [string, number] 表示一个包含一个字符串和一个数字的元组。

Object（对象型）：一组键值对，可以通过字面量语法创建，也可以通过接口（Interface）或者类（Class）定义。

Enum（枚举型）：一组命名的常量，可以用数字或字符串来表示。

3.2.3特殊类型

（1）Any（任意型）：表示任何类型的值，通常用于在不清楚类型的情况下提供灵活性

（2）Unknown （未知型）：与 any 类似，但具有更强的限制，它不兼容除 null 和 undefined 之外的所有类型，除非明确转换。

（3）Void（空型）：表示永远不会返回的函数类型，例如抛出错误或无限循环的函数。

（4）Never（永不型）：表示永远不会返回的函数类型，例如抛出错误或无限循环的函数。

（5）**字面量：**直接声明let a:'10'，a只能为'10',可以配合||等运算符使用
javascript 复制代码
 let a3:'10'
 a3='10'
 let b3:'10'|10
 b3='10'
 b3=10
注意：any关闭ts类型检测，如声明了变量，不声明类型，也不赋值（类型判断机制）那么默认就是any。如果将一个以声明类型的变量赋值为一个any类型，那么被声明类型的变量也会被关闭语法检测，Unknown则不会关闭被声明类型的变量的语法检测。

Unknown实际上是一个类型安全的any，要想使用需要先进性类型检测
javascript 复制代码
let test1 = '10'
let any1: any;
test1 = any1
let unKonw1: unknown;
unKonw1 = '10'
if (typeof unKonw1 === "string") {
    test1 = unKonw1;
}
或者使用类型断言
javascript 复制代码
test1=unKonw1 as string
test1=<string>unKonw1