typeScript复杂数据类型--任意类型、类型推论、联合类型、对象的类型(接口)、数组的类型、函数的类型
目录
1.任意值
什么是任意值类型
未声明类型的变量
2.类型推论
3. 联合类型
访问联合类型的属性或方法
4.对象的类型——接口
什么是接口
可选属性
任意属性
只读属性
1.任意值
任意值(Any)用来表示允许赋值为任意类型。
什么是任意值类型
如果是一个普通类型,在赋值过程中改变类型是不被允许的:
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
但如果是 any
类型,则允许被赋值为任意类型。
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
任意值的属性和方法
在任意值上访问任何属性都是允许的:
let anyThing: any = 'hello';
可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。
未声明类型的变量
变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:
let something;
something = 'seven';
something = 7;
2.类型推论
如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
什么是类型推论
以下代码虽然没有指定类型,但是会在编译的时候报错:(最先你给它赋值为字符串类型的数据,它默认是字符串类型,再给它赋数值类型的,就会报错,这就是类型推论)
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any
类型而完全不被类型检查:
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
3. 联合类型
联合类型(Union Types)表示取值可以为多种类型中的一种。
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
联合类型使用 |
分隔每个类型。
这里的 let myFavoriteNumber: string | number
的含义是,允许 myFavoriteNumber
的类型是 string
或者 number
,但是不能是其他类型。
访问联合类型的属性或方法
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法:
function getLength(something: string | number): number {return something.length;
}// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.
上例中,length
不是 string
和 number
的共有属性,所以会报错。
访问 string
和 number
的共有属性是没问题的:
function getString(something: string | number): string {return something.toString();
}
联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.
上例中,第二行的 myFavoriteNumber
被推断成了 string
,访问它的 length
属性不会报错。
而第四行的 myFavoriteNumber
被推断成了 number
,访问它的 length
属性时就报错了。
4.对象的类型——接口
在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。
什么是接口
在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。
TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
interface Person {name: string;age: number;
}let tom: Person = {name: 'Tom',age: 25
};
上面的例子中,我们定义了一个接口 Person
,接着定义了一个变量 tom
,它的类型是 Person
。这样,我们就约束了 tom
的形状必须和接口 Person
一致。
接口一般首字母大写。
定义的变量比接口少了一些属性是不允许的,多一些属性也是不允许的;可见,赋值的时候,变量的形状必须和接口的形状保持一致。
可选属性
有时我们希望不要完全匹配一个形状,那么可以用可选属性:
interface Person {name: string;// 添加 ? 表示该属性可选,不添加该属性也不会报错age?: number;
}let tom: Person = {name: 'Tom'
};
可选属性的含义是该属性可以不存在。
任意属性
有时候我们希望一个接口允许有任意的属性,可以使用如下方式:
interface Person {name: string;age?: number;[propName: string]: any;
}let tom: Person = {name: 'Tom',gender: 'male'
};let tom: Person = {name: 'Tom',gender: 'male',gender1: 'sdsd'
}
使用 [propName: string]
定义了任意属性取 string
类型的值,可以写多个任意的属性。
需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:
interface Person {name: string;age?: number;[propName: string]: string;
}let tom: Person = {name: 'Tom',age: 25,gender: 'male'
};
一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型:
interface Person {name: string;age?: number;[propName: string]: string | number;
}let tom: Person = {name: 'Tom',age: 25,gender: 'male'
};
只读属性
有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly
定义只读属性:
interface Person {readonly id: number;name: string;age?: number;[propName: string]: any;
}let tom: Person = {id: 89757,name: 'Tom',gender: 'male'
};tom.id = 9527;// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
上例中,使用 readonly
定义的属性 id
初始化后,又被赋值了,所以报错了。
注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候:
interface Person {readonly id: number;name: string;age?: number;[propName: string]: any;
}let tom: Person = {name: 'Tom',gender: 'male'
};tom.id = 89757;
上例中,报错信息有两处,第一处是在对 tom
进行赋值的时候,没有给 id
赋值。
第二处是在给 tom.id
赋值的时候,由于它是只读属性,所以报错了。
typeScript复杂数据类型--任意类型、类型推论、联合类型、对象的类型(接口)、数组的类型、函数的类型相关推荐
- TypeScript学习(三):联合类型及推论
前面说到了typescript中的数据类型的定义及类型推论,定义的方式也就是单数据类型定义或者是任意类型的定义,但是我们在开发中,有时候会涉及到一些变量的值类型校验,例如只需要数值和字符串,或者数值和 ...
- TypeScript学习(二):任意类型及推论
上文我们提到typescript(以下统称为"TS")中原始数据类型的一些声明方式,不难看出,TS中的数据定义方式跟JS是大同小异的,但是在JS中,我们常常会声明一个变量,如: v ...
- typescript 数据类型、函数返回值、类型断言、联合类型、类型兼容
null和undefined类型:是所有类型的子类型,即可以将任意类型赋值为二者any类型:可以赋值任何类型unknown类型:引入的顶级类型unknown,对照于any,unknown是类型安全的, ...
- typescript索引类型_复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取-阿里云开发者社区...
前言:在编写 typescript 应用的时候,有时候我们会希望复用或者构造一些特定结构的类型,这些类型只从 typescript 靠内建类型和 interface.class 比较难以表达,这时候我 ...
- TypeScript 基础数据类型与接口
一.数据类型 1.基础数据类型 (1)数值类型 let num: number; num = 100 console.log(num); (2)布尔类型 let flag: boolean;flag ...
- MySql基础篇---003 SQL之DDL、DML、DCL使用篇:创建和管理表 ,数据处理之增删改,MySQL数据类型精讲 ,约束:联合主键
第10章_创建和管理表 讲师:尚硅谷-宋红康(江湖人称:康师傅) 官网:http://www.atguigu.com 1. 基础知识 1.1 一条数据存储的过程 存储数据是处理数据的第一步.只有正确地 ...
- typescript (一) 数据类型之 基础数据类型
(一)Typescript 概述 Typescript 是 Javascript 的超集,Javascript 有的 Typescript 都有,Typescript 包含 Javascript Ty ...
- ♥走进TypeScript的数据类型♥
前言:无论在学习什么语言的时候,我们都需要明白其该怎么样去定义一个变量或者Function,那么今天我们来看看TypeScript的数据类型. 文章目录: 一.Ts与Js的区别 二.Ts的数据类型 三 ...
- Python中的函数参数类型
1.参数命名规则经验:绝大多数函数接收一定数量的参数,然后根据实际调用时提供的参数的值的不同,输出不同的结果.前面我们说过,将函数内部的参数名字,定义得和外部变量的名字一样是一种不好的习惯,它容易混淆 ...
最新文章
- 简论重大科学发现诞生的时机
- 【知识小课堂】mongodb 之 特殊集合及索引
- bootcmd和bootargs
- python pptp链接_pptp-client连接设置
- [SQL]查询及删除重复记录的SQL语句
- 零基础学sql要多久_零基础小白如何迈出学习SQL的第一步?文科生学SQL的心得
- jQuery插件定义
- windows共享关闭密码保护是灰色的
- mysql 多个网卡_seriver -- 多个网卡只能认到一个网卡的解决方法
- svg写入/识别html元素和css样式
- 解析分级存储管理(HSM)
- 柯美6501服务器系统,柯美6501维修手册全-(1).pdf
- Linux下的编曲软件,在Linux下可用Wine运行编曲软件FL Studio,也可用LMMS替代
- 智能语言处理之依存树计算句子结构相似度计算
- IETester必备浏览器测试工具
- 基于ESP32测温湿度上传到OneNET并通过微信小程序控制,查看,下发指令
- Windbg串口联调
- WordPress初学者入门教程-WordPress的设置
- django中request对象的属性和方法
- Spring Data Commons 官方文档学习
热门文章
- Web服务器Nginx 1.22.0 下载、启动及关闭(Win10)
- java servlet的生命周期_Java Servlet系列之Servlet生命周期
- 带孩子们做环球旅行的读后感_为什么要带孩子们去学乐高课程?
- Linux之Xshell5连接远程服务器
- (第十三周)Final阶段用户调查报告
- 正向有功正向无功_老王说表之--电表的正向有功和反向无功是怎么回事?
- USB芯片完成的工作。
- 通过镜像反推Dockerfile命令
- Excel表格如何加密?如何撤销加密?
- 联想小新air15和thinkbook15有什么区别 哪个好详细性能配置对比