TS入门!(02)

接上篇

数组类型注解

注解数组有什么用

变量被注解为数组类型之后，有两点好处：

1. 不仅可以限制变量类型为数组而且可以限制数组成员的类型
2. 编码时不仅可以提示数组的属性和方法而且可以提示成员的属性和方法

如何注解数组类型

使用数据类型对变量进行类型注解有两种语法

语法一:

let arr
: number[] 
= [1,2,3]

这段代码表示arr只能是一个数组,并且数组的元素必须是number类型

语法二: 泛型

let arr:Array<number> = [1,2,3]

小结

1. 数组类型注解注解之后除了限制数组类型还限制了什么？

对数组中每一个成员的类型有限制.

2. 实际开发时常用的是哪种数组注解方式？

：类型[]

联合类型

需求

数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?

let arr: (number | string)[] = [1, 'a', 3, 'b']

联合类型

概念：将多个类型合并为一个类型对变量进行注解

解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种,(注意:这是TS的语法只有一根|, 不要与JS中的逻辑或|| 混淆)

类型别名-type

目标

掌握类型别名的用法，能给类型起别名

const arr1:(number | string)[] = [1, '1'] 
const arr2:(number | string)[] = ['a', 'b'] 
//这两句代码中有重复部分,这个时候我们就要思考如何简代码

类型别名

定义： type 别名 = 类型
别名可以是任意的合法字符串，一般首字母大写

例子： type MyArr = (number | string) []

作用：给类型起别名 ---> 定义了新类型

type MyArr = (number | string) [] 
const arr1:MyArr = [1, '1'] 
const arr2:MyArr = ['a', 'b'] 

注意:取的别名有个不成文的要求,首字母大写

函数类型

1. 基础使用

概念：函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束

function add(a: number, b: number): number {
    return a + b
}

说明：

1. 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
2. 函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求

好处：

1. 避免因为参数不对导致的函数内部逻辑错误
2. 对函数起到说明的作用

2. 函数表达式

函数表达式的类型注解有两种方式：

参数和返回值分开注解

const add = (a: number, b: number): number => {
    return a + b
}

1. 函数整体注解

type AddFn = (a: number, b: number) => number
const add: AddFn  = (a, b) => {
    return a + b
}

函数可选参数

概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

 lastName参数表示可选参数，可传可不传，一旦传递实参必须保证类型为string类型

函数无返回值 - void

概念：JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

注意事项：

1. 在JS中如果没有返回值，默认返回的是undefined
2. 在TS中 void和undefined不是一回事：
   1. undefined在TS中是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型
   2. void表示没有返回值

interface-接口-基本使用

作用

作用: 用interface来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

 一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

使用场景：在常规业务开发中比较典型的就是前后端数据通信的场景

前端使用后端数据：渲染后端对象数组列表时的智能提示

interface接口的可选设置和继承

场景

对象的某个属性是可选的。

例如：从后端取回的商品数据中，一定有id，name, price，但是imgUrl是可选的。表示有些商品没有配图片。

const goodList = [
  {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
  {id:1, name: '毛巾', price: 9}
]

如果我们用接口约定了goodList 的格式,那么上面的代码就会报错了

interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl: string;
} 
const goodList: goodItem[] = [
    {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
    {id:1, name: '毛巾', price: 9}    // 这里会报错
  ]

可选设置

概念: 通过 ？对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求。

interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl?: string; // 可选的
} 
const goodList: goodItem[] = [
    {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
    {id:1, name: '毛巾', price: 9}    // 这里也是正确的
]

接口的继承

概念：接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承,实现类型复用。

// 正常的商品
interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl?: string;
} 

// 打折的商品：正常商品 + newPrice + effectDate
interface  goodItemDiscount {
    id: number;
    name: string;
    price: number;
    imgUrl?: string;
    newPrice: number;
    effectDate: Date 
} 

使用继承

interface  goodItemDiscount extends goodItem {
    newPrice: number;
    effectDate: Date
} 

改天再写type注解对象类型