ts学习-数据类型(一)

类型注解和类型推导

什么是类型注解?

比如我们定义一个变量,我们需要指定这个变量的类型,这就叫类型注解

如果后面需要修改了这个值的类型,那么就会出错

let username: string = 'xxhzm'

我们可以使用 type 来提交定义各种类型

type TypeStu = {
    nikename: string
    age: number
}

这时我们可以用这种类型来定义一个学生对象

let stuObj: TypeStu = {
    nikename: 'xxhzm',
    age: 16,
}

如果我们此时向学生对象中新增了一个 phone 那么就会进行报错

let stuObj2: TypeStu = {
    nikename: 'xxhzm',
    age: 16,
    phone: '110',
}
  • 不能将类型“{ nikename: string; age: number; phone: string; }”分配给类型“TypeStu”。
  • 对象文字可以只指定已知属性,并且“phone”不在类型“TypeStu”中。
什么是类型推导?

此时我们定义了一个 count 给了它一个数字

他会自动推导出来左边这个变量的类型为 number

let count = 3

如果我们再给一个其他类型的数据,就会报错

count = 'abc'
  • 不能将类型“string”分配给类型“number”。

any 和 unknown 的区别

any

any 可以作为任何数据类型的父类存在,也可以作为任何数据类型的子类存在

let price: any = 199
price = '599'

any 可以强制的读写存在或者不存在的属性

let stuObj3: any = {
     nikename: 'xxhzm',
     age: 16,
}

console.log(stuObj3.nikename)

stuObj3.phone = '110'
unknown

unknown 也可以接受任何数据类型的值

let count2: unknown = 3

unknown 不可以强制的读写存在或者不存在的属性

let stuObj4: unknown = {
    nikename: 'xxhzm',
    age: 16,
}

console.log(stuObj4.nikename)
  • 对象的类型为 "unknown"。
  • 相同点

    • 都是其他类型的父类
  • 不同点

    • unknown不是其他类型的子类
    • any 可以进行可以强制的读写存在或者不存在的属性但 unknown 不可以

string 和 String 的区别

  • String 属于 JavaScript 遗留下来的
  • string 是 typescript 特有的数据类型,单纯的表示一个字符串类型

bigint

const max = Number.MAX_SAFE_INTEGER
const One = max + 1
const Tow = max + 2

console.log(One === Tow)
// true

Number发生了溢出,此时计算已经不准确了

此时我们需要使用 BigInt

const max2 = BigInt(Number.MAX_SAFE_INTEGER)
const One2 = max2 + BigInt(1)
const Tow2 = max2 + BigInt(2)

console.log(One2 === Tow2)

// false

元组

什么是元组?
  • 定义时的元素的类型确定,但各个元素的类型不必相同
  • 为元素赋值时,该值必须是当前位置的类型
let a: [string, number] = ['王五', 100]
let b: [string, number] = ['李四', 200]

也可以定义成

type TypeC = [string, number]
let c: TypeC = ['赵六', 300]

接口

接口是什么?
  • 接口是为一系列同类对象或同类别的类提供属性定义和方法声明,但没有任何赋值的实现的数据类型
interface User {
    name: string
    age: number
}

function e(user: User) {
    console.log(user)
}

e({ name: 'xxhzm', age: 16 })

接口的可选属性

使用?将其变成可选属性(可填可不填)

interface Product {
    id: number
    name: string
    price: number
    count: number
    remarks?: string
}

function calToal(product: Product) {
    console.log('product', product)
}

calToal({ id: 1, name: '自行车', price: 1000, count: 10, remarks: '红色的' })
calToal({ id: 2, name: '电视', price: 500, count: 5 })

可索引属性

  [key: string]: any 表示可以添加一个或者多个或者零个 any 属性
  [key: number]: string 同理,添加 string 属性
interface Product2 {
    id: number
    name: string
    price: number
    count: number
    remarks?: string
    [key: string]: any
    [key: number]: string
}

function calToal2(product: Product2) {
    console.log('product', product)
}

calToal2({ id: 1, name: '自行车', price: 1000, count: 10, remarks: '红色的', status: 'off' })
calToal2({ id: 2, name: '电视', price: 500, count: 5, status: 'on' })
calToal2({ id: 2, name: '电视', price: 500, count: 5, 10: '1000' })

联合类型

可以接收一个或者多个不同类型的数据
let nikename: string | number = 'xxhzm'

使用 type 定义联合类型

type TypeBase = string | number | symbol

let data1: TypeBase = '123'
let data2: TypeBase = 123
let data3: TypeBase = Symbol()
最后修改:2022 年 06 月 10 日
如果觉得我的文章对你有用,请随意赞赏