ts学习-数据类型（一）

博主： xiaoxiao
发布时间：2022 年 06 月 10 日
2431 次浏览
2 条评论
3563字数
分类：笔记 typescript JavaScript 前端

# ts学习-数据类型（一）

## 类型注解和类型推导

>  什么是类型注解?

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

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

```js
let username: string = 'xxhzm'
```

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

```js
type TypeStu = {
    nikename: string
    age: number
}
```

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

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

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

```js
let stuObj2: TypeStu = {
    nikename: 'xxhzm',
    age: 16,
    phone: '110',
}

```

+ 不能将类型“{ nikename: string; age: number; phone: string; }”分配给类型“TypeStu”。

+ 对象文字可以只指定已知属性，并且“phone”不在类型“TypeStu”中。

> 什么是类型推导？

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

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

```js
let count = 3
```

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

```js
count = 'abc'
```

+ 不能将类型“string”分配给类型“number”。

## any 和 unknown 的区别

>  any

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

```js
let price: any = 199
price = '599'
```

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

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

console.log(stuObj3.nikename)

stuObj3.phone = '110'

```

> unknown

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

```js
let count2: unknown = 3
```

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

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

console.log(stuObj4.nikename)
```

+ 对象的类型为 "unknown"。

+ 相同点
  + 都是其他类型的父类

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

##  string 和 String 的区别

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

## bigint

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

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

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

此时我们需要使用 BigInt

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

console.log(One2 === Tow2)

// false
```

## 元组

> 什么是元组?

+ 定义时的元素的类型确定，但各个元素的类型不必相同
+ 为元素赋值时，该值必须是当前位置的类型

```js
let a: [string, number] = ['王五', 100]
let b: [string, number] = ['李四', 200]
```

也可以定义成

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

##  接口

>  接口是什么?

+ 接口是为一系列同类对象或同类别的类提供属性定义和方法声明，但没有任何赋值的实现的数据类型

```js
interface User {
	name: string
	age: number
}

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

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

```

### 接口的可选属性

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

```js
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 属性
```

```js
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' })

```

## 联合类型

> 可以接收一个或者多个不同类型的数据

```js
let nikename: string | number = 'xxhzm'
```

使用 type 定义联合类型

```js
type TypeBase = string | number | symbol

let data1: TypeBase = '123'
let data2: TypeBase = 123
let data3: TypeBase = Symbol()

```

猜你想看每日一学：PHP 中的array_key_exists函数详解宝塔反向代理，自建CDN节点每日一学：PHP 中的array_intersect_assoc函数详解每日一学：PHP 中的array_intersect_uassoc函数详解 JavaScript声明变量var let const的区别 react学习-组件和事件绑定（三）每日一学：PHP 中的array_uintersect_uassoc函数详解每日一学：PHP 中的 `array_uintersect` 函数详解酷番云云服务器优惠活动全解析：2025年超值上云特惠方案每日一学：PHP 中的array_shift函数详解

最后修改：2022 年 06 月 10 日

如果觉得我的文章对你有用，请随意赞赏

2 条评论

嘻嘻
June 23rd, 2022 at 01:48 am

|´・ω・)ノ

回复
嘻嘻
June 22nd, 2022 at 10:59 am

sdadasd

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

骄傲的人士
滴！学生卡！打卡时间：00:04:02，请上车的乘客系好安全带~
xinyu.he
学习一下
382813125
滴！学生卡！打卡时间：15:00:42，请上车的乘客系好安全带~
云云星羽
哈哈不用了，又换回com了
cfanlane
3Q,,,问题已经解决,，原来是要把版本号的数字去掉，只留Fo...

ts学习-数据类型（一）

xiaoxiao • 2022 年 06 月 10 日

# ts学习-数据类型（一）

## 类型注解和类型推导

>  什么是类型注解?

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

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

```js
let username: string = 'xxhzm'
```

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

```js
type TypeStu = {
    nikename: string
    age: number
}
```

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

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

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

```js
let stuObj2: TypeStu = {
    nikename: 'xxhzm',
    age: 16,
    phone: '110',
}

```

+ 不能将类型“{ nikename: string; age: number; phone: string; }”分配给类型“TypeStu”。

+ 对象文字可以只指定已知属性，并且“phone”不在类型“TypeStu”中。

> 什么是类型推导？

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

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

```js
let count = 3
```

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

```js
count = 'abc'
```

+ 不能将类型“string”分配给类型“number”。

## any 和 unknown 的区别

>  any

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

```js
let price: any = 199
price = '599'
```

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

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

console.log(stuObj3.nikename)

stuObj3.phone = '110'

```

> unknown

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

```js
let count2: unknown = 3
```

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

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

console.log(stuObj4.nikename)
```

+ 对象的类型为 "unknown"。

+ 相同点
  + 都是其他类型的父类

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

##  string 和 String 的区别

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

## bigint

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

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

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

此时我们需要使用 BigInt

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

console.log(One2 === Tow2)

// false
```

## 元组

> 什么是元组?

+ 定义时的元素的类型确定，但各个元素的类型不必相同
+ 为元素赋值时，该值必须是当前位置的类型

```js
let a: [string, number] = ['王五', 100]
let b: [string, number] = ['李四', 200]
```

也可以定义成

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

##  接口

>  接口是什么?

+ 接口是为一系列同类对象或同类别的类提供属性定义和方法声明，但没有任何赋值的实现的数据类型

```js
interface User {
	name: string
	age: number
}

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

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

```

### 接口的可选属性

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

```js
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 属性
```

```js
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)
}

```

## 联合类型

> 可以接收一个或者多个不同类型的数据

```js
let nikename: string | number = 'xxhzm'
```

使用 type 定义联合类型

```js
type TypeBase = string | number | symbol

let data1: TypeBase = '123'
let data2: TypeBase = 123
let data3: TypeBase = Symbol()

```

ts学习-数据类型（一）

2 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho更换字体插件FontLibs

给网站更换HarmonySanc字体

主流博客系统搭建（WordPress、Typecho） - 保姆级教学

handsome美化-持续更新

cdn.xxhzm.cn 免费的静态资源加速

每日一学：PHP 中的array_filter函数详解

关于WordPress的内存溢出导致数据库无法处理

kgm格式转换为mp3

Vue学习小案例

每日一学：PHP 中的array_search函数详解

ts学习-数据类型（一）

2 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

ts学习-数据类型（一）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款