使用 Visual Studio Code 搭建 TypeScript 开发环境

綠水青山

已于 2023-09-07 11:42:17 修改

阅读量982

点赞数 2

于 2019-07-23 19:30:01 首次发布

本文链接：https://blog.csdn.net/u011320715/article/details/97000931

版权

TypeScript 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

使用 Visual Studio Code 搭建 TypeScript 开发环境

更新日志
简介
准备工作
安装 TypeScript
安装 Node 的 .d.ts 库
创建项目

更新日志

2023-9-7 添加管理多个NODE版本的链接

简介

TypeScript 官方网站: http://www.typescriptlang.org/

TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格)领衔开发的。

(安德斯·海尔斯伯格是Delphi 和 C#之父，Turbo Pascal 编译器的主要作者，.NET 概念发起人之一，同时也是TypeScript开源项目的重要领导人。他于1996年加入微软，目前是 C# 语言的首席架构师和 TypeScript 的核心开发者，获微软卓越工程师 Distinguished Engineer 和微软技术院士 Technical Fellow 称号。)

TypeScript: 应用级别的JavaScript开发

TypeScript 主要特点包括：

TypeScript 是微软推出的开源语言，使用 Apache 授权协议
TypeScript 是 JavaScript 的超集
TypeScript 增加了可选类型、类和模块
TypeScript 可编译成可读的、标准的 JavaScript
TypeScript 支持开发大规模 JavaScript 应用
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
TypeScript 语法与 JScript .NET 相同
TypeScript 易学易于理解

准备工作

下载并安装 nodejs 和 Visual Studio Code 。

安装Node.js并检测是否安装成功

安装 Node.js，安装过程基本上是下一步即可完成。

然后在CMD中运行如下命令：node -v 来查询当前 Node.js 的版本号，输出版本号后就证明安装成功。

接着可以输入命令：npm -v 来查询当前 npm 工具的版本号。

设置 Node.js 的 npm 安装 package 的全局路径（非必须）

npm 安装工具默认会安装到C盘。因为 npmrc 文件中默认的设置为：prefix=${APPDATA}\npm 。安装在C盘中，有时可能会因为系统权限的问题，导致不能正常成功的安装某些工具，那么我们就可以先将 npm 安装的全局路径自定设置一下。

在 nodejs 的安装目录下（即你的 nodejs 安装后的根目录）新建两个目录：node_global ，node_cache，然后找到 nodejs 目录下的 node_modules/npm 目录下名为 npmrc 或者 .npmrc 文件（为了安全，我们可以先将该文件复制一个副本出来进行备份），使用文本编辑器打开，修改并新增如下：prefix 和 cache 分别对应之前新建的目录 node_global 和 node_cahche 。
.npmrc文件截图

通过设置后，后续在安装工具的时候，比如安装 TypeScript ，最终会安装到 node_global 中。

如果你有多个版本的 node 可以修改个人文件夹下的npmrc 或者 .npmrc 文件。这样不管切换到哪个版本都会安装到同一个目录下。管理多个 node 版本可以使用 n 或者 nvm。查看管理Node版本文章。

设置 Node.js 环境变量

新建一个 NODE_PATH -> NODE_PATH=你自己安装nodejs的路径\node_global ，然后在Path下新增 %NODE_PATH% 。

安装 TypeScript

npm install -g typescript  // 安装

安装完成后，输入命令 tsc -v 打印出版本号证明安装成功，安装成功后对 TypeScript 进行升级一下，保证安装的为最新稳定版。

npm update -g typescript  // 升级

安装 Node 的 .d.ts 库

npm install --save @types/node

@types 的最初版本是 typings 。是一个用来管理 Typescript 定义的库。

有关 @type 可以查看这篇文章：JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)

创建项目

创建 ts_demo 项目

创建 ts_demo 目录
在命令行 cmd 下进入 ts_demo 目录
cd ts_demo
输入：npm init ，创建 package.json

创建完成后使用 Visual Studio Code 打开 ts_demo 目录。
ts_demo

创建 tsconfig.json

1.使用命令行自动创建（推荐）

tsc --init

2.手动创建

在 ts_demo 目录下创建一个名为 tsconfig.json 的文件，并输入以下内容

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "allowJs": true
    }
    ,
    "exclude": [
        "node_modules"
    ]
}

arget：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es6。
removeComments：编译生成的JavaScript文件是否移除注释。
sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
outDir：编译输出JavaScript文件存放的文件夹。
include、exclude：编译时需要包含/剔除的文件夹。

其他的属性可以查看自动生成的文件中的注释

新建 student.ts 文件

class Student {
    firstName : string;
    lastName : string;

    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }

    greeter() {
        return "Hello，您好" + this.firstName + " " + this.lastName;
    }
}

var user = new Student("王", "小明");

// document.body.innerHTML = user.greeter();
document.body.innerHTML = user.greeter();

修改启动源

按F5开始调试会生成： launch.json 。如果没有生成，点击下拉框添加配置即可。

用 Visual Studio Code 打开项目的 launch.json 文件，"program" 条目，修改如下：

 "program": "${workspaceRoot}/student.js",

创建 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>student</title>
    </head>
    <body>
        <script src="student.js"></script>
    </body>
</html>