TypeScript的类型声明

一.基础类型

1.1 any任意类型

声明为 any 的变量可以赋予任意类型的值。

let msg:any;

msg = "我是字符串";

console.log(msg);

1.2 number数字类型

双精度 64 位浮点值。它可以用来表示整数和分数。

let age:number;

let amount:number;

age = 19;

amount = 89.5;

1.3 string字符串类型

字符串类型,用单引号、双引号、模板字符串(反引号)定义的文本。

let msg:string;

msg = "我是:张三" + "年龄:19";

let msg1:string;

msg1 = `我是张三,年龄:19`;

1.4 boolean布尔类型

表示逻辑值:true 和 false。

let flag:boolean;

flag = true;

1.5 数组类型

·在类型后面加[ ]

let ages:number[ ];

ages = [1,2,3];

console.log(ages);

·使用范类型Array。

let ages:Array<any>;

ages = [1,"2","3"];

console.log(ages);

1.6 元组类型

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

let zs:[string,number];

zs  = ["张三",10];//true

zs  = ["张三","10"];//false

1.7 enum枚举类型

枚举类型用于定义数值集合。

enum days{Sun=10, Mon, Tue, Wed, Thu, Fri, Sat}

console.log(days.Sun);//10

console.log(days.Mon);//11

console.log(days.Tue);//12

总结:

数字枚举如果没有初始化,默认初始化值为0,每项+1

如果有初始化,则在初始化值的基础上,每项+1

如果某项被赋值(可以是负数或负数),那么之后的项在此基础上+1

如果未手动赋值的枚举项与手动赋值的重复了,如例4,TypeScript 是不会察觉到这一点的,但建议尽量避免

1.8 void无任何类型

用于标识方法返回值的类型,表示该方法没有返回值。

声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null;

声明一个方法,没有返回值:

function hello(): void {

    alert("Hello Runoob");

}

1.9 null类型

对象值缺失。

1.10 undefined类型

初始化变量未定义的值。

1.11 never类型

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

比如函数抛出一个异常:

function hello(str:string):never{

    throw new Error(str);

}

1.10 unknown类型(类型断言)

var str:unknown;//未知类型

str = "123";

str = 123;

var str1:string;

str1 = str;//error

总结:

unknown未知类型 自己可以赋值任意类型,但是不可以赋值给别人.

类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。

str1 = str as string;//第一种方式 正确 告诉编辑器str就是字符串

Str1 = <string> str;//第二种方式

1.11 函数类型

也就是指定参数的类型和返回值的类型

function demo(a:number,b:number):number{

    return a+b;

}

demo(1,2);

1.12 对象类型

1)常规写法

let a:object;

a = {realname:"张三"}

2)

let P1:{realname:string,age:number}//定义类型

P1 = {realname:"张三",age:19} //赋值需要上面定义保持一致

3)

let P1:{realname:string,age?:number}//加一个问号,age属性可加可不加

P1 = {realname:"张三"}

4)

let P1:{realname:string,[propName:string]:any} //属性名不确定时,定义 propName

随便定义,any是类型

P1 = {realname:"张三",age:19}

5)箭头函数设置函数结构

let a:(a:number,b:number)=>number;

a = function(a:number,b:number):number{

    return a+b;

}

6)let a:{name:string}&{age:number}; //与并且的意思

a = {name:"ss",age:19};

1.13 类型的别名

用type设置类型别名

type mytype = string;//类型别名

let a:mytype;

let b:mytype

type mytype1 = 1 |2 |3;

let aa:mytype1;

let bb:mytype1;

二.变量声明

2.1 命名规则

var [变量名] : [类型] = 值;

例:let str:string = "hello";

1)变量名称可以包含数字和字母。

2)除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。

3)变量名不能以数字开头。

4) 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

2.2 声明未设置

var [变量名] : [类型];

声明变量的类型,但没有初始值,变量值会设置为 undefined;

2.3 声明未设置类型

var [变量名] = 值;

声明变量并初始值,但不设置类型,该变量可以是任意类型:

2.4 字面量声明

1)let aa:100;//aa就只能是10

2)let flag:"true" | "false";//是字符串类型true或者是false

let flag1:boolean | string;//可以是布尔类型或者字符串类型

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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()` 方法来注册组件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值