Skip to content

Commit

Permalink
Complete introduction
Browse files Browse the repository at this point in the history
  • Loading branch information
xcatliu committed Jan 15, 2017
1 parent bcf06e7 commit 43a4961
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 105 deletions.
14 changes: 10 additions & 4 deletions README.md
Expand Up @@ -6,16 +6,15 @@
## 关于本书

- [在线阅读](https://ts.xcatliu.com/)(部署在 GitBook 上,需要翻墙)
- [在线阅读(GitHub 版)](basics/README.md)
- [在线阅读](https://ts.xcatliu.com/)(部署在 [GitBook](https://www.gitbook.com/book/xcatliu/typescript-tutorial/details) 上,需要翻墙)
- [在线阅读(GitHub 版)](introduction/README.md)
- [GitHub 地址][GitHub]
- 作者:[xcatliu](https://github.com/xcatliu/)

本书是作者在学习 [TypeScript] 后总结的入门教程。

随着对 TypeScript 理解的加深和 TypeScript 社区的发展,本书也会做出相应的更新,欢迎大家 [Star 收藏][GitHub]

- 在线版托管在 [GitBook](https://www.gitbook.com/book/xcatliu/typescript-tutorial/details)
- 发现文章内容有问题,可以直接在页面下方评论
- 对项目的建议,可以[提交 issue](https://github.com/xcatliu/typescript-tutorial/issues/new) 向作者反馈
- 欢迎直接提交 pull-request 参与贡献
Expand All @@ -26,6 +25,8 @@ TypeScript 虽然有[官方手册][Handbook]及其[非官方中文版][中文手

与官方手册不同,本书着重于从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript,希望能给大家一些帮助和启示。

由于一些知识点与官方手册重合度很高,本书会在相应章节推荐直接阅读中文手册。

## 关于 TypeScript

[TypeScript] 是 JavaScript 的一个超集,主要提供了**类型系统****对 ES6 的支持**,它由 Microsoft 开发,代码[开源于 GitHub](https://github.com/Microsoft/TypeScript) 上。
Expand All @@ -39,11 +40,12 @@ TypeScript 虽然有[官方手册][Handbook]及其[非官方中文版][中文手
- 熟悉 JavaScript,至少阅读过一遍[《JavaScript 高级程序设计》](https://book.douban.com/subject/10546125/)
- 了解 ES6,推荐阅读 [ECMAScript 6 入门]
- 了解 Node.js,会用 npm 安装及使用一些工具
- 想学习 TypeScript 或者想对 TypeScript 有更深的理解
- 想了解 TypeScript 或者想对 TypeScript 有更深的理解

本书**不适合**以下人群

- 没有系统学习过 JavaScript
- 已经能够很熟练的运用 TypeScript

## 版权许可

Expand All @@ -59,6 +61,10 @@ TypeScript 虽然有[官方手册][Handbook]及其[非官方中文版][中文手
- [Handbook] | [中文版][中文手册]
- [ECMAScript 6 入门]

---

- [下一章:简介](introduction/README.md)

[GitHub]: https://github.com/xcatliu/typescript-tutorial
[TypeScript]: http://www.typescriptlang.org/
[Handbook]: http://www.typescriptlang.org/docs/handbook/basic-types.html
Expand Down
4 changes: 2 additions & 2 deletions SUMMARY.md
Expand Up @@ -3,8 +3,8 @@
- [前言](README.md)
- [简介](introduction/README.md)
- [什么是 TypeScript](introduction/what-is-typescript.md)
- 安装 TypeScript(未完成)
- Helo World(未完成)
- [安装 TypeScript](introduction/get-typescript.md)
- [Hello TypeScript](introduction/hello-typescript.md)
- [基础](basics/README.md)
- [原始数据类型](basics/primitive-data-types.md)
- [任意值(Any)](basics/any.md)
Expand Down
Empty file added advanced/README.md
Empty file.
14 changes: 14 additions & 0 deletions advanced/never.md
@@ -0,0 +1,14 @@
# Never 类型

`never` 表示永远不存在值的类型,一般用于错误处理函数:

```ts
// 返回 never 的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
```

## 参考

- [Handbook - Basic Types # Never](http://www.typescriptlang.org/docs/handbook/basic-types.html#never) | [中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Basic%20Types.html#never)
6 changes: 5 additions & 1 deletion examples/playground/index.js
@@ -1 +1,5 @@
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
function sayHello(person) {
return 'Hello, ' + person;
}
var user = [0, 1, 2];
document.body.innerHTML = sayHello(user);
10 changes: 4 additions & 6 deletions examples/playground/index.ts
@@ -1,8 +1,6 @@
declare const enum Directions {
Up,
Down,
Left,
Right
function sayHello(person: string) {
return 'Hello, ' + person;
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
let user = [0, 1, 2];
document.body.innerHTML = sayHello(user);
11 changes: 8 additions & 3 deletions introduction/README.md
@@ -1,7 +1,12 @@
# 简介

本部分介绍了在学习 TypeScript 之前需要了解的知识,具体包括
本部分介绍了在学习 TypeScript 之前需要了解的知识,具体内容包括

- [什么是 TypeScript](what-is-typescript.md)
- [安装 TypeScript]
- [Hello World]
- [安装 TypeScript](get-typescript.md)
- [Hello TypeScript](hello-typescript.md)

---

- [上一章:前言](../README.md)
- [下一章:什么是 TypeScript](what-is-typescript.md)
43 changes: 43 additions & 0 deletions introduction/get-typescript.md
@@ -0,0 +1,43 @@
# 安装 TypeScript

TypeScript 的命令行工具安装方法如下:

```shell
npm install -g typescript
```

安装完成之后,就有了 `tsc` 命令。编译一个 TypeScript 文件很简单:

```shell
tsc hello.ts
```

我们约定使用 TypeScript 编写的文件以 `.ts` 为后缀。

## 编辑器

TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。

主流的编辑器都支持 TypeScript,这里我推荐使用 [Visual Studio Code](https://code.visualstudio.com/)

它是一款开源,跨终端的轻量级编辑器,内置了 TypeScript 支持。

另外它本身也是[用 TypeScript 编写的](https://github.com/Microsoft/vscode/)

下载安装:https://code.visualstudio.com/

获取其他编辑器或 IDE 对 TypeScript 的支持:

- [Sublime Text](https://github.com/Microsoft/TypeScript-Sublime-Plugin)
- [Atom](https://atom.io/packages/atom-typescript)
- [WebStorm](https://www.jetbrains.com/webstorm/)
- [Vim](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support#vim)
- [Emacs](https://github.com/ananthakumaran/tide)
- [Eclipse](https://github.com/palantir/eclipse-typescript)
- [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593)
- [Visual Studio 2013](https://www.microsoft.com/en-us/download/details.aspx?id=48739)

---

- [上一章:什么是 TypeScript](what-is-typescript.md)
- [下一章:Hello TypeScript](hello-typescript.md)
89 changes: 0 additions & 89 deletions introduction/greeter.md

This file was deleted.

74 changes: 74 additions & 0 deletions introduction/hello-typescript.md
@@ -0,0 +1,74 @@
# Hello TypeScript

我们从一个简单的例子开始。

将以下代码复制到 `hello.ts` 中:

```ts
function sayHello(person: string) {
return 'Hello, ' + person;
}

let user = 'Xcat Liu';
document.body.innerHTML = sayHello(user);
```

然后执行

```shell
tsc hello.ts
```

这时候会生成一个编译好的文件 `hello.js`

```js
function sayHello(person) {
return 'Hello, ' + person;
}
var user = 'Xcat Liu';
document.body.innerHTML = sayHello(user);
```

TypeScript 中,使用 `:` 指定变量的类型,`:` 的前后有没有空格都可以。

上述例子中,我们用 `:` 指定 `person` 参数类型为 `string`。但是编译为 js 之后,并没有什么检查的代码被插入进来。

**TypeScript 只会进行静态检查,如果发现有错误,编译的时候就会报错。**

> Tip: `let` 是 ES6 中的关键字,和 `var` 类似,用于定义一个局部变量,可以参阅 [let 和 const 命令](http://es6.ruanyifeng.com/#docs/let)
下面尝试把这段代码编译一下:

```ts
function sayHello(person: string) {
return 'Hello, ' + person;
}

let user = [0, 1, 2];
document.body.innerHTML = sayHello(user);
```

编辑器中会提示错误,编译的时候也会出错:

```shell
index.ts(6,36): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
```

但是还是生成了 js 文件:

```js
function sayHello(person) {
return 'Hello, ' + person;
}
var user = [0, 1, 2];
document.body.innerHTML = sayHello(user);
```

TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。

如果要在报错的时候终止 js 文件的生成,可以在 `tsconfig.json` 中配置 ??? 即可。关于 `tsconfig.json`,请参阅《???》一章。

---

- [上一章:安装 TypeScript](get-typescript.md)
- [下一章:基础](../basics/README.md)
5 changes: 5 additions & 0 deletions introduction/what-is-typescript.md
Expand Up @@ -49,3 +49,8 @@
大家可以根据自己团队和项目的情况判断是否需要使用 TypeScript。

[TypeScript]: http://www.typescriptlang.org/

---

- [上一章:简介](README.md)
- [下一章:安装 TypeScript](get-typescript.md)

0 comments on commit 43a4961

Please sign in to comment.