共计 字 • 阅读约
min
1. TypeScript 的介绍
- TypeScript 是由微软开发的一款开源的编程语言
- TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法。遵循 ES6,ES5 规范。
- TypeScript 更像 Java、c# 这样的面向对象语言,可以让 js 的语法更加规范,能够承担大型企业项目的开发,更利于维护
- 目前的主流三大框架都支持 TypeScript,node.js 中也可以使用 TypeScript

2. TypeScript 的安装,编译
安装
TypeScript 的命令行工具安装方法如下:
npm i -g typescript
# 或
cnpm i -g typescript
# 或
yarn global add typescript
安装完之后,重启终端或者重新打开一个终端,使用 tsc -v
命令查看版本号来确认是否安装成功。!
像这样,能输出版本号,就代表安装成功了 🎉
编写 & 编译 TypeScript
下面我们就来写一个向世界问好的简单程序
- 首先打开编辑器,新建一个
hello.ts
的文件 - 编写向世界问好的程序
function sayHello(name: string) {
console.log(`Hello world, 我是 ${name}`)
}
console.log(sayHello('TypeScript'));
- 编译 ts
tsc hello.ts
编译成功后,会生成一个 index.js
的文件
function sayHello(name) {
console.log("Hello world, \u6211\u662F " + name);
}
console.log(sayHello('TypeScript'));
3. 配置 vscode 自动编译 ts 文件
- 创建
tsconfig.json
文件
tsc --init
- 修改
tsconfig.json
文件中的输出路径
这样编译生成的 js 文件就会都放在 js 文件夹下面了
- 设置 vscode 监视任务,自动编译 ts
点击展开后,选择 typescript,选择 tsc:监视 - tsconfig.json
现在我们修改 index.ts
文件,vscode 就会自动帮我们编译成 js 文件
注:要是没有看到 typescript,说明 vscode 没有打开任务这个功能,须在设置 -> 功能 -> 任务 -> Auto Detect 设置为 on
到这,我们的学习 TypeScript 的环境基础就完成了
文章更新于: 2021-4-16 0:5:10