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

目录

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

一、学习TypeScript的缘由

当前编写前端的逻辑的主流语言仍是JavaScript，但这个语言由于其弱类型的特性使得它在很多的方面给程序员带来了许多的困扰，例如在使用IDE时，IDE往往难以推断出变量的类型，无法提供代码补全和错误提示，此外JavaScript对面向对象的支持也比较弱，算是一种比较非常勉强的实现方式，这也导致使用JavaScript编写项目时到后期变得难以维护等等。因此学习TypeScript是非常有必要，也是符合未来前端的发展趋势的。

二、学习环境的搭建

1. TypeScript的编译环境

使用以下指令进行安装（需要有node.js环境）：

npm install -g typescript

然后输入下面的指令可查看当前的版本：

> tsc -v
Version 4.3.5

2. 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 = true
var 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");
}