使用 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 安装包

创建项目

  1. mkdir typescript-demo
  2. npm init -y //创建一个 package.json
  3. tsc --init //创建一个 tsconfig.json
  4. touch index.html
  5. touch hello.ts

index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. <title>TypeScript with VSCode</title>
  8. </head>
  9. <body>
  10. <h1 class="text-center"></h1>
  11. <script src="./hello.js"></script>
  12. </body>
  13. </html>

hello.ts

  1. function sayHello(person: string) {
  2. return "hello" + person;
  3. }
  4. console.log("object :", sayHello("monkey"));

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

  1. "scripts": {
  2. "start": "tsc -w & live-server",
  3. },

执行 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. POJ 2492 A Bug's Life (带权并查集 && 向量偏移)

    题意 : 给你 n 只虫且性别只有公母, 接下来给出 m 个关系, 这 m 个关系中都是代表这两只虫能够交配, 就是默认异性, 问你在给出的关系中有没有与异性交配这一事实相反的, 即同性之间给出了交配 ...

  2. Android应用源码航空订票软件客户端

    功能分类:其他     支持平台:Android     运行环境:Android 开发语言:Java     开发工具:Eclipse     源码大小:1.76MB   下载地址:http://w ...

  3. Jmeter性能测试一

    用jmeter进行压力测试,在网上看到一个简单的例子.按步骤做,在jmeter中执行时,结果中error一直为100%.通过在代码中加入打印语句,才找出代码中的一处错误.下面po上的代码中已将错误修改 ...

  4. 大哥带的Orchel数据库的盲注入bool型

    0X01判断闭合 ?username=SMITH' 错误 ?username=SMITH'' 正确 ?username=SMITH' and ascii(substr((select user fro ...

  5. SpringMVC前端控制器以.html后缀拦截,访问接口返回406问题

    原因: spring监测到是.html来访问,它就会认为需要返回的是html页面.如果返回的不是html,会报406错误 解决: 提供多种后缀拦截方式,工程里web.xml配置 分析: HTTP 40 ...

  6. SVN appears to be part of a Subversion 问题心得

    昨天更新了下项目,但同时又增加了一个Java工程,我就在本地单独导出到workspace同目录下:结果第二天提交代码的时候,提示如下错误 svn: E155021: The path 'xxx' ap ...

  7. webpack插件之htmlWebpackPlugin

    webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin  由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...

  8. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  9. 转 HTTP请求报文格式 GET和POST

    https://blog.csdn.net/h517604180/article/details/79802914 最近在做安卓客户端图片上传插件功能,供后台调用.其中涉及到了拼接HTTP请求报文,所 ...

  10. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_02.三层架构和ssm框架的对应关系