共计 字 • 阅读约 min

1. TypeScript 的介绍

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

2. TypeScript 的安装,编译

安装

TypeScript 的命令行工具安装方法如下:

npm i -g typescript
# 或
cnpm i -g typescript
# 或
yarn global add typescript

安装完之后,重启终端或者重新打开一个终端,使用 tsc -v 命令查看版本号来确认是否安装成功。!

image1602405859295.png

像这样,能输出版本号,就代表安装成功了 🎉

编写 & 编译 TypeScript

下面我们就来写一个向世界问好的简单程序

  1. 首先打开编辑器,新建一个 hello.ts 的文件
  2. 编写向世界问好的程序
function sayHello(name: string) {
    console.log(`Hello world, 我是 ${name}`)
}

console.log(sayHello('TypeScript'));
  1. 编译 ts
tsc hello.ts

编译成功后,会生成一个 index.js 的文件

function sayHello(name) {
    console.log("Hello world, \u6211\u662F " + name);
}
console.log(sayHello('TypeScript'));

3. 配置 vscode 自动编译 ts 文件

  1. 创建 tsconfig.json 文件
tsc --init
  1. 修改 tsconfig.json 文件中的输出路径

image1602410961834.png

这样编译生成的 js 文件就会都放在 js 文件夹下面了

  1. 设置 vscode 监视任务,自动编译 ts

image1602411095568.png

点击展开后,选择 typescript,选择 tsc:监视 - tsconfig.json

image1602411336227.png

image1602411263601.png

现在我们修改 index.ts 文件,vscode 就会自动帮我们编译成 js 文件

注:要是没有看到 typescript,说明 vscode 没有打开任务这个功能,须在设置 -> 功能 -> 任务 -> Auto Detect 设置为 on

到这,我们的学习 TypeScript 的环境基础就完成了



文章更新于: 2021-4-16 0:5:10