概念

	它是 JavaScript 的一个超集，支持 ECMAScript 6 标准，由微软公司开发的自由、开源的编
程语言，扩展了javaScript 得语法，它的设计目标是开发大型应用，全部浏览器兼容

优势

	JavaScript 发展迅速：TypeScript 可以帮你降低 JavaScript 弱语言的脆弱性，帮你减少由
于不正确类型导致错误产生的风险.需要强类型的 JavaScript：TypeScript 把高级语言的强类型引入 JavaScript ，解决了防止
在编写 JavaScript 代码时因为数据类型的转换造成的错误主流框架及最新特性的支持：Angular 2.0 版本就开始集成 TypeScript，React 、Vue也要加
入 TypeScript 的阵营，能用最新的语言特性，编写质量更高的 JavaScript

静态类型与动态类型

1.静态类型是在编译时进行类型检查的类型。// 声明变量 a 的类型为 numberlet 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的类型约束：：：typescriptimport { 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.vueimport { defineComponent, PropType } from 'vue';export default defineComponent({props: {message: {type: String as PropType<string>, // 定义 message 属性的类型为 stringrequired: true // 可选，指定是否必填},count: {type: Number as PropType<number>, // 定义 count 属性的类型为 numberdefault: 0 // 可选，指定默认值}},setup(props) {// 使用 props.message 和 props.count 来访问传入的属性}});