TypeScript学习笔记

开启ts学习之路，本篇了解ts和ts的简单数据类型

一、TypeScript简介

TypeScript（下称TS） 是 JavaScript 的超集，TS其实就是类型化的 JavaScript（下称JS），它不仅支持 JS的所有特性，还在 JS的基础上添加了静态类型注解扩展。

二、TypeScript环境搭建

全局安装TS

 npm i typescript -g
// 或者使用yarn
 yarn add global typescript 

安装完成后检查TS版本：

tsc --version

如果有版本号，就代表已经全局安装成功。如下

Version 4.7.2

1、创建项目与文件转换

创建好一个空白项目，用vscode打开，创建一个名为 demo.ts 的文件：

function fn(){
    let str: string = "Hello World";
    console.log(str);
}

fn();

然后打开终端，使用 node demo.ts 运行该ts文件，会发现报错：

原因是ts文件无法识别，需要转成js文件。

因此，先使用 tsc demo.ts 将文件进行转换，转换成功会看到当前目录下多了一个demo1.js，此时使用node去运行这份js文件，就能看到结果：

2、自动转换

如果每次都要先将ts文件转一次js文件，再运行js文件，那么过程太过繁琐，可以直接使用插件帮我们解决：

// 全局安装ts-node
npm i -g ts-node@8.5.4
    

安装成功后，删掉项目中的 demo1.js，然后直接在终端运行：

ts-node demo.ts
    

如果可以直接得到运行结果，如下图，即代表运行成功。

三、简单数据类型

1、简单数据类型

同JS一样，TS也有简单数据类型，而且大同小异。拿上述使用的代码：

function fn(){
    let str: string = "Hello World";
    console.log(str);
}

fn();

这里 str:string 中，str是变量名称，:string 是指定这个字段的类型为字符串，如果你给它赋值任何其他数据类型，都是不被允许的：

由此，我们了解了TS相较于JS，更加注重变量的数据类型校验。剩余的TS简单数据类型还包括：

• 字符串string
• 数字number / bigint(一般较大的整数才会使用)
• 布尔值boolean
• 唯一值symbol

注意：虽然number和bigint都表示数字，但是这两个类型不兼容。

2、静态类型检测

什么是静态类型呢？所谓静态类型，就是一个变量如果定义了它的类型，那么这个类型就不再允许修改。在编译时期，静态类型的编程语言即可准确地发现类型错误，这就是静态类型检测的优势。

来观看下面这段代码：

let str: string = "Hello World";
str = 123123;	// 错误的修改

在编译（转译）时期，TypeScript 编译器将通过对比检测变量接收值的类型与我们显示注解的类型，从而检测类型是否存在错误。如果两个类型完全一致，显示检测通过；如果两个类型不一致，它就会抛出一个编译期错误，告知我们编码错误，效果如下图所示。

这个静态类型检测在VsCode中已经完美集成，开发者只需要看提示即可了解需要修改的地方。

3、类型注释与推断

当写完以下代码

function fn(num1, num2){
    console.log(num1 + num2);
}

let result = fn(1, 2);
    

然后鼠标移上形参num1时，会得到一个提示。

当提示为any时，代表你需要给它写上类型：

function fn(num1: number, num2: number){
    return num1 + num2;
}

let result = fn(1, 2);

你加上的这两个number，就是类型注释。而此时，当你鼠标移上result时，就会得到一个新的提示：

这个提示告诉你result是个number，但我们并没有声明result是number！所以这就是类型推断。