一 TypeScript学习笔记环境搭建和数据类型

一、学习TypeScript的缘由
二、学习环境的搭建
- 1. TypeScript的编译环境
- 2. vscode自动编译的配置
三、TypeScript中的数据类型
- 1. 简单变量的定义和初始化
- 2. 复杂变量的定义和初始化
  - 数组类型
  - 元组类型
  - 枚举类型
- 3. 其他变量类型
  - 任意类型
  - undefined类型
  - void类型

一、学习TypeScript的缘由当前编写前端的逻辑的主流语言仍是JavaScript，但这个语言由于其弱类型的特性使得它在很多的方面给程序员带来了许多的困扰，例如在使用IDE时，IDE往往难以推断出变量的类型，无法提供代码补全和错误提示，此外JavaScript对面向对象的支持也比较弱，算是一种比较非常勉强的实现方式，这也导致使用JavaScript编写项目时到后期变得难以维护等等。因此学习TypeScript是非常有必要，也是符合未来前端的发展趋势的。
tips: 我学习TypeScript主要是通过以下b站的视频来学习的，各位也可以参考：https://www.bilibili.com/video/BV1yt411e7xV
二、学习环境的搭建1. TypeScript的编译环境使用以下指令进行安装（需要有node.js环境）：
npm install -g typescript然后输入下面的指令可查看当前的版本：
> tsc -vVersion 4.3.52. vscode自动编译的配置我使用的学习环境是 vscode ，先创建一个项目文件夹，然后输入（先cd到该文件夹中）：
tsc --init然后系统会给我们生成一个 tsconfig.json 的文件。
然后我们只需要将它的 outDir 的值设置为 "./js"即可：

文章插图
然后我们先新建一个index.ts的文件，先编写一小段ts代码：
let str: string = "你好ts"let str1: string = "你好str1"然后点击：终端》运行任务》typescript 》tsc监视即可

文章插图
这样我们每次保存 ts 代码时，它就会被自动编译成 js 代码了。
编译出的 js 代码：
"use strict";var str = "你好ts";var str1 = "你好str1";当然，除此之外我们也可以使用以下指令手动编译 ts 文件：
tsc xxx.ts三、TypeScript中的数据类型

布尔类型 boolean
数字类型 number
字符串类型 string
数组类型 array
元祖类型 tuple
枚举类型 enum
任意类型 any
null 和 undefined
void 类型
never 类型

tips: 在TypeScript中定义变量时必须为变量表明变量的类型
1. 简单变量的定义和初始化这里以 boolean 和 number 为例：
var flag: boolean = truevar a: number = 123而当我们试图把一个其他类型赋值给一个数字类型的变量时会报错，例如：

文章插图
2. 复杂变量的定义和初始化数组类型写法一：
let 数组变量名: 元素变量类型[] = [xxx, ...]例如：
let arr: number[] = [1,2,3]这种方式和Java的写法非常类似。
写法二：
let 数组变量名: Array<> = [xxx, ...]例如：
let arr2: Array<string> = ["123","haha"];写法三：
let 数组变量名: any[] = [xxx, ...]这样数组就退化为了 js 中的可以装载任意类型元素的数组了。
元组类型在TypeScript中元组类型属于数组的一种，可以指定每个元素的类型：
let 元组变量名:[类型一, 类型二, 类型三...]=[类型一变量, 类型二变量, 类型三变量...]具体例子：
let oneTuple:[string, number, boolean] = ["ts",15.2,false];枚举类型语法：
enum 枚举类型名 {变量1 [=xxx],变量2 [=xxx]...}例如：
enum Flag {SUCCESS = 1,ERROR = -1}若不为枚举变量赋值，则它的默认值为索引值（从1开始）
enum Color {RED, BLUE, GREEN}let computerColor: Color = Color.BLUE console.log(computerColor);运行结果：

文章插图
3. 其他变量类型任意类型任意类型和es5中没有指定类型相似，即一个变量可以使用任意的类型进行赋值。
语法：
let 变量名: any = 任意类型值;示例：
let foo: any = 123;foo = "hello world";foo = false;undefined类型当一个变量声明而没有初始化赋值时，它的类型为undefined 。
我们可以使用一个多类型运算符 | 来表示一个变量可以有多个类型：
let num: number|undefined;console.log("num=",num);

文章插图
void类型一般用于标明方法没有返回值，用法同 Java 和 c++ 等的 void：
function run(): void {console.log("hello world");}【一 TypeScript学习笔记环境搭建和数据类型】下一部分：TypeScript学习笔记（二）函数和类【面向对象】