使用 Visual Studio Code 搭建 TypeScript 开发环境
使用 Visual Studio Code 搭建 TypeScript 开发环境
- 更新日志
- 简介
- 准备工作
-
- 安装Node.js并检测是否安装成功
- 设置 Node.js 的 npm 安装 package 的全局路径（非必须）
- 设置 Node.js 环境变量
- 安装 TypeScript
- 安装 Node 的 .d.ts 库
- 创建项目
-
- 创建 ts_demo 项目
- 创建 tsconfig.json
- 新建 student.ts 文件
- 修改启动源
- 创建 index.html
- 编译和运行项目
更新日志
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
- 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 。
通过设置后，后续在安装工具的时候，比如安装 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 目录。
创建 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>studenttitle>
head>
<body>
<script src="student.js">script>
body>
html>
编译和运行项目
接下来我们将.ts文件编译为.js文件
tsc -w student.ts
编译完成后，使用浏览器打开 index.html 文件。
输出 Hello，您好王 小明 。
