使用 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. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  2. 文件操作：fread()和fwrite()

    fread和fwrite函数功能     用来读写一个数据块.   一般调用形式     fread(buffer,size,count,fp);     fwrite(buffer,size,cou ...

  3. YOLO_V2

    YOLOv2:代表着目前业界最先进物体检测的水平,它的速度要快过其他检测系统(FasterR-CNN,ResNet,SSD),使用者可以在它的速度与精确度之间进行权衡. YOLO9000:这一网络结构 ...

  4. 论文阅读：FlexGate: High-performance Heterogeneous Gateway in Data Centers

    摘要: 大型数据中心通过边界上的网关对每个传入的数据包执行一系列的网络功能,例如,ACL被部署来阻止不合格的流量,而速率限制被用于防止供应商过度使用带宽,但是由于流量的规模巨大,给网关的设计和部署带来 ...

  5. [BZOJ2791]:[Poi2012]Rendezvous（塔尖+倍增LCA）

    题目传送门 题目描述 给定一个有n个顶点的有向图,每个顶点有且仅有一条出边.每次询问给出两个顶点${a}_{i}$和${b}_{i}$​​,求满足以下条件的${x}_{i}$和${y}_{i}$:   ...

  6. 深入浅说服务如何以Jar包的方式发布

    序言 笔者前段时间在使用自研框架NF( 传送门 )开发一个自动模板生成工具之后,想将他发布到Linux下,之前一直使用IDE直接run as运行,在遇到发布的时候考虑过发布为war或者jar,在一番抉 ...

  7. JDK中String类的源码分析(一)

    1.String类是final的,不允许被继承 /** The value is used for character storage. */ private final char value[]; ...

  8. Codeforces Aim Tech Round4 (Div2) D

    题目链接: 题意: 给你一个严格升序的单链表,但是是用数组来存放的.对于每一个位置来说,你可以知道这个位置的值和下一个的位置.你每一个可以询问一个位置,机器会告诉你这个位置的值,和下一个位置的指针.要 ...

  9. delphi 每英寸相素点取值偏差

    在所有资料中,每英寸相素点之比一般是这两个值,即:0.0393700788  25.399999961392 但是在GDI编程中,却遇到LOGPIXELSX  LOGPIXELSY 在取值为96DPI ...

  10. Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览

    Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览 { TControl } public   constructor Create(...); ov ...