进入TypeScript类型约束的世界这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战前言

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

前言

在学习 Vue3.x 的过程中, 免不了要用 TypeScript, (当然用不用 TS 也是可选的). 这这里就记录学习 TypeScript 的过程, 收录在 TypeScript

进入 TypeScript 类型约束的世界

1. 安装 Typescript

Typescript 官网地址: www.typescriptlang.org/zh/

Typescript 文档地址：Basic Types

还可以使用 nvm 来管理 node 版本: github.com/nvm-sh/nvm

命令行安装 Typescript:

npm install -g typescript

使用 tsc 全局命令：

// 查看 tsc 版本
tsc -v

/// 创建一个目录
mkdir ts_study && cd ts_study

/// 接着创建 src 目录：
mkdir src && touch src/index.ts

用npm将目录初始化：

npm init

用 TypeScript 通常也需要初始化：

tsc --init

这时目录下多了一个 `tsconfig.json` 文件

/// 编译 ts 文件
tsc folder/fileName.ts

TypeScript VS JavaScript

JavaScript 类型分类:

primitive values 原始数据类型：

Symbol
Number
BigInt
String
Boolean
Null
Undefined

TypeScript 类型分类

TypeScript 的原始类型包括:

symbol
number
bigint
string
boolean
void
null
undefined

这里要注意每个类型是小写字母开头的, 如果在 Typescript 文件中写成 Boolean 则代表是 JavaScript 中的布尔对象, 如下第一行:

let isDone: boolean = false

/// 接下来来到 number，注意 es6 还支持2进制和8进制，

let age: number = 10
let binaryNumber: number = 0b1111

/// 之后是字符串，注意es6新增的模版字符串也是没有问题的
let firstName: string = 'xn213'
let message: string = `Hello, ${firstName}, age is ${age}`

/// 还有就是两个奇葩兄弟，null 和 undefined, 经常在调试报错中看到他俩
let un: undefined = undefined
let nu: null = null

/// 注意 null 和 undefined 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
let num: number = undefined

Vue3 学习实战系列更文:

Vue3 源码仓库 vue-next : github.com/vuejs/vue-n…
Vue3.x 官方中文文档: v3.cn.vuejs.org