TypeScript 从入门到进阶系列
- TypeScript 从入门到进阶之基础篇(一) ts基础类型篇
文章目录
- TypeScript 从入门到进阶系列
- 前言
- 一、object 类型
- 1、基础运用
- 2、可选属性
- 3、任意属性
- 4、只读属性 readonly
- 5、对象中的函数
- 二、数组类型
- 1、数组的运用
- 2、使用接口定义数组
- 3、arguments类数组
- 4、对象数组
前言
在上一章我们学习了在TypeScript 中如何使用、定义基础类型，本章我们将对TypeScript 中的 对象 、数组类型进行学习 ，在本章的学习中 你将了解到在TypeScript 使用引用类型与在 JavaScript 使用引用类型的区别及对应TypeScript 的知识
一、object 类型
object 类型相信学过JavaScript 的都了解 , 他是属于引用数据类型，在JavaScript 中的写法如下， 但是在TypeScript 中 我们定义对象的方式要用关键字interface（接口），其作用就是约束对象中的变量要满足其条件，同时 用接口定义对象，在我们使用到此对象的时候，在vscode中会有提示 可以开发时方便一些，以及如果我们在使用对象时如果定义了对象中不存在的属性 将会智能的提示出错误
1、基础运用
//JavaScript 的写法
const obj={
a:1,
b:'2',
}
//TypeScript 的写法
//首先我们要定义接口
//注意 我们在定义接口时 必须与对象中的属性一一对应 不能多一个属性也不能少一个属性 且数据的类型要对应
interface Obj {
a:number
b:string
}
const obj:Obj={
a:1,
b:'2',
}
注意 我们在定义接口时 必须与对象中的属性一一对应 不能多一个属性也不能少一个属性 且数据的类型要对应。例如下面的
错误例子1 ：我们在接口定义时 有a b c 3个属性 但是在obj对象中 只有a b 两个属性，这样则不满足一一对应的原则，将会报错
//例子1 将会报错
interface Obj {
a:number
b:string
c:string
}
const obj:Obj={
a:1,
b:'2',
}
错误例子2 ：在此例子中我们的Obj接口和obj对象都是两个属性一一对应,看起来像没问题是吧。但是在接口的属性中 a属性我们定义为string类型， 但是我们在使用是 obj的a属性 是number类型 1 ，学过第一章的应该了解数据类型不一致的话赋值会报错 使用在此例子中也是会报错的。
//例子2 将会报错
interface Obj {
a:string
b:string
}
const obj:Obj={
a:1,
b:'2',
}
2、可选属性
在前面的例子我们了解了如何在TypeScript中使用对象类型，在上面的错误例子1中我们定义的接口有3个属性 但是obj中只有两个属性，所以会报错。那么你有没有想过 能不能在接口中定义多一些属性 这些属性我不一定用到 但是我用到的时候之前定义好了可以直接用。那么就涉及到了对象中的可选属性 。
对象中的可选属性的含义是该属性可以不存在，可以看下面的例子obj2中的 c 可以存在 也可以不存在，因为我们在接口定义时在c属性前面加了个 ? 代表这个属性可以不存在
//将会报错
interface Obj {
a:number
b:string
c:string
}
const obj:Obj={
a:1,
b:'2',
}
//正确
//对象中的可选属性
interface Obj2 {
a:number
b:string
c?:string
}
const obj2:Obj2={
a:1,
b:'2',
}
//如果想用到c属性时 可以这样使用
//注意 我们在上面定义的c是string类型 所以只能赋值字符串的数据
obj2.c='哈哈我可以用的'
3、任意属性
大家了解了前面的知识之后会不会觉得 定义接口很麻烦。接下来我们将使用任意属性 来简化我们的接口定义流程。
注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集，也就是说 如果我们定义了对象中的属性是string 类型 ，那么就只能是string 类型
对象中的任意属性的定义：[propName: string]:string
propName 这个可以自己命名
第一个string 代表对象的key
最后面的string 代表对象的属性类型
//在下面的例子中 我们没有定义 a b ww d但是不会出现报错
//因为我们在 Obj中定义了所有的对象属性都是string 类型
interface Obj {
[propName: string]:string
}
//正确使用
const obj:Obj={
a:'1',
b:'2',
ww:'4',
}
//错误使用 因为Obj中的属性都定义是string类型 所以a 的属性是number类型的1则会报错
const obj:Obj={
a:1,
b:'2',
ww:'4',
}
4、只读属性 readonly
接下来的TypeScript 对象中的只读属性 readonly ，只读属性 顾名思义 如果我们使用了readonly 代表只能读取 不能对其进行改变例如下面的例子
//
interface Obj {
a:string
readonly b:string
}
const obj:Obj={
a:'666',
b:'我是不能改变的 只能读'
}
//如果这样赋值将会报错 因为b是只读属性 不可改变
obj.b='我就想改变'
5、对象中的函数
在TypeScript 中 我们也能在对象中使用属性的 只需要在接口时进行定义 如下：
具体的函数定义及使用我将在下章进行详情讲解
interface Obj {
a:string
submit:()=>void
}
const obj:Obj={
a:'666',
submit:()=>{
console.log('函数的定义')
}
}
obj.submit()
二、数组类型
在JavaScript 中 数组也是引用类型的一种，在TypeScript 中 我们可以通过多种方式来定义数组的类型。 例如：类型[]、泛型数组、接口定义数组等等。
1、数组的运用
在TypeScript 中 使用数组的时候需要进行定义，我们可以通过 数组名:类型[] 来定义数组，也可以通过数组的泛型来定义 例如： Array<类型> ，详情请看下面例子
// 数组名:类型[] 的用法
let arr:string[]=['前','端','枫']
//注意 当我们指定了类型之后 如果输入的数组类型与我们定义的不一样 将会报错
//例如下面的错误例子
arr.push(1)//报错 不能在string[]类型的数组中 添加number类型
//数组泛型 其实与上面的意思是一样的 只是写法不同
let arr2:Array<number>=[1,2,3]
2、使用接口定义数组
在TypeScript 中 我们也可以通过接口来定义数组 ，用法与对象定义中的任意属性差不多，其实就是定义一个接口中 key为numbr类型 定义数组下标 value为我们的数组类型
注意： 我们在使用接口定义数组时 [index: number]必须为number 类型
interface TsArray{
[index: number]: number;
}
//注意 我们在使用接口定义数组时 [index: number]必须为number 类型
let arr:TsArray=[1,2,3]
3、arguments类数组
在 JavaScript 我们有时候会在函数中的参数使用到arguments，那么我们该如何在TypeScript 去使用和定义arguments呢？ 其实 TypeScript 已经帮我们内置好了arguments 的类型 IArguments，具体用法如下
const arrFunction =(...args:any)=>{
//内置对象 IArguments
let arr:IArguments = arguments
}
4、对象数组
学完了前面的一维数组的使用，接下来 我们来学习一下，项目中经常用到的对象数组的定义。其实 对象数组就是前面知识的汇总 因为会涉及对象和数组
//要在TypeScript中使用对象数组 首先我们要为对象定义一个接口 如下
interface ObjMap{
id:string
label:string
}
//接着我们定义对象数组
//这里数组的每一项都是一个对象 所以每一项的类型都是ObjMap
const objList:ObjMap[]=[{id:'1',label:'我是第一项'}]
//当然 你可以结合前面学的内容 来进行扩展
//例如定义可不存在的属性
//多层对象数组
interface ObjMap2{
id:string
label:string
children?:ObjMap2[]
}
const objList2:ObjMap2[]=[{id:'1',label:'我是第一项',children:[{id:'2',label:'我是它儿子'}]}]
最后 TypeScript 从入门到进阶系列的文章 将会在今年快速更新，敬请期待 。
博主微信：
