文档章节

使用VSCode搭建TypeScript开发环境

小乔布斯
 小乔布斯
发布于 2017/02/08 17:39
字数 1460
阅读 1180
收藏 5

前言

TypeScript和VSCode已经成为了2016年前端开发最流行的开发语言和开发工具之一,更多请看2016年JavaScript流行详情。使用TypeScript语言开发的类库和框架也越来越多,鼎鼎大名的Google的Angular 2中文网)项目就是使用TypeScript作为主要的开发语言的(还有JS版本和Dart版本)。

现在浏览器显然已经不能满足了JS了,很多App也开始使用JS开发了,使用基于TypeScript的IonicNativeScript能够快速高效地帮助你开发APP。

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

说了这么多TypeScript的优点,下面让我们来学习如果在VScode中使用TypeScript开发项目吧。

下载TypeScript

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

在CMD(Windows系统)或者终端(macOS系统)中输入一下命令:

npm install -g typescript

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

下载VSCode

VSCode是我使用过最棒的编辑器没有之一,比Sublime Text还有优秀。

VSCode官网就可以下载相应系统的VSCode安装包,最新的VSCode版本是1.9。

VSCode下载图

创建项目

创建目录

首先我们创建一个项目文件夹,比如叫ts_vscode,然后创建一些主要目录,在VSCode中打开项目,在macOS上我们可以直接使用命令来操作:

# 创建ts_vscode及主要文件夹
mkdir -p ts_vscode/src/{css,images,fonts}

# 使用VSCode打开
code ts_vscode

目录结构:

ts_vscode/
    └─src/
        ├─ css/
        ├─ fonts/
        └─ images/

创建package.json

使用命令npm init来创建package.json文件,一般默认就可以,具体详情可以看这里

创建

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    └─ package.json

创建tsconfig.json

使用tsc --init命令就可以快速创建一个tsconfig.json文件,关于tsconfig.json的属性描述请访问这里

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ package.json
    └─ tsconfig.json

安装项目依赖和开发依赖

我们的这个项目使用jQuery和Bootstrap来做,因此我们使用npm来安装:

npm install jquery bootstrap --save

我们的项目使用了TypeScript来开发,因此我们需要下载相对应的声明文件,关于声明文件请访问这里。安装声明文件命令:

npm install @types/jquery @types/bootstrap -save-dev

创建index.html

ts_vscode目录下创建index.htmlindex.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>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="./src/css/index.css">
</head>

<body>
  <h1 class="text-center"></h1>
  <div class="container">
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-6">
        <button type="button" class="btn btn-default" aria-label="Left Align">
          <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        </button>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>
      </div>
    </div>
  </div>
  <!-- /.modal -->
  <!-- js -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./src/index.js"></script>
</body>

</html>

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ index.html
    ├─ package.json
    └─ tsconfig.json

创建index.ts文件并编写TS代码

src目录下创建index.ts文件。我们使用TS编写一个类,并使用这个类的方法向index.htmlh1标签中插入一句话,代码如下:

class Main {
    constructor() {

    }

    name: string;

    show(text: string): void {
        let $ele: JQuery = $("h1");
        $ele.text(text);
    }
}

let main = new Main();
main.name = "Hello TypeScript";
main.show(main.name);

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    ├─ images/
    │    └─ index.ts
    ├─ index.html
    ├─ package.json
    └─ tsconfig.json

编译和启动项目

我们使用package.json中的scripts来编译和启动项目。

编译比较简单,tsc命令就可以编译项目,tsc -w命令监控并自动编译,编译会使用tsconfig.json中的配置项。

启动项目我们安装live-server,来帮助我们启动一个服务器环境,live-server非常轻便且带有自动刷新功能,我们使用npm全局安装即可:

npm install -g live-server

安装完毕后,我们修改package.json中的scripts如下:

"scripts": {
    "test": "tsc -w & live-server"
}

最终目录结构:

最终目录结构

最后我们在终端中输入npm t就可以启动项目了,启动成功后如下图:

启动项目成功

尝试改变项目文件,你可以发现浏览器会自动编译和自动刷新哦。

总结

本文章我们认识了VSCode和TypeScript,学会了基本的安装和编译及简单的TypeScript代码编写。本篇文章的示例代码请访这里

下篇文章我们将学习如何构建打包TypeScript项目。

本文转载自:http://www.mishengqiang.com/index.php/101.html

小乔布斯
粉丝 7
博文 2
码字总数 0
作品 0
朝阳
程序员
私信 提问
初次尝试使用typescript开发react-native

typescript是javascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用 搭建react-native开发环境 安装yarn和react...

力谱宿云
2017/02/16
1K
0
TypeScript 简明教程:安装 TypeScript

本文为系列文章《TypeScript 简明教程》中的一篇。 认识 TypeScript 安装 TypeScript 前言 通过前一篇文章,相信大家对 TypeScript 有了基本的了解,对 TypeScript 的价值也有了一定的认识。...

Hopsken
03/01
0
0
为vue3学点typescript(1), 体验typescript

看了vue conf 2019的视频, 特别兴奋, vue3要来了! vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点. 19年最酷的前端技术 我是19年初开始使用的typescrip...

铁皮饭盒
07/01
0
0
我为 VS Code 开发了一个 Deno 插件

这几天为 Deno 开发了一个 VS Code 插件:Deno support for VSCode,GitHub 地址:github.com/justjavac/v…。 自 Deno 发布以来就备受关注,也有很多媒体和开发者称 Deno 为“下一代 Node.j...

justjavac
03/08
0
0
5分钟了解TypeScript

1.安装TypeScript 有两种方式安装TypeScript: Via npm 通过安装VS插件,更多可参见这里。 对于npm用户,可以直接使用下面的命令行安装: nmp install -g TypeScript 2.创建第一个TypeScript文...

zhanggui
2018/06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部