一、简介
因为JavaScript不够现代化开发的需求，扩充到了现在的TypScript。由弱类型语言向强类型语言发展。TypScript类似java、kotlin等面向对象语言。
二、编译
-
1.命令行编译。手动创建.ts文件后再单独创建编出译浏览器可识别的js文件
命令行编译
-
2.命自动化编译。通过node.js初始化依赖后，自动监视ts文件变化后创建js变化后的文件
image.png
三、数据类型
-
1、JavaScript数据类型
-
2、TypeScript数据类型
自动装箱特性
类构造函数：TypeScript 允许你在构造函数中使用类型推断来简化赋值操作。
class PersonA{
name:string
// 构造函数
constructor(name: string) {
this.name = name;
}
}
使用public用法，省去this赋值
class PersonB{
// 构造函数
constructor(public name: string) {
}
}
-
常用类型
1.any类型
2.unknown类型
3.never类型
4.void类型
undefined是void返回类型的一个特殊情况
5.object和Object类型
基本很少用object和Object，包含的范围太广了
6.对象类型
7.枚举类型enum：一组命名常量，一组一组相关的值，它能增强代码的可读性，也让代码更好维护。
8.type类型
type设定为void类型时特殊情况
-
1.定义void类型时马上使用，这种情况可以准确控制类型
image.png -
2.先定义void类型，后使用，这种情况特殊不做严格控制。注意这种情况，不能拿f1,f2,f3等属性在做其他逻辑比较等操作，因为返回的是void。
特殊用法
四、装饰器
前端中的装饰器（Decorators）与 Java 中的注解（Annotations）在概念上有相似之处，即它们都为元编程提供了支持。但是，在实际的应用和实现细节方面，它们之间还是存在着显著的不同。下面详细解释两者的异同点。
相同点
- 元编程：两者都是元编程的技术，允许在代码层面之上进行编程，即编写代码来操作其他代码。
- 附加信息：无论是装饰器还是注解，都可以用来向代码添加额外的信息，这有助于其他工具或框架理解和处理这些信息。
不同点
- 目的和用途：
- 前端装饰器：主要用于在类声明时添加行为，例如在框架中用于定义组件的行为，增强类的功能等。装饰器可以用来改变类的行为或结构，如改变方法实现，拦截属性访问等。
- Java 注解：主要用于提供元数据，如文档化、跟踪代码依赖关系和指定编译时或运行时的框架行为。注解本身并不改变程序的行为，但可以通过反射来读取并据此执行某些操作。
- 实现方式：
- 前端装饰器：装饰器是函数，在类声明、方法、属性、访问器或参数声明时调用，可以接收特定的参数并根据需要修改目标对象。
- Java 注解：注解是接口的实现，通常由编译器或运行时框架来处理，可以通过自定义注解处理器来在编译时生成额外的代码。
- 执行时机：
- 前端装饰器：装饰器函数是在运行时被执行的，这意味着它们可以动态地改变类的行为。
- Java 注解：大多数情况下是在编译时被处理，当然也可以在运行时通过反射获取，但注解本身并不会直接改变程序的行为。
- 使用场景：
- 前端装饰器：常见于现代前端框架如 Angular 中，用于声明组件、服务、指令等。
- Java 注解：广泛应用于各种框架中，如 Spring 中的
@Component,@Service，Hibernate 中的@Entity等。
- 语法差异：
- 前端装饰器：使用装饰器语法
@decorator形式来标记类、方法等。- Java 注解：使用
@Annotation来标记类、方法等，并且可以通过@Retention来指定注解的生命周期（如RUNTIME,CLASS,SOURCE等）。
总结来说，尽管装饰器和注解都有助于代码的扩展性和可维护性，但是它们的设计意图和技术实现上还是有很大的区别的。装饰器更侧重于动态修改类的行为，而注解更侧重于提供元数据以供框架或工具使用。
-
类装饰器
-
属性装饰器
-
方法装饰器
方法装饰器是函数，它们可以用来修改类的方法。方法装饰器可以接收三个参数：
第一个参数，类的原型对象：即 this 对象的原型。
第二个参数，方法的名字：字符串形式的方法名称。
第三个参数，属性描述符：描述符对象，包含了方法的属性（如 value、writable、enumerable 和 configurable）。
在这个例子中，如果不返回 descriptor，则原有方法的描述符将不会被替换，装饰器所做的修改也不会生效。返回 descriptor 使得方法的行为被新的描述符所取代。
在这个例子中，log 装饰器用于记录方法调用时的输入和输出。
function log(target: any, name: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;//descriptor描述符对象，包含方法的属性
descriptor.value = function (...args: any[]) {
console.log(`Calling "${name}" with`, args);
const result = originalMethod.apply(this, args);
console.log(`"${name}" returned`, result);
return result;
};
return descriptor;// 返回修改后的描述符
}
class MyClass {
@log
doSomething(value: string): string {
return value.toUpperCase();
}
}
const instance = new MyClass();
const result = instance.doSomething('hello');
-
访问器装饰器
访问器装饰器是函数，它们可以用来修改类的访问器（getter 或 setter）。访问器装饰器可以接收三个参数：
第一个参数，类的原型对象：即 this 对象的原型。
第二个参数，访问器的名字：字符串形式的访问器名称。
第三个参数，属性描述符：描述符对象，包含了访问器的属性（如 get 和 set）。
-
装饰器工厂
装饰器本质是一个函数。一个函数能够返回一个装饰器就是一个装饰器工厂。
五、Vue与TypeScript结合
-
Vue 3 的 Composition API 结合使用ts
vue-1
vue-2
vue-3
vue-4 -
ts使用：不用单独创建.ts文件吗
image.png
image.png
image.png
image.png
image.png -
ts使用：什么场景需要创建单独的 .ts 文件
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
