前言

最近在学 vue3，vue3 又是使用 typeScript 编写的 javaScript 框架，于是也学了学 typeScript。那什么是 typeScript 呢，和 javascript 又有什么关系呢？

由于各种历史因素，js 存在很多缺点，它是一门弱类型语言，不强制要求变量和函数的类型，就像我在项目中常常遇到的，本来是个字符串变量，赋值后又变成了一个数组，我原以为这是 js 灵活的体现，后来发现这是错误的，类型变来变去代码不就变得难以阅读、调试和维护

然后 typescript 就出来了，它可以帮助我们类型检查，在编写代码的时候就可以发现错误，也可以定义类型，支持 es6 及以上的特性，箭头函数、解构、默认参数等，三大框架也都支持 typescript，那还考虑什么？学就完了

配置 Typescript 开发环境

配置 TypeScript 开发环境需要 Node.js，因为 Typescript 是 JavaScript 的超集，最终还是会被编译成 JavaScript 代码。

然后就是安装 Typescript 了，终端通过命令全局安装

npm install typescript -g

终端输入tsc -v没有说明内部或外部命令，也不是可运行的程序就代表安装成功了

类型检测

新建一个 ts 文件(不是 js 文件，ts 代码要写在 ts 文件里)定义一个方法，要求传入一个类型为 string 的形参，然后 return 出去，第一次调用传入一个字符串，然后运行 ts 文件（运行 ts 文件需要先使用 tsc < file-path > 命令将 ts 文件编译成 js 文件然后使用 node < file-path > 命令运行）

第二次调用的时候传入一个数字，很明显还没等运行编辑器就提示发生错误了，使用 tsc 命令编译文件也会发生报错，这就是 Typescript 的类型检测

变量的定义

在 Typescript 中使用let和const定义变量的方式和 JavaScript 一致，需要在变量名后面使用 : 号来指定变量的类型，类型定义可以为string、number、boolean等基本类型，也可以自定义接口、类等高级类型这个以后再说

1.number

Typescript 支持定义多种进制的数字类型变量

let num1:number = 100 // 十进制let num2:number = 0b1010 // 二进制let num3:number = 0o12 // 八进制let num4:number = 0xA // 十六进制let num5:number = parseInt("10"); // 将字符串转换为整数

2.string

模板字符串可以包含变量或表达式，这些变量或表达式会被替换为相应的值

let str: string = "v me";let num: number = 50let mes: string = `Crazy Thursday ${str} ${num}`console.log(mes)  // Crazy Thursday v me 50

3.boolean

布尔类型不仅可以直接赋值为true或false，还可以通过表达式的计算结果来赋值

let bool:boolean = true
let num1: number = 10let num2: number = 20let isGreater: boolean = num1 > num2 // false

4.array

在 TypeScript 中，可以使用数组类型来定义数组变量

let numArr: number[] = [1, 2, 3, 4, 5]let strArr: string[] = ["Crazy", "Thursday", "vme50"]let num2Arr: Array<number> = [10, 20, 30, 40, 50];

5.object

const info: {  name: string;  age: number;} = {  name: "abc",  age: 18,};

6.null 和 undefined

let n1:null = nulllet n2:undefined = undefined

7.symbol

let sym1: symbol = Symbol("key")let sym2 = Symbol("key");console.log(sym1 === sym2); // false