TypeScript类型,声明(全)

前言

强类型定义语言在速度上可能略逊色于弱类型定义语言,
但是强类型定义语言带来的严谨性能够有效的避免许多错误。


基本类型,声明

 

声明类型

var [变量名] : [类型];                //初始变量值会设置为 undefined:
如:  var uname:string;

多个类型

var [变量名] : [类型]| [类型];
如:
	let c:boolean|string;
	c=true;
	c="ho";

任意类型

let d:any;		//任何类型
d=10;
d='hello';
d=true;

var [变量名] = 值;
如:var a;		//隐式,相当于 var d:any;

注意:
let a:string;
let b=1;
a=b; 		    //any类型,赋值给其它,不会报错,此时a的类型也是any

unknown类型

let e:unknown;
e=10;
e="hrll";
e=true;
let a:string;
a=e;			//unknown类型,赋值给其它,会报错

如果,就想赋值给它
方法1:
if(typeof e === "string"){
	a=e;
}

方法2:
类型断言
a=e as string; 
可以简写:   a=<string>e;
/*
* 不会报错
* 可以告诉解析器,变量的实际类型
*/
let k:1|2|3;//k可以是1,2,3

类型别名

type str=string;
let k:str;//k的类型是字符串

type abc=1|2|3;
let k:abc;//k可以是1,2,3

引用类型,声明

//object表示一个js对象
let a:object;
等同于
let a:{};
let a:{name:string};

a={}//会报错,必须要有name属性,并且类型是字符串
a={name:"悟空"}
a={name:"悟空",age:123}//会报错,必须要有name属性,并且类型是字符串
let a:{name:string,age?:number};
表示age可有可无
//[propName:string]:any         表示后面,可以是任意类型的属性
//[propName:string]:number      表示后面,number类型的属性
let c:{name:string,[propName:string]:any};

c={name:"ss",a:1,b:true}
/*
 * enum 枚举
 */
enum Gender{
	Male=0,
	Female=1
}
let i:{gender:Gender};//gender,只能用Gender
i={
	gender:Gender.Male
}
/*
 * &表示同时
 */
let j:string&number;//是string,同时是number
这样写没有意义

let j:{name:string}&{age:number};//对象里是,string,同时是number
j={name:"ss",age:18}
let d:(a:number,b:number)=>number;
//希望d是函数,a,b是number,返回类型number
let a:string[];
等同于
let a:Array<string>;
//表示字符串数组,数组里只能是字符串
let a:number[];//数值数组
/*
 * 元组,元组就是固定长度的数组
 */
let h:[string,string];//只能定义2个字符串,必须是2个,不能是一个,3个...

函数

function num(a:number,b:number):number{
	//a,b只能是number类型,并且返回类型必须是number	
}

function fun():number|string{
	//并且返回类型必须是number,string
}
function fun():viod{
	/*
	 * viod 	用来表示空
	 * 没有返回值,写return报错
	 * 可以返回null,undefined
	 */
}
function fun2():never{
	throw new Error('报错了!')
	//never 表示永远不会返回结果,会报错
}
let d:(a:number,b:number)=>number;
//希望d是函数,a,b是number,返回类型number

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript声明组件类型,通常有两种方式。 ### 1. 使用 interface 声明组件类型 使用 `interface` 可以定义一个接口来描述组件的 props、data、methods 等属性。 ```typescript interface MyComponent { props: { name: string; age: number; }; data: () => { count: number; }; methods: { handleClick: (event: MouseEvent) => void; }; } ``` 上述代码中,我们使用 `interface` 定义了一个名为 `MyComponent` 的接口,它包含 `props`、`data` 和 `methods` 三个属性。其中,`props` 属性是一个对象,包含 `name` 和 `age` 两个属性;`data` 属性是一个函数,返回一个包含 `count` 属性的对象;`methods` 属性是一个对象,包含一个名为 `handleClick` 的方法,它的参数是一个 MouseEvent 类型的事件对象,返回值为 void。 ### 2. 使用 Vue.extend() 声明组件类型 除了使用 `interface`,还可以使用 Vue.js 提供的 `Vue.extend()` 方法来声明组件类型。 ```typescript import Vue from 'vue'; const MyComponent = Vue.extend({ props: { name: String, age: Number }, data() { return { count: 0 }; }, methods: { handleClick(event: MouseEvent) { // do something } } }); ``` 上述代码中,我们使用 Vue.extend() 方法定义了一个名为 `MyComponent` 的组件类型,它包含 `props`、`data` 和 `methods` 三个属性。其中,`props` 属性是一个对象,包含 `name` 和 `age` 两个属性;`data` 属性是一个函数,返回一个包含 `count` 属性的对象;`methods` 属性是一个对象,包含一个名为 `handleClick` 的方法,它的参数是一个 MouseEvent 类型的事件对象。 使用 `Vue.extend()` 定义组件类型时,需要先导入 Vue.js,并使用 `Vue.extend()` 方法来创建一个包含组件属性的对象,然后可以将该对象传递给 `Vue.component()` 方法来注册组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值