【TypeScript】TypeScript知识点

一：最简单的使用：在赋值的情况下自动匹配其格式,所以name为string类型,age为number类型

let user = {  
	name: "张三",  
	age: 18,
};
//user.age="20"; 
//此时会报错,解:age为number类型，赋值为string报错
//user.name++; 
//此时会报错,解:name为string类型，string类型不能进行自加操作

二：通过接口定义的方式定义其类型

基本使用：

interface UserConfig {  
	name: string;  
	age: number;
}
let user: UserConfig = {  
	name: "张三",  
	age: 18,
};
// 此时结果和上面结果相同

接口中?的使用

interface UserConfig {  
	name: string; 
	age?: number;
}
let user: UserConfig = { 
	 name: "张三", 
  	 age: 18,
};
// 此时代表user对象中的age属性是可能不存在的
// 所以此时user也可以这样写
let user: UserConfig = {  
	name: "张三",
};//此时并不会进行报错
使用?时的使用规范
使用时也需要判断他是否存在// 错误示范user.age++; 
//报错：Object is possibly 'undefined'.
// 正确用户if (user.age) {user.age++;}

其他

接口中也可以这样写，表现还会有其它值存在，类型为
xxxinterface UserConfig {  
	name: string;  
	age?: number;
	[key: string]: number | string;
}
注：[key:string]:number|string;中的值包括了name以及age，即name不可以为number|string之外的类型，否则user报错异常

三：通过ref获取子组件实例

const PublicTreeRef = ref<InstanceType<typeof PublicTree>>();
// 此种方式，必须将PublicTreeRef放在return中，否则获取value失败
// PublicTree为import PublicTree from "./xxxx" 的名称
// 使用组件中的方法：组件在页面渲染，可能存在为空现象，所以需要判断
// 即：
if (PublicTreeRef.value) {  
	PublicTreeRef.value.init(); 
}
//init为组件中的自定义方法}

四：类型断言 as

let user = {  name: "张三" as string,  age: 18 as number,};
// 这种方式和接口方式类似，但是可以不需要写接口

五：typescript类型收窄

一般用作于未知类型判断

eg：
let data = "123" as unknown; //unknown不知道类型
// unknown 类型不能赋值给除了 unknown 或 any 的其他任何类型，使用前必需显式进行指定类型，或是在有条件判断情况下能够隐式地进行类型推断的情况。

基本使用：我们明确知道data为string类型,我们可以这样使用:通过typeof的方式判断其类型

if (typeof data == "string") {
	data = "456";
}// 当data为多种类型时,更多时同理

let data = "123" as string|number;
if (typeof data == "string") {
	data = "456";
}if (typeof data == "number") {
	data++;
}

for循环中使用

// 注:ts在for循环使用中,可能存在值类型获取正确但报错问题
// eg:下面这种情况可能会报错:array[i],我们知道判断肯定没问题,但是进入不到if循环中
for (let i = 0; i < array.length; i++)
 {  
 	if (typeof array[i] == "number") { 
 	   data++;  
 	 }
 }
 // 解决办法// eg:通过一个中间变量的方式即可正确进行if判断
 for (let i = 0; i < array.length; i++)
{ 
  	 let element = array[i]; 
  	  if (typeof element == "number") {  
  	    data++; 
  	    }
}

六：常用的几种类型

数组

let arr = [] as xxx;xxx:number[];
表示在数字类型的数组string[];
表示字符串类型的数组unknown[];
表示不知道类型的数组,使用需要进行类型收窄
Array<{id:number,name?:string}>;
表示数组中是一个个对象形式存在的,其中对象有id以及可能存在的name属性

函数

// 表示函数的返回值在string类型,其他有常见的string/number等等,还有表示该函数没有返回值voidfunction fun():string{}
// 函数接收参数类型,表示函数接受的第一个参数为number类型,第二个参数有对象类型,其中包含了id以及可能
// 存在的name属性,(并不表示只有这些属性),使用其他属性也在{}中声明属性名与类型
function fun(index:number,item:{id:string,name?:string}){}

七：不推荐any的使用

官方解释：TS中对于被标记为 any 类型的变量，是没有进行类型检查而直接通过编译阶段的检查
即该变量可以为任意值,ts不会对他进行类型检查
使用ts是为了更好的规范代码,使用any就大大失去了其规范性
当然,接触到不会的地方还是要进行any的

注：个人理解，有错就改，感谢，菜鸡在此有礼了