使用 VS Code 搭建 TypeScript 开发环境

TypeScript 是 JavaScript 的超集，TypeScript 只是增强了 JavaScript 而非改变了 JavaScript，TypeScript 同样也是基于 ECMAScript 标准的编程语言。因此非常流行的 Vue 和 React 及我们常用 Jquery 等类库都可以使用 TypeScript 来编码，TypeScript 强大的智能类型分析系统，能够使你的代码更加强壮。

下载 TypeScript

TypeScript 官网（中文网）提供了多种下载方式，我们使用 NPM 来下载 TypeScript，如果你没有安装 NPM，请到 Nodejs 官网进行安装。

在 CMD（Windows 系统）或者终端（macOS 系统）中输入一下命令：

npm install -g typescript

安装完毕后我们输入 tsc -v 可以查看当前安装的 TypeScript 版本号。当前最新的版本是 2.1.5。

下载 VSCode

VSCode 是很棒的编辑器。在 VSCode 官网就可以下载相应系统的 VSCode 安装包

创建项目

mkdir typescript-demo

npm init -y //创建一个 package.json

tsc --init //创建一个 tsconfig.json

touch index.html

touch hello.ts

index.html

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>TypeScript with VSCode</title>

  </head>

  <body>

    <h1 class="text-center"></h1>

    <script src="./hello.js"></script>

  </body>

</html>

hello.ts

function sayHello(person: string) {

  return "hello" + person;

}

console.log("object :", sayHello("monkey"));

先执行npm install -g live-server安装 live-server 之后,修改 package.json

  "scripts": {

    "start": "tsc -w & live-server",

  },

执行 npm start 就可以写一些 ts 的小 demo 了

使用 VS Code 搭建 TypeScript 开发环境的更多相关文章

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

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  2. Vs Code搭建 TypeScript 开发环境

    一.npm install -g typescript 全局安装TypeScript   二.使用Vs Code打开已创建的文件夹,使用快捷键Ctrl+~启动终端输入命令 tsc --init 创建t ...

  3. 使用Visual Studio Code + Node.js搭建TypeScript开发环境

    Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...

  4. Windows下visual studio code搭建golang开发环境

    Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...

  5. VS Code搭建.NetCore开发环境(二)

    一.安装VS Code for C#的相关插件 1.C# :https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp 2 ...

  6. VS Code搭建.NetCore开发环境(一)

    一.使用命令创建并运行.Net Core程序 1.dotnet new  xxx:创建指定类型的项目console,mvc,webapi 等 2.dotnet restore :加载依赖项 dotne ...

  7. VS Code 搭建 Rust 开发环境

    VS Code 搭建 Rust 开发环境 上一篇文章安装和配置好了 Rust 环境后,我们是使用的是简单的文本工具编写 Hello World 入门代码,但是为了提高我们的学习效率,下面安利大家 VS ...

  8. VS Code 搭建stm32开发环境

    MCU免费开发环境 一般芯片厂家会提供各种开发IDE方案,通常其中就包括其自家的集成IDE,如: 意法半导体 STM32CubeIDE NXP Codewarrior TI CCS 另外也可以用ecl ...

  9. 搭建typescript开发环境最详细的全过程

    搭建typescript开发示例https://github.com/Microsoft/TypeScriptSamples typescript案例https://www.tslang.cn/sam ...

随机推荐

  1. 手动安装jar包到maven仓库

    1.手动安装jar包到maven仓库 本地没有下载安装maven,但是eclipse已经集成的maven. 选中任何一个maven项目,右键/Run as/maven build... 在Goals输 ...

  2. 【java工具类】生成二维码

    /** * 生成二维码图片 * @param text 扫描二维码后跳转的url * @param width 图片宽度 * @param height 图片高度 * @param filePath ...

  3. BZOJ 4653: [Noi2016]区间 双指针 + 线段树

    只要一堆线段有重叠次数大于等于 $m$ 次的位置,那么一定有解 因为重叠 $m$ 次只需 $m$ 个线断,将那些多余的线断排除掉即可 先将区间按照长度从小到大排序,再用 $two-pointer$ 从 ...

  4. 51nod 1228 序列求和（伯努利数)

    1228 序列求和  题目来源: HackerRank 基准时间限制:3 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 T(n) = n^k,S(n) = T(1 ...

  5. Ansible跳板机自动部署

    首先,安装ansible,略过此步骤. 一.控制机(jenkens.ansible所在机器与跳板机之间互信,跳板机与目的机之间互信) 1.在客户端生成公钥私钥对 命令:ssh-keygen -t rs ...

  6. python3：csv的读写

    前言快要毕业那会儿,在下编写了一个招聘网站招聘岗位的爬虫提供给前女神参考,最开始我是存到mysql中,然后在到处一份csv文件给前女神.到了参加工作后,由于经常使用excel绘制图表(谁叫公司做报表全 ...

  7. Springboot(八):emoji表情保存到mysql出错的解决办法

    emoji表情保存到mysql出错的解决办法 今天,在前端的说明信息中输入emoji表情的时候,插入数据库会报错 百度了一下,是因为mysql数据库的字符编码集不正确,utf8无法存入表情字符,只能将 ...

  8. PO,BO,VO和POJO的区别

    PO:persistent object 持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中与i ...

  9. Java 生成二进制加减法题目

    日常算数,有益身心健康. int a; int b; int result; int symbol; int count = 50; Random random = new Random(); for ...

  10. PHP通用后台管理系统发布！

    下载地址:https://gitee.com/lim2018/phpadmin