TypeScript介绍
概念
它是 JavaScript 的一个超集，支持 ECMAScript 6 标准，由微软公司开发的自由、开源的编
程语言，扩展了javaScript 得语法，它的设计目标是开发大型应用，全部浏览器兼容
优势
JavaScript 发展迅速：TypeScript 可以帮你降低 JavaScript 弱语言的脆弱性，帮你减少由
于不正确类型导致错误产生的风险.
需要强类型的 JavaScript：TypeScript 把高级语言的强类型引入 JavaScript ，解决了防止
在编写 JavaScript 代码时因为数据类型的转换造成的错误
主流框架及最新特性的支持：Angular 2.0 版本就开始集成 TypeScript，React 、Vue也要加
入 TypeScript 的阵营，能用最新的语言特性，编写质量更高的 JavaScript
静态类型与动态类型
1.静态类型是在编译时进行类型检查的类型。
// 声明变量 a 的类型为 number
let a: number = 10;
// 函数参数和返回值类型声明
function add(x: number, y: number): number {
return x + y;
}
// 接口定义对象的结构
interface Person {
name: string;
age: number;
}
// 类型别名
type Point = {
x: number;
y: number;
};
2.动态类型是在运行时确定类型的类型。
// JavaScript 中的动态类型
let b = 10; // b 可以随时被赋予不同类型的值
b = 'hello'; // 合法，b 现在是一个字符串
类型约束 / 类型注解
常规类型
常规类型包括数字类型，字符串，布尔值，声明未赋值和赋空值五类内置基本类型的数据。
该类数据添加类型约束，统一的语法为：let 变量名:类型 = 值
let a:boolean= false;
let num:number = 100;
let str:string = "过年好";
let u:undefined =undefined;----------类型约束为undefined，那么后续赋值就只能是undefined。
let n:null = null;-----------类型约束为null，那么后续赋值就只能是null
非常规类型
数组类型
数组类型添加类型约束，有两种写法(功能上无区别）
第一种声明方式(字面量方式）
let 变量名:数据类型[]=[元素,元素,.....]
第二种声明方式(泛型方式)
let 变量名:Array<number>=[元素,元素,.....]
let arr1: number[] = [1, 3, 5, 6, 100, '100'];
let arr2: Array<number> = [1, 3, 5, 6, 100, '100', [10, 20]];
对象类型
接口
1．使用interface 关键字来声明接口。
2．接口名称（比如，此处的IPerson)，可以是任意合法的变量名称。
3．声明接口后，直接使用接口名称作为变量的类型。
4．如果每一行只有一个属性类型，因此，属性类型后没有;(分号)。
类型别名（自定义类型) : 为任意类型起别名。
使用场景: 当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。
interface(接口）和type（类型别名）的对比:
相同点:
都可以给对象指定类型。
不同点:
接口，只能为对象指定类型。
类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
let person: { name: string; age: number; myName():string; myAge:()=>number } = {
name: 'jack ' ,
age: 19,
myName (),
myAge()
}
let person: {
name: string
age: number
myName():string
myAge:()=>number
} = {
name: 'jack ' ,
age: 19,
myName (),
myAge()
}
interface Person {---------当一个对象类型被多次使用时，一般会使用接口（( interface）来描述对象的类型，达到复用的目的
name: string
age: number
sayHi: ()=> void
}
let person1: Person = {
iname: 'jack' ,
age: 19,
sayHi()
}
let person2: Person = {
iname: 'tom' ,
age: 20,
sayHi()
}
type NArray = number[];----------类型别名
let arr1: NArray = [1,2,3,4]
万能类型
当一个变量的值源于用户输入、动态内容和第三方插件，在不清楚明确类型时，可以定义为 any
型；当只知道一部分值的类型时，也可定义为 any 型
let a1: any = {}
函数类型
void表示没有任何类型，常用于函数返回值（加了该类型约束的函数，没有返回值）
另外，在ts中函数的参数和返回值也需要指明类型
function warnUser(): void {
console.log("This is my warning message");
}
function fn(m:string):string{
}
let fn1: (m:string) =>string = (m) =>{
return ``
}
使用reactive和ref的类型约束
1.reactive的类型约束：：：
typescript
import { reactive } from 'vue';
interface User {
name: string;
age: number;
}
// 创建一个响应式的 User 对象
const user: User = reactive({
name: 'Alice',
age: 25
});
2.ref的类型约束：：：
import { ref } from 'vue';
// 创建一个响应式的数字
const count = ref<number>(0);
父对子传值时的类型约束
1.父组件：：：
<!-- ParentComponent.vue -->
<template>
<ChildComponent :message="parentMessage" :count="parentCount" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent',
parentCount: 10
};
}
});
</script>
2.子组件：：：
// ChildComponent.vue
import { defineComponent, PropType } from 'vue';
export default defineComponent({
props: {
message: {
type: String as PropType<string>, // 定义 message 属性的类型为 string
required: true // 可选，指定是否必填
},
count: {
type: Number as PropType<number>, // 定义 count 属性的类型为 number
default: 0 // 可选，指定默认值
}
},
setup(props) {
// 使用 props.message 和 props.count 来访问传入的属性
}
});