2022年了，Typescript系列：基础篇(一)，了解一下？

---

2022年了，Typescript系列：基础篇(一)，了解一下？

这段时间以来，TS的发展可谓是如日中天，本想偷个懒去看看别人写的分享贴来学习，找了近十篇之后，发现要么是比较浅显，要么有些偏差，没有找到很满意的。于是决定去看官方文档。学习了一段时间后，准备写一个系列，从基础类型，对象，函数，模块等TS知识，到在vue、react中的应用，供有需要的同学们参考。其中，我套用了不少官方文档的示例，觉得我的学习经验不好或不正确的朋友，欢迎批评指正。

TS是JS的超集。在学TS之前，最好有一定的JS基础。本篇只介绍typescript的安装和各种基础类型。需要了解其它内容的同学可以看其它篇章或查阅官方文档。

(一)、安装与编译

想要使用TS，得先会安装。Typescript需要node环境，确保你已经安装了node。如果还没有安装node，可以去[Node.js官网](Node.js下载，傻瓜式安装。

打开项目目录进行初始化：

npm init -y

官方推荐了npm，yarn，pnpm三种工具，任选其一即可（npm工具为node自带的包管理工具，可自由使用；yarn或pnpm工具需要提前安装）。

# with npm
npm install typescript --save-dev
# with yarn
yarn add typescript --dev
# with pnpm
pnpm add typescript -D

在安装ts时，编译工具tsc也会被自动安装。待安装完成，在项目根目录下新建一个app.ts。

// app.ts
const str = 'app'
console.log(str.charAt(0))

即可通过以下任一方式运行tsc，编译成功后会在和app.ts同级目录下多出一个app.js文件。

# 当前目录下的app.ts文件编译为app.js
# npm
npx tsc app.ts
# yarn
yarn tsc app.ts
# pnpm
pnpm tsc app.ts

app.js：

const str = 'app'
console.log(str.charAt(0))

这个js文件和app.ts看起来没有差别，这是因为我们没有在app.ts里没有进行类型约束。与类型的相关内容会在后面谈到。现在我们来让app.ts出一点“错误”，将str换成数组，编辑器会把错误代码用红色波浪线标出，如果此时在命令行运行yarn tsc app.ts，控制台便会报错。

// app.ts
const str = ['a','p','p']
console.log(str.charAt(0))  // charAt会被

尽管如此，报错了的代码依旧会被编译成js文件。我们可以在tsc命令后加上编译的相关配置指令来进行控制。比如，加上**–noEmitOnError**之后，一旦报错便不会生成js文件。

tsc --noEmitOnError hello.ts

但是ts的编译配置项非常多，如果每次都通过在命令行加入指令来进行相关控制，无疑非常繁琐。因此我们可以在tsconfig.json里编写相关配置，这样我们执行tsc命令时，编译器会默认从当前目录逐步向上层目录查找并读取tsconfig.json里的配置项。

(二)、配置文件：tsconfig.json

在运行tsc命令时，我们可以在后面添加指令来指定相关配置。但是我们会更倾向于在tsconfig.json里对相关指令进行配置，以减少重复、繁琐的操作。在Vue、React等框架搭建的项目里，一般都已生成初步配置好了的tsconfig.json文件。本篇只进行解基础内容的分享，有关配置的章节将在后续推出。

(三)、类型基础

这里介绍部分TS基础类型，关于类型的进阶将在后续篇章中单独介绍。注意不要将基础类型和js基本数据类型混为一谈。基础类型可以理解为ts内置的各种类型，而非我们人为定义出的类型。TS有多种基础类型，这些类型可以用来进行组合，从而得到我们需要的人为定义的类型。TS在声明变量时，在变量名后加上冒号: 和类型名来进行变量的类型注释。如果不添加类型注释，则TS会根据变量的初始值进行类型推论，自动推断出该变量属于什么类型。如果也没有初始值，则会被推断为any类型。

1. 原有的基本数据类型

• string：字符串类型，注意String在js里已经有特殊意义了，而小写的string才是Typescript用来表示字符串的类型名称，即在注释变量类型为字符串时，使用小写的string，而不是大写的String，注意不要混淆了两者；number和boolean同理。

• number：数字类型；

• boolean：布尔类型；

  // 声明变量类型，可以不赋初值，后续给num赋的值必须是number类型
  let num: number;
  let str: string = 'typescript';
  // 类型推断：TS会自动推断出bool的类型为boolean
  let bool = true;
  

2. Array

Array是数组类型，属于对象类型的一种。由于数组内会有数组成员，因此，在声明数组变量的时候，还要给数组成员添加类型注释，一般有两种常见方式：Type[]、Array<Type>。后者涉及泛型概念，将在后续介绍。其中，Type指代数组成员的类型，可以是基础类型，也可以是人为定义的类型 (关于数组的变形，元组类型，将在对象类型的章节介绍)。例如，要声明一个存放字符串的数组变量：

let arr1: string[];
// 也可以像下面
let arr2: Array<string>

3. object

对象类型是我们平时更为常见的类型。在本篇只给出一些简单定义，后续篇章中会进行单独介绍。一个对象类型的变量可以通过键值对来存储多个数据。定义一个对象类型，可以简单地列出它的各个属性及属性的类型：

// 定义一个包含name, age, gender属性的变量obj
let obj: {
   name: string