一起来看看ts中的类型

神秘人一号
192 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

今天我们一起来快速的了解TS中的类型吧！

TS的类型

常用基础类型

将 TS 中的常用基础类型分为两类

  1. JS 已有类型

    1. 原始类型：number/string/boolean/null/undefined/symbol
    2. 对象类型：object（包括，数组、对象、函数等对象）

  2. TS 新增类型

    1. 联合类型
    2. 自定义类型(类型别名)
    3. 接口
    4. 元组
    5. 字面量类型
    6. 枚举
    7. void
    8. any
    9. unkown
    10. 等

注意：

  1. 原始类型在 TS 和 JS 中写法一致
  2. 对象类型在 TS 中更加细化，每个具体的对象（比如: 数组、对象、函数...）都有自己的类型语法

原始类型

原始类型

number/string/boolean/null/undefined/symbol

  • 特点：简单，这些类型，完全按照 JS 中类型的名称来书写
// 数值类型
let age: number = 18
​
// 字符串类型
let myName: string = '小花'
​
// 布尔类型
let isLoading: boolean = false
​
// undefined
let un: undefined = undefined
​
// null
let timer:null = null
​
// symbol
let uniKey:symbol = Symbol()
​

数组类型

两种写法

格式

let 变量: 类型[] = [值1，...]
​
let 变量: Array<类型> = [值1，...]

基本示例

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字
​
// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

函数的类型

函数涉及的类型实际上指的是：函数参数和返回值的类型

格式

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }
​
// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }

对象类型

格式

方法有两种写法：普通函数和箭头函数。

const 对象名: {
  属性名1：类型1，
  属性名2：类型2，
  方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
  方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
} = { 属性名1: 值1，属性名2：值2  }

可选属性用 ?

const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }  

示例

const goodItem:{name: string, price: number, func: ()=>string }  = {
    name: '手机', 
    price: 2000, 
    func:function(){ return '打电话' }
}

说明:

  1. 使用 {} 来描述对象结构
  2. 属性采用属性名: 类型的形式，如果是多行，可以省略,
  3. 方法采用方法名(): 返回值类型的形式
  4. 可选使用 ?

接口

场景

当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的：

  1. 类型别名，type
  2. 接口，interface

格式

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}

接口和类型的区别

interface（接口）和 type（类型别名）的对比：

  • 相同点：都可以给对象指定类型

  • 不同点:

    • 接口，只能为对象指定类型。它可以继承。
    • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

推荐：能使用 type 就用 type

// 接口的写法-------------
interface IPerson {
    name: string,
    age: number
}
​
const user1：IPerson = {
    name: 'a',
    age: 20
}
​
// type的写法-------------
type Person  = {
    name: string,
    age: number
}
const user2：Person = {
    name: 'b',
    age: 20
}

元组

问题1

问：如何定义数据类型来记录 经纬度(记录鼠标的位置)坐标 信息？

答：

  • 选择1，用对象。
  • 选择2：用数组。
type Position1 = { dimension: number, longitude: number }
type Position2 = number[]
​
let p1:Position  = {dimension:116.2317, longitude: 39.5427}
let p2 Position2 = [116.2317, 39.5427]

问题2

使用 number[ ] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。

元组 Tuple

元组是一种特殊的数组。有两点特殊之处

  1. 它约定了的元素个数
  2. 它约定了特定索引对应的数据类型

示例

let position: [number, number] = [39.5427, 116.2317]

解释：

  1. 该示例中：有两个元素，每个元素的类型都是 number

元组的实际应用-约定useState的返回值类型

模拟定义useState。

useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。

function useState(n: number): [number, (number)=>void] {
        const setN = (n1) => {
            n = n1
        }
        return [n, setN]
    }
​
const [num ,setNum] = useState(10)

小结

元组是一种特殊的[ ]。有两点特殊之处

  1. 它约定了数组元素的[ ]
  2. 它约定了每个数组元素的[ ]
  3. react的 [ ] 函数的返回值就是一个元组

枚举

定义

枚举（enum）的功能类似于字面量类型+联合类型组合的功能，来描述一个值，该值只能是 一组命名常量 中的一个。

ts中没有type之前，用枚举比较多，现在用的少了

格式

定义格式

enum 枚举名 { 可取值1, 可取值2,.. }

说明：

  1. 使用 enum 关键字定义枚举
  2. 一般约定首字符大写

使用格式

枚举名.可取值

示例

// 定义枚举类型
enum Direction { Up, Down, Left, Right }
​
// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}
​
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

解释:

  1. 约定枚举名称以大写字母开头
  2. 枚举中的多个值之间通过 ,（逗号）分隔
  3. 定义好枚举后，直接使用枚举名称作为类型注解
avatar
文章
阅读
粉丝