【TypeScript】中定义变量方式 数据类型详解_typescript 定义变量(1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

文章目录

• • TypeScript定义变量
    • • 变量声明格式
        • 变量类型推导
    • JS和TS的数据类型
    • • TS中使用JS的数据类型
        • • 🍤number类型
            • 🍤boolean类型
            • 🍤string类型
            • 🍤Array类型
            • 🍤Object类型
            • 🍤Symbol类型
            • 🍤null和undefined类型
        • TS自身特有的数据类型
        • • 🍺any类型
            • 🍺unknown类型
            • 🍺void类型
            • 🍺never类型
            • 🍺tuple类型

TypeScript定义变量

变量声明格式

我在前面强调过，在TypeScript中定义变量需要指定 标识符 的类型。

所以完整的声明格式如下：

声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解；

var/let/const 标识符: 数据类型 = 赋值;

比如我们声明一个message，完整的写法如下：

注意：这里的string的首字母是小写的，和String是有区别的

string是TypeScript中定义的字符串类型， String是JavaScript的字符串包装类的类型

let message: string = "Hello World";

如果我们给message赋值其他类型的值，那么就会报错：

在TypeScript定义变量（标识符）和ES6之后一致，可以使用var、 let、 const来定义。

var name: string = "chenyq"
let age: number = 18
const height: number = 1.88

当然，在tslint中并不推荐使用var来声明变量：

可见，在TypeScript中并不建议再使用var关键字了，主要原因和ES6升级后let和var的区别是一样的， var是没 有块级作用域的，会引起很多的问题，这里不再展开探讨。

---

变量类型推导

在开发中，有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型，我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型：

如果我们给age赋值其他的类型：

这是因为在一个变量第一次赋值时，会将后面的赋值内容的类型，来作为前面标识符的类型, 这个过程称之为类型推导, 或者说类型推断：

上面的age就是因为后面赋值的是一个number类型，所以age虽然没有明确的说明是number类型，但是依然是一个number类型；

JS和TS的数据类型

我们经常说TypeScript是JavaScript的一个超集：

下面这幅图很好的表示出JavaScript、ECMAScript、TypeScript的关系

可以看出TypeScript是包含JavaScript的数据类型的

TS中使用JS的数据类型

---

🍤number类型

数字类型是我们开发中经常使用的类型， TypeScript和JavaScript一样，不区分整数类型（ int）和浮点型 （ double），统一为number类型。

let num: number = 100

num = 50
num = 0.5

如果你学习过ES6应该知道， ES6新增了二进制和八进制的表示方法，而TypeScript也是支持二进制、八进制、十 六进制的表示：

let num: number = 100

num = 50 // 十进制
num = 0b110 // 二进制
num = 0o555 // 八进制
num = 0xf23 // 十六进制

---

🍤boolean类型

boolean类型只有两个取值： true和false，非常简单

let flag: boolean = true

flag = false
flag = 30 > 10

---

🍤string类型

string类型是字符串类型，在TS中和JS一样可以使用单引号或者双引号表示：

let message: string = "Hello TS"

message = '你好 TS'

同时也支持ES6的模板字符串来拼接变量和字符串：

const name: string = "chenyq"
const age: number = 18
const height: number = 1.88

console.log(`我叫${name}, 年龄${age}, 身高${height}`)

---

🍤Array类型

数组类型的定义也非常简单，有两种方式(推荐第一种写法)：

因为第二种写法在jsx中会有冲突, 所以更推荐第一种写法

// 表示定义一个字符串类型的数组(推荐写法)
const names: string[] = ["aaa", "bbb", "ccc"]
// 表示定义一个数字类型的数组
const nums: Array<number> = [123, 456, 789]

names.push("ddd")
nums.push(111)

如果确定了类型, 再添加其他类型到数组中，那么会报错：

---

🍤Object类型

在TypeScript中定义一个对象其实会默认推导出属性的类型的

const obj = {
  name: "chenyq",
  age: 18
}

object对象类型可以用于描述一个对象, 但是这样我们就无法从myinfo获取数据，设置数据

const myinfo: object = {
  name: "chenyq",
  age: 18
}

对象类型后面会详细讲解, 目前先了解到此即可

---

🍤Symbol类型

在ES5中，如果我们是不可以在对象中添加相同的属性名称的，比如下面的做法：

const person = {
  identity: "程序员",
  identity: "医生"
}

通常我们的解决方案是定义两个不同的属性名字：比如identity1和identity2。

const person = {
  identity1: "程序员",
  identity2: "医生"
}

我们还可以通过symbol来定义相同的名称，因为Symbol函数返回的是不同的值：

const s1: symbol = Symbol("content")
const s2: symbol = Symbol("content")

const person = {
  [s1]: "程序员",
  [s2]: "医生"
}

---

🍤null和undefined类型

在JavaScript中， undefined 和 null 是两个基本数据类型。

在TypeScript中，它们各自的类型也是undefined和null，也就意味着它们既是实际的值，也是自己的类型

// null类型只有一个值就是null
let nl: null = null
// undefined类型也只有一个值就是undefined
let ud: undefined = undefined

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

值就是undefined
let ud: undefined = undefined

[外链图片转存中...(img-4YE4k2oX-1715358108548)]
[外链图片转存中...(img-Fu1Z1pXx-1715358108548)]
[外链图片转存中...(img-cho6I0Nu-1715358108549)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**