xcatliu / typescript-tutorial

TypeScript 入门教程

next
introduction/README.md

TypeScript 入门教程

从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。

关于本书

• 在线阅读
• GitHub 地址
• 作者：xcatliu
• 本网站使用 Pagic 构建

本书是作者在学习 TypeScript 后整理的学习笔记。

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

• 发现文章内容有问题，可以直接在页面下方评论
• 对项目的建议，可以提交 issue 向作者反馈
• 欢迎直接提交 pull-request 参与贡献

为什么要写本书

TypeScript 虽然有官方手册及其非官方中文版，但是它每一章都希望能详尽的描述一个概念，导致前面的章节就会包含很多后面才会学习到的内容，而有些本该一开始就了解的基础知识却在后面才会涉及。如果是初学者，可能需要阅读多次才能理解。所以它更适合用来查阅，而不是学习。

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

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

关于 TypeScript

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 开发的 Angular 从 2.0 开始就使用了 TypeScript 作为开发语言，Vue 3.0 也使用 TypeScript 进行了重构。

适合人群

本书适合以下人群

• 熟悉 JavaScript，至少阅读过一遍《JavaScript 高级程序设计》
• 了解 ES6，推荐阅读 ECMAScript 6 入门
• 了解 Node.js，会用 npm 安装及使用一些工具
• 想了解 TypeScript 或者想对 TypeScript 有更深的理解

本书不适合以下人群

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

评价

《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统，完整而简洁，示例丰富，比官方文档更易读，非常适合作为初学者学习 TypeScript 的第一本书。

—— 阮一峰

版权许可

本书采用「保持署名—非商用」创意共享 4.0 许可证。

只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。

详细的法律条文请参见创意共享网站。

相关资料

• TypeScript 官网
• Handbook（中文版）
• ECMAScript 6 入门

typescript-tutorial's Issues

document.body.innerHTML 改成 console.log

@wangshijun

https://ts.xcatliu.com/introduction/hello-typescript.html#comment-3112236778

例子的最后1行是不是改成 console.log 更好？生成的文件直接用 node 执行，会有问题，可能会让人迷惑。

能否提供付费答疑？

我是 https://wen-ma.com 的开发者，请问是否愿意提供付费答疑？

读者学习过程中遇到困难，向您支付50元，获得您20分钟的一对一帮助。

您可将网站的 定向提问链接 放在README.md中，方便读者直接对您提问。

我也不知道这算不算是广告，如有打扰请批评指正。

某章节出现不明「?」, 是否为特定意思?

what
出现不明「?」

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

where
https://github.com/xcatliu/typescript-tutorial/blob/master/introduction/hello-typescript.md 最后一行

环境

• chrome最新
• 时间: 2017_1_16

关于「代码检查」章节

「使用 AlloyTeam 的 TSLint 配置」之下的「安装之后修改 tsconfig.json 即可」
是否是「安装之后修改 tslint.json 即可」

delete this

如图

求问这是什么主题

rt，我在npm上找了一些。。发现不大对，官网新版又不会用

implements 一个 interface 之后，无法获得 interface 的类型提示

interface Foo {
    a(s: string): string;
}

class Bar implements Foo {
    a(s) {
        return s;
    }
}

let b = new Bar();

这里 s 是 any 类型，预期是 string 类型。

disqus 免费版无法去掉广告了，需要切换为其他评论框

接口类型合并，合并后的接口怎么使用？

https://ts.xcatliu.com/advanced/declaration-merging

接口中方法的合并，与函数的合并一样：

interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}

相当于：

interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

合并后的接口应该怎么使用？我自己尝试用，一直不对。🧐

interface Animal {
  walk(num: number): string;
}
interface Animal {
  walk(num: string): number;
}
// 相当于：
// interface Animal {
//   walk(num: number): string;
//   walk(num: string): number;
// }
// 接口合并了但是不会用合并后的接口🤔🤔🤔
// const dog: Animal = {
//   walk(num: string | number): string {
//     return 10;
//   }
// };

本次更新去掉了disqus吗

翻到下一章赶上作者更新到新版gitbook，发现DISQUS不见了

原始数据类型关于undefined与null那块的反馈。

在实际使用中均会出现错误。

为什么要用接口来定义函数呢？

下面两种方法不是相等的吗？ 那为什么 会有第一种写法呢？ 第一种方法优势是什么？ 谢谢

####################################################
Method 1
####################################################
interface CreateArrayFunc {
(length: number, value: T): Array;
}

let createArray: CreateArrayFunc;
createArray = function(length: number, value: T): Array {
let result = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}

####################################################
Method 2
####################################################
let createArray = function(length: number, value: T): Array {
let result = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}

关于泛型约束，多个类型参数之间也可以互相约束

function copyFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = (<T>source)[id];
    }
    return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };

copyFields(x, { b: 10, d: 20 });

不是太懂，能不能在补充一点谢谢

请添加装饰器章节

let num: number = undefined;会报错

文档中说

但是在vscode中书写的时候会提示错误，如下：

请问下是什么原因

null,undefined类型可以互相赋值。

例如：
let a:undefined = null;
let b:null = undefined;
静态检查不会报错，是否适合undefined类型可以赋值：null or undefined。 .同理null类型也是一样。
原文描述：

An in-range update of eslint-config-alloy is breaking the build 🚨

The devDependency eslint-config-alloy was updated from 2.0.5 to 2.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-config-alloy is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 12 commits.

• fb0cc7c 2.1.0
• 559b96f 升级 eslint, typescript-eslint, husky, rimraf
• 92eafb9 Merge pull request #99 from AlloyTeam/dependabot/npm_and_yarn/mixin-deep-1.3.2
• dedd0ae Bump mixin-deep from 1.3.1 to 1.3.2
• 9062bb3 Merge pull request #98 from AlloyTeam/dependabot/npm_and_yarn/eslint-utils-1.4.2
• 2317ebe Update docs, fix #92
• 3320b93 Bump eslint-utils from 1.3.1 to 1.4.2
• 548b5ad Add escape-xml
• 2abf0ba Update insert-tag
• c2a23ba Merge pull request #91 from AlloyTeam/dependabot/npm_and_yarn/lodash-4.17.14
• 019606f Bump lodash from 4.17.11 to 4.17.14
• 84a1284 Update comments

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

建议增加中文 markdown 格式校验的 ci

中文规范是阮老师的写作规范：https://github.com/ruanyf/document-style-guide

检查工具是我现在在维护的：lint-md

我测试了一下：

如果 ok，我可以发个 pr！

项目中使用到了ts吗？

看完了，写的很好。想问下作者，项目中使用到了ts吗？哪些场景下使用的。有没有demo学习一下

声明文件中的一些小问题

在声明文件-》什么是声明文件，
有这么一句话：
假如仍然无法解析，那么可以检查下 tsconfig.json 中的 files、include 和 exclude 配置，确保其包含了 jQuery.d.ts 文件。
这个例子我不管怎么配置 tsconfig.json ，在使用tsc XXX 在shell中运行的时候都会报错，说找不到对应的函数等等。（以及后面的全局变量的例子都是一样的）。能否给出一个可以完整通过编译的例子包括配置，这样可能会更有利于理解。

大佬，请教个问题，找不到地方询问只好来这里，望见谅！

import {Context} from 'koa';  // 引入类型定义
router.get('/api', (ctx: Context) => {  // 使用类型定义
  // xxx
});

但是eslint还是报错

'Context' is defined but never used  no-unused-vars

我不想关闭这条rule，请问怎么解决这个问题？

Global全局变量

你好

在js里想弄个全局变量一般直接global.foo = 'hello'; 使用的时候直接this.bar(foo);（这里假设是react native开发）
想重写全局方法会直接 global.console = ()=>{ alert('hello') } 使用的时候直接 console( );

想问下用了ts的话应该怎样做？

关于接口任意属性的一点疑问，对象属性不可以是联合类型(string | number)的吗？

interface Person { name: string; age?: number; [propName: string]: string; }

上面这个是示例。改成如下:

interface Person { name: string; age?: number; [propName:number|string]: number | string; }
就会报错：error TS1023: An index signature parameter type must be 'string' or 'number'.
看报错信息提示 类型必须是string或者 number。
使用联合类型方式就不可以？

电子书原先是不是有评论功能，现在没有了吗？

元组章节的问题

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
​
xcatliu[0].slice(1);
xcatliu[1].toFixed(2);
这一段代码会实际上会报Variable 'xcatliu' is used before being assigned.

An in-range update of @typescript-eslint/eslint-plugin is breaking the build 🚨

The devDependency @typescript-eslint/eslint-plugin was updated from 1.9.0 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/eslint-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

“数组的类型”章节中“用接口表示数组”的一点建议

建议：
interface NumberArray {
[index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

我觉得接口表示的算是一种字面上类数组的结构，这一结构不能用数组的方法遍历，也不具有数组的属性，应该不算是数组。

元组篇章的初始化问题

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;

xcatliu[0].slice(1);
xcatliu[1].toFixed(2);

这段代码经过编译后，是这样的。
var xcatliu;
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
xcatliu[0].slice(1);
xcatliu[1].toFixed(2);
由于并没有把xcatliu改成数组类型，所以无法使用[0]和[1]对其进行赋值，无法找到属性，会报错。望修改。
顺便：作者能给个联系方式吗？

关于泛型的的描述

博客原文地址

根据官方网站的描述以及结合底下的例子

我认为应该这样改一下：

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，
- 而在使用的时候再指定类型的一种特性
+ 而是在使用时才能确定类型，并保证传入的参数类型与返回值类型相同的一种特性。

‘变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型’这个说法应该有问题

这个说法应该有问题：
应该是：变量如果在声明的时候，未指定其类型也没有赋值，那么它会被识别为任意值类型

你说的情况可以类型推断出来，所以也会报错

枚举的概念在 C/C++ 中就有了

https://github.com/xcatliu/typescript-tutorial/blame/master/advanced/enum.md#L227

枚举类型的概念来源于 C#。

https://msdn.microsoft.com/en-us/library/whbyts4t.aspx

tuple一章实际会报错

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;

这里实际会报错【在赋值前使用了变量“xcatliu”。】
tsc -v 3.2.2

越界的元素中对越界元素的报错定义也有所不同了：

let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];
xcatliu.push('http://xcatliu.com/');
xcatliu.push(true);

类型“true”的参数不能赋给类型“string | number”的参数。新版的ts没有Type 'boolean' is not assignable to type 'number'.这样的对应了。

TypeSearch已使用https，文中为http

https://ts.xcatliu.com/basics/declaration-files
TypeSearch已使用https，文中为http

工程->代码检测部分，typescript-eslint-parser 报错

报错信息如下：

Error: Failed to load parser 'typescript-eslint-parser' declared in '.eslintrc': Cannot find module 'eslint/lib/util/traverser'

�原仓库 貌似不维护了，改成了 @typescript-eslint/parser 仓库

函数重载疑问

function reverse(rest: number): number;
function reverse(rest: string): string;

function reverse (rest: number | string):number|string {
    if (typeof rest === 'number') {
       return Number(rest.toString().split('').reverse().join(''));
    }
    else if (typeof rest === 'string') {
        return rest.split('').reverse().join('');
    }
}
console.log(reverse(123))

在最后一次reverse函数实现的时候, function reverse (rest: number | string):number|string {}
最后的 number|string出错

数组类型一章中可以对索引类型进行补充，毕竟字符串也可做数组索引

可索引的类型

与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap["daniel"]。 可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。 让我们看一个例子

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

上面例子里，我们定义了StringArray接口，它具有索引签名。 这个索引签名表示了当用number去索引StringArray时会得到string类型的返回值。

更新 eslint 章节

typescript-eslint-parser 已弃用，需要更新为 @typescript-eslint/parser

https://ts.xcatliu.com/打不开

文档最近版本不更新了么

文档最近版本不更新了么

根据任意值章节中未声明类型的变量板块进行代码编写报错

let something;
something = 'seven';
something = 7;
​
something.setName('Tom');
会报property 'setName' does not exist on type 'number'的错误，但是
let something: any;
something = 'seven';
something = 7;
​
something.setName('Tom');
就不会报错，想问一下是为什么

泛型约束 extends 报错

代码在文章中的位置：
进阶 - 泛型 - 泛型约束报错

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

报错Parsing error: Unexpected token, expected ","

字符串字面量类型

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}

handleEvent(document.getElementById('hello'), 'scroll'); // 没问题
在TypeSctipt 3.1.4中 会报错
Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.

126 handleEvent(document.getElementById('hello'), 'scroll'); // 没问题
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
用的vscode1.29

[ts] Module 'xxx' has no default export.

为什么引用一些模块的时候，会报如下错误？

import fs from 'fs';
// [ts] Module '"fs"' has no default export.

null不能赋值给number类型变量

看到教程说，可以把null和undefined赋值给number类型的变量。然后我去试了一下，结果出现警告了，
不能将类型“null”分配给类型“number”。
我typescript的版本是3.6.3

关于Class的描述

使用 ts-loader 报错：Module build failed: TypeError: loader._compiler.plugin is not a function

Webpack + ts-loader + HappyPack 报错：

Module build failed: TypeError: loader._compiler.plugin is not a function

拼写错误`enum.md`

手动赋值小节中

上面的例子中，递增到 3 的时候与前面的 Sun 的取值重复了，但是 TypeScript 并没有报错，导致 Days[3] 的值先是 "Sun"，而后又被 "Web" 覆盖了。编译的结果是：

其中Web应该改为Wed

An in-range update of eslint-config-alloy is breaking the build 🚨

The devDependency eslint-config-alloy was updated from 2.0.0-alpha.3 to 2.0.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-config-alloy is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 5 commits.

• 29a3205 2.0.0
• dd3321b 更新所有规则至最新版
• f030ad1 Finish all vue rules
• fd9a18f Downgrade vue-eslint-parser
• b34387a Update README.md

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

let num: number = undefined;会报错