2020年TypeScript常见问题汇总最近因为项目使用TypeScript开发，通过翻阅一些github上的源码，一

一、概述

最近因为项目使用TypeScript开发，通过翻阅一些github上的源码，一些论坛的文档，渐渐的有所了解。对于初学者来说，无论去学习哪个框架或者哪种语言，我们首先要知道的应该先去了解如构建开发环境。下面小编把用TypeScript开发项目中遇见的问题做个小结。希望对大家工作有所帮助，如果大家觉得好，不妨点个赞，关注 『前端微服务』 微信公众号,让小编持续为大家带来更多干货。

二、TypeScript 简介

TypeScript 是由微软公司在 2012年开发的一门免费开源的编程语言。它是 JavaScript 的一个超集（增强版），它在JavaScript 的基础上增加了一套十分强大的类型系统(可选的静态类型、扩展语法、面向对象和基于类的面向对象编程)，从而可以让我们在写代码的时候获得更加丰富的语法提示。在代码的编译阶段也可以通过类型系统的检查，从而有效避免一些线上错误。JavaScript在最后运行的时候都会转变成 JavaScript。TypeScript经过8年多的快速成长，现在已经变成了前端必会的一门技能。

三、TypeScript和JavaScript的对比

TypeScript 与JavaScript两者的特性对比，主要表现为以下几点：

TypeScript是一门比Java更Script的编程语言。也就是说TypeScript具有真正的面向对象编程思想，你可以采用它来完成更加
TypeScript始于JavaScript终于JavaScript。也就是说TypeScript遵循JavaScript的语法和语义，任何Js都可以在Ts内运行，但TypeScript它不可以直接在浏览器中运行，必须要将其转换为JavaScript。
TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，可以开发大型应用，或者说更适合开发大型应用）
TypeScript是JavaScript的超集，可以编译成纯JavaScript。这个和我们CSS离的Less或者Sass是很像的，我们用更好的代码编写方式来进行编写，最后还是有好生成原生的JavaScript语言。
TypeScript跨浏览器、跨操作系统、跨主机、且开源。由于最后他编译成了JavaScript所以只要能运行JS的地方，都可以运行我们写的程序，设置在node.js里。
TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义，所以对于我们前端从业者来说，学习前来得心应手，并没有太大的难度。
TypeScript可以重用JavaScript代码，调用流行的JavaScript库。
TypeScript提供了类、模块和接口，更易于构建组件和维护
TypeScript拥有强大的靠山，分别为微软与谷歌。TypeScript是由微软开发的，谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向。
Vue 3.0 源码全部用typescript重写。Vue.Js在前两年发展迅速，用户数和粉丝量呈指数级增长，目前Vue开发者插件用户数约为70.4万。
Node.js之父瑞安达尔（Ryan Dahl）发布了新的开源项目 deno，而该项目最终是要提供一个安全的 TypeScript 运行环境。
总之用TypeScript来编写出更加出色的JavaScript代码，用来搞定规模可观的JavaScript项目。

四、TypeScript环境搭建

因为TypeScript在JavaScript的基础上增加了类型系统，所以TypeScript不能够直接在浏览器当中运行。我们需要使用编译器将TypeScript编译为JavaScript。 Compiler(编译器)：将TypeScript编译成纯的JavaScript。因为ES6规范是2015年发布的，不是所有的浏览器都支持TypeScript，所以需要进行编译后执行。

官网:www.typescriptlang.org/
中文:www.tslang.cn/
官方博客:devblogs.microsoft.com/typescript/
在线Compiler：www.tslang.cn/
本地Compiler：安装TypeScript编译器。今天我们重点分享下本地安装如下:

4.1. 安装Node运行环境

因为TypeScript编译为JavaScript需要Node环境的支持，所以需要先进行Node的安装。Node的安装很简单，首先打开nodejs.org/zh-cn/，下载Node安装包，然后傻瓜式安装。

你可以到Node.js官网去下载 Node 进行安装，建议你下载LTS版本,也就是长期支持版本。

由于Node的版本兼容问题，建议你使用NVM进行安装更方便。

如果你已经安装了，可以打开命令行工具，然后使用node -v命令查看安装的版本，但是一般还有一个命令需要检测一下，就是npm -v,如果两个命令都可以输出版本号，说明你的 Node 安装已经没有任何问题了。

4.2 TypeScript编译器安装

4.2.1 全局安装typeScript

你要使用 TypeScript 先要在你的系统中全局安装一下TypeScript，这里你可以直接在 VSCode 中进行安装，安装命令可以使用 npm 也可以使用 yarn 在命令行窗口输入如下命令：

# npm安装
npm install typescript -g

# yarn 安装
yarn global add typescript

# 查看TypeScript版本
tsc --version

命令行截图

PS C:\Users\OakMan> node -v
v14.15.4
PS C:\Users\OakMan> npm -v
6.14.10
PS C:\Users\OakMan> yarn global add typescript
yarn global v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "webpack > terser-webpack-plugin@4.2.3" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > webpack-cli@4.1.0" has incorrect peer dependency "webpack@4.x.x || 5.x.x".
[4/4] Building fresh packages...

success Installed "typescript@4.3.5" with binaries:
      - tsc
      - tsserver
Done in 107.81s.
PS C:\Users\OakMan> tsc --version
Version 4.3.5

4.3 初始化项目

因为 Node 不能直接运行TypeScript文件，需要用tsc 转换一下，转换完成后typeScript代码被编译成了javaScript代码，可以输入node xxx.js来运行，在终端里就可以顺利的输出字符了。

在程序文件夹内初始化项目

npm init -y

创建tsconfig.json文件

tsc --init

安装@types/node

npm install @types/node --dev-save

编写index.ts文件

const a:string = "HelloWorld"
console.log(a)

在Vscode的任务菜单下，打开运行生成任务，然后选择tsc：构建-tsconfig.json，这时候就会生成一个index.js文件

在终端中输入node helloWorld.js就可以看到结果了

ts-node 的安装和使用因为TypeScript不能直接运行，我们需要先用tsc先把文件编译成.js文件，然后使用node运行，这样效率实在太低，这个时候ts-node插件来解决这个问题，有了这个插件，我们就不用再编译了，而使用ts-node就可以直接看到编写结果。

使用npm命令来全局安装，直接在命令行输入下面的命令：

npm install -g ts-node

安装完成后，就可以在命令中直接输入如下命令，来查看结果了。

ts-node xxx.ts

4.4 VSCode编辑器

VSCode是微软出的产品，所以有很好的兼容性和支持，VSCode 上有很多专门为 TypeScript 专门作的语法适配，所以在编写时就会轻松快乐起来。

下载地址：code.visualstudio.com/

五、TypeScript常见问题

5.1 如何学好TypeScript

拥有JavaScript基础，了解ES6
边学习边练习

5.2 TypeScript中，未配置好的情况下直接使用require语法会报错误`’Cannot find name ‘require’`

5.2.1 原因分析

require是node的语法，运行环境不是node环境。

5.2.2 解决方案

安装@types/node

$ npm i @types/node -D
#OR
$ yarn add @types/node -D

配置tsconfig.json compilerOptions内加上一项：

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "types": ["node"],
}

5.3 在ts中使用require

5.3.1 原因分析

require statement is not part of import statement(require语句不是import语句的一部分)

5.3.2 解决方案

import mongoose = require('mongoose');

5.4 安装nodemon后，在命令窗口输入nodemon --version 提示不是内部命令也不是外部命令

5.4.1原因分析

环境变量配置问题

5.4.2 解决方案

查看npm 安装路径 , 终端执行 npm config get prefix获取安装目录，在这个目录里面你能看到node_modules已经安装在全局的第三方包。
你把这个路径配置到环境变量PATH里面去
重新在命令行执行nodemon --version

拓展:

打开Node.js Command prompt，执行npm config ls
修改prefix的值：npm config set prefix *
npm help +命令,查看详情

5.5 vscode中编写typescript文件，提示错误Cannot redeclare block-scoped variable 'XXX'.ts(2451)

5.5.1原因分析

这被认为是设计上的问题。typescript使用DOM typings作为全局执行上下文。全局环境下就极有可能随时出现命名问题，所以typescript会提示这样的错误。

5.5.2 解决方案

方案一

在TS顶端加上export {} 方案二 在tsconfig.json文件中添加如下内容，这样设置使得编译器不包含DOM typings。

{
    "compilerOptions": {
        "lib": [
            "es2015"
        ]
    }
}

5.6 没有申明类型的npm包

5.6.1 原因分析

对于没有声明类型的npm包

5.6.2 解决方案

创建一个types目录，来管理自己的声明文件，同时需要在配置文件中，在 tsconfig.json中添加以下配置

// tsconfig.json
  "baseUrl": ".",
  "paths": {
      "*": [ "*", "types/*"]
   }

5.6.3 自动生成声明文件的配置

// tsconfig.json
complierOptions:{
  "declaration": true,
}

六、关注我们

点击下方关注我👇👇👇

2020年TypeScript常见问题汇总