您的位置：首页 > Web前端 > JavaScript

TypeScript 学习笔记2: Getting Started

2017-07-01 16:56 459 查看

原文链接：https://leanpub.com/essentialtypescript/read#getting-started

1. 选择TypeScript编辑器

“Visual Studio Code” 这是一个免费的、开源的、跨平台的代码编辑器。

https://code.visualstudio.com

2. 安装TypeScript CLI

2.1. 安装node.js

2.2. 安装tsc

到命令行下，运行：

npm install -g typescript

安装完之后，运行 TypeScript 编译器：

tsc

能看到版本信息，和各种参数。

2.3. 安装 lite-server

这是一个轻型的web server，它会在我们的页面中插入脚本，监测文件变化，每当文件被修改了，会自动刷新浏览器。这样，当我们写代码时，要想看到最新的结果，就不必每次去刷新页面。

npm install -g lite-server

3. 配置tsc编译器

3.1. 创建一个工程

在命令行下运行：

mkdir TypeScriptTodo

cd TypeScriptTodo

启动 Visual Studio Code, 点击菜单 File->Open...，选择刚刚创建的目录，点击Open按钮。

3.2. 创建index.html

<!doctype html>
<html lang="en">
<head>
<title>TypeScript Todo App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container">
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

这只是一个简单的html框架。第10行是最重要的，那是我们程序的入口。

3.3. 使用tsc编译

创建 app.ts 文件。

在命令行下运行：

tsc app.ts

该命令没有任何输出，但会生成 app.js 文件。

3.4. 使用tsc监听

tsc -w app.ts

当app.ts文件变化时，自动编译。

在app.ts文件中输入：

var todo: string = "Pick up drycleaning";

保存文件。app.js 中会出现：

var todo = "Pick up drycleaning";

3.5. 使用TypeScript 配置文件

在工程目录下创建 tsconfig.json，它是标准的json文件。

打开该文件，输入：

{

}

在括号中，同时按 ctrl 和空格键，会出来下来列表，列表中都是配置选项，选择 compilerOptions.

再次按 ctrl - space，选择 target，它自动会填充 "es3"。

{
"compilerOptions": {
"target": "es3"
}
}

这是tsc编译输出的js版本。把它改成 es5。

回到命令行，运行:

tsc -w

这次不用指定监听哪个文件，有了tsconfig.json，tsc会监听工程目录/子目录下的所有ts文件，并自动编译。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript typescript mobile

相关文章推荐

新的分享

章节导航