day50（vueJS）TypeScript（概念、优势、静态与动态类型、类型约束以及类型注解）

TypeScript介绍

概念
优势
静态类型与动态类型
[类型约束 / 类型注解](#类型约束 / 类型注解)

概念

javascript 复制代码

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

优势

javascript 复制代码

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

静态类型与动态类型

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 现在是一个字符串

类型约束 / 类型注解

常规类型

javascript 复制代码

常规类型包括数字类型，字符串，布尔值，声明未赋值和赋空值五类内置基本类型的数据。
该类数据添加类型约束，统一的语法为：let 变量名:类型 = 值

let a:boolean= false;
let num:number = 100;
let str:string = "过年好";
let u:undefined =undefined;----------类型约束为undefined，那么后续赋值就只能是undefined。
let n:null = null;-----------类型约束为null，那么后续赋值就只能是null

非常规类型

数组类型

javascript 复制代码

数组类型添加类型约束，有两种写法(功能上无区别）
第一种声明方式(字面量方式）
	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]];

对象类型

javascript 复制代码

接口
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]

万能类型

javascript 复制代码

当一个变量的值源于用户输入、动态内容和第三方插件，在不清楚明确类型时，可以定义为 any 
型；当只知道一部分值的类型时，也可定义为 any 型

let a1: any = {}

函数类型

javascript 复制代码

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的类型约束

javascript 复制代码

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);

父对子传值时的类型约束

javascript 复制代码

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 来访问传入的属性
	  }
	});