TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇

TypeScript 从入门到进阶系列

1. TypeScript 从入门到进阶之基础篇(一) ts基础类型篇

---

---

前言

在上一章我们学习了在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 从入门到进阶系列的文章 将会在今年快速更新，敬请期待 。
博主微信：