Gowhich

项目实践仓库

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.6

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

1

npm install -D ts-node

后面自己在练习的时候可以这样使用

1

npx ts-node src/learn_basic_types.ts

1

npx ts-node 脚本路径

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口初探

下面通过一个简单示例来观察接口是如何工作的：

1
2
3
4
5
6

function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

运行后接到的结果如下

1

Size 10 Object

类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。 然而，有些时候TypeScript却并不会这么宽松，示例演示如下。下面我们重写上面的例子，这次使用接口来描述：必须包含一个label属性且类型为string：

1
2
3
4
5
6
7
8
9
10

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

运行后接到的结果如下

1

Size 10 Object

LabelledValue接口就好比一个名字，用来描述上面例子里的要求。 它代表了有一个 label属性且类型为string的对象。 需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。 只要传入的对象满足上面提到的必要条件，那么它就是被允许的。

还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

本实例结束实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.7

我们在做什么？

我们将从2018年7月29日星期日的UTC时间22:00开始逐步推出更改DNS记录，以指向新的IP地址。
预计两周后，即8月15日，所有客户都将完成推出。

此迁移不会有任何停机时间，并且由于此迁移，大多数人不必做任何不同的事情。

我们为什么要这样做呢？

Bitbucket近年来取得了惊人的增长，数百万用户在Bitbucket工作以构建更好的软件。
作为其中的一部分，我们正计划进行云迁移，这将允许我们：

1. 利用云中的更多自动扩展功能
2. 轻松添加/删除网络服务容量
3. 与我们的Atlassian PaaS平台共同定位，该平台支持Jira，Confluence，StatusPage和其他Atlassian产品
4. 扩展Bitbucket的基础设施以满足未来需求
5. 我们新的云IP地址空间以及一些底层网络改进将使某些用户的响应时间明显加快，具体取决于位置
6. 同样重要的是，这些变化使我们更容易改善上游网络连接和负载平衡

这会对你有什么影响？

大多数用户不必为此迁移做任何特殊操作。
您的DNS服务器应在迁移后的几分钟内获取新IP，您的系统应立即开始使用新IP。
不过，为了以防万一，我们将保留旧的IP运行几周。

防火墙考虑

如果您使用防火墙控制入站或出站访问，则可能需要更新配置。
请立即将这些新IP列入白名单;
迁移完成后，您应该能够删除旧的IP。

bitbucket.org，bitbucket.com，api.bitbucket.org，bitbucket.io，bytebucket.org，altssh.bitbucket.org的新目标IP地址将是：

IPv4: 18.205.93.0/25 and 13.52.5.0/25

IPv6: 2406:da00:ff00::0/96*

Note: 此IPv6范围包括Atlassian不必拥有的子网，但是匹配* all * Bitbucket IPv6 Atlassian IP的最长子网。
我们将在https://confluence.atlassian.com/bitbucket/what-are-the-bitbucket-cloud-ip-addresses-i-should-use-to-configure-my-corporate上发布确切的IPv6地址列表
-firewall-343343385.html很快。

根据https://confluence.atlassian.com/bitbucket/manage-webhooks-735643732.html，Webhooks IP将保持不变

SSH考虑因素

我们服务器的SSH密钥没有变化，因此大多数SSH客户端将继续工作而不会中断。
但是，少数用户在推送或拉过SSH时可能会看到与此类似的警告：

1

Warning: the RSA host key for 'bitbucket.org' differs from the key for the IP address '18.205.93.1'

警告消息还会告诉您~/.ssh/known_hosts中哪些行需要更改。
在您喜欢的编辑器中打开该文件，删除或注释掉这些行，然后重试您的推送或拉动。

其他资源

• Atlassian Public IP范围为JSON: https://ip-ranges.atlassian.com/ (将使用新地址进行更新，作为新IP推出的一部分)
• https://confluence.atlassian.com/bitbucket/what-are-the-bitbucket-cloud-ip-addresses-i-should-use-to-configure-my-corporate-firewall-343343385.html (将使用新地址进行更新，作为新IP推出的一部分)

项目实践仓库

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.5

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

1

npm install -D ts-node

后面自己在练习的时候可以这样使用

1

npx ts-node src/learn_basic_types.ts

1

npx ts-node 脚本路径

变量声明 - 解构

Another TypeScript已经可以解析其它 ECMAScript 2015 特性了。 完整列表请参见 the article on the Mozilla Developer Network。 这里将给出一个简短的概述。

解构数组

最简单的解构莫过于数组的解构赋值了：

1
2
3
4

let input = [1, 2];
let [first, second] = input;
console.log(first);
console.log(second);

运行后将得到如下输出

1
2

1
2

这创建了2个命名变量 first 和 second。 相当于使用了索引，但更为方便：

1
2
3
4
5

first = input[0];
second = input[1];

console.log(first);
console.log(second);

运行后将得到如下输出

1
2

1
2

解构作用于已声明的变量会更好：

1

[first, second] = [second, first];

运行后将得到如下输出

1
2

2
1

作用于函数参数：

1
2
3
4
5

function f6([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f6([1,2]);

运行后将得到如下输出

1
2

1
2

你可以在数组里使用…语法创建剩余变量：

1
2
3

let [one, ...rest] = [1, 2, 3, 4];
console.log(one);
console.log(rest);

运行后将得到如下输出

1
2

1
[ 2, 3, 4 ]

当然，由于是JavaScript, 你可以忽略你不关心的尾随元素：

1
2

let [number_one] = [1, 2, 3, 4];
console.log(number_one);

运行后将得到如下输出

1

1

或其它元素：

1

let [, second, , fourth] = [1, 2, 3, 4];

对象解构

对象也可以进行解构：

1
2
3
4
5
6
7

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;
console.log(a, b);

运行后将得到如下输出

1

foo 12

这通过 o.a and o.b 创建了 a 和 b 。 注意，如果你不需要 c 你可以忽略它。

就像数组解构，你可以用没有声明的赋值：

1
2

({ a, b } = { a: "baz", b: 101 });
console.log(a, b);

运行后将得到如下输出

1

baz 101

注意，我们需要用括号将它括起来，因为Javascript通常会将以 { 起始的语句解析为一个块。

你可以在对象里使用…语法创建剩余变量：

1
2
3

let { x, ...passthrough } = m;
let total = passthrough.y + passthrough.z.length;
console.log(x, total, passthrough)

运行后将得到如下输出

1

a 13 { y: 12, z: 'b' }

属性重命名

你也可以给属性以不同的名字：

1

let { a: newName1, b: newName2 } = o;

这里的语法开始变得混乱。 你可以将 a: newName1 读做 “a 作为 newName1”。 方向是从左到右，好像你写成了以下样子：

1
2

let newName1 = o.a;
let newName2 = o.b;

令人困惑的是，这里的冒号不是指示类型的。 如果你想指定它的类型， 仍然需要在其后写上完整的模式。

1

let {a, b}: {a: string, b: number} = o;

默认值

默认值可以让你在属性为 undefined 时使用缺省值：

1
2
3

function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}

现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。

函数声明

解构也能用于函数声明。 看以下简单的情况：

1
2
3
4

type C = { a: string, b?: number }
function f7({ a, b }: C): void {
    // ...
}

但是，通常情况下更多的是指定默认值，解构默认值有些棘手。 首先，你需要在默认值之前设置其格式。

1
2
3
4
5

function f8({ a, b } = { a: "hello", b: 0 }): void {
    // ...
    console.log(a, b);
}
f8();

运行后将得到如下输出

1

hello 0

上面的代码是一个类型推断的例子

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。 要知道 C 的定义有一个 b 可选属性：

1
2
3
4
5
6

function f({ a, b = 0 } = { a: "" }): void {
    // ...
}
f({ a: "yes" }); // 正常, 默认 b = 0
f(); // 正常, 默认传参 {a: ""}, 默认 b = 0
f({}); // 报错, 如果只传递一个参数的话'a'是必须的传递的

要小心使用解构。 从前面的例子可以看出，就算是最简单的解构表达式也是难以理解的。 尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。 解构表达式要尽量保持小而简单。 你自己也可以直接使用解构将会生成的赋值表达式。

展开

展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。 例如：

1
2
3
4

let a_one = [1, 2];
let a_two = [3, 4];
let bothPlus = [0, ...a_one, ...a_two, 5];
console.log(bothPlus);

运行后将得到如下输出

1

[ 0, 1, 2, 3, 4, 5 ]

这会令bothPlus的值为[0, 1, 2, 3, 4, 5]。 展开操作创建了 first和second的一份浅拷贝。 它们不会被展开操作所改变。

你还可以展开对象：

1
2
3

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
console.log(search)

运行后将得到如下输出

1

{ food: 'rich', price: '$$', ambiance: 'noisy' }

search的值为{ food: “rich”, price: “$$”, ambiance: “noisy” }。 对象的展开比数组的展开要复杂的多。 像数组展开一样，它是从左至右进行处理，但结果仍为对象。这就意味着出现在展开对象后面的属性会覆盖前面的属性。 因此，如果我们修改上面的例子，在结尾处进行展开的话：

那么，defaults里的food属性会重写food: “rich”，在这里这并不是我们想要的结果。

对象展开还有其它一些意想不到的限制。 首先，它仅包含对象 自身的可枚举属性。 大体上是说当你展开一个对象实例时，你会丢失其方法：

1
2
3
4
5
6
7
8
9

class C {
  p = 12;
  m() {
  }
}
let c = new C();
let clone = { ...c };
clone.p; // 正常调用
clone.m(); // 调用失败

其次，TypeScript编译器不允许展开泛型函数上的类型参数。 这个特性会在TypeScript的未来版本中考虑实现。

本实例结束实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.6

项目实践仓库

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.4

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

1

npm install -D ts-node

后面自己在练习的时候可以这样使用

1

npx ts-node src/learn_basic_types.ts

1

npx ts-node 脚本路径

变量声明

let 声明

现在你已经知道了var存在一些问题，这恰好说明了为什么用let语句来声明变量。 除了名字不同外， let与var的写法一致。

主要的区别不在语法上，而是语义，我们接下来会深入研究。

块作用域

当用let声明一个变量，它使用的是词法作用域或块作用域。 不同于使用 var声明的变量那样可以在包含它们的函数外访问，块作用域变量在包含它们的块或for循环之外是不能访问的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function f(input: boolean) {
    let a = 100;

    if (input) {
        // Still okay to reference 'a'
        let b = a + 1;
        return b;
    }

    // Error: 'b' doesn't exist here
    return b;
}
console.log(f3(true));
console.log(f3(false));

运行后结果类似如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

101
/Users/durban/nodejs/typescript_demo/dist/variable_declarations.js:58
    return b;
    ^

ReferenceError: b is not defined
    at f3 (/Users/durban/nodejs/typescript_demo/dist/variable_declarations.js:58:5)
    at Object.<anonymous> (/Users/durban/nodejs/typescript_demo/dist/variable_declarations.js:61:13)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

这里我们定义了2个变量a和b。 a的作用域是f函数体内，而b的作用域是if语句块里。

在catch语句里声明的变量也具有同样的作用域规则。

1
2
3
4
5
6
7
8
9

try {
    throw "oh no!";
}
catch (e) {
    console.log("Oh well.");
}

// Error: 'e' doesn't exist here
console.log(e);

运行后结果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Oh well.
/Users/durban/nodejs/typescript_demo/dist/variable_declarations.js:69
console.log(e);
            ^

ReferenceError: e is not defined
    at Object.<anonymous> (/Users/durban/nodejs/typescript_demo/dist/variable_declarations.js:69:13)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

拥有块级作用域的变量的另一个特点是，它们不能在被声明之前读或写。 虽然这些变量始终“存在”于它们的作用域里，但在直到声明它的代码之前的区域都属于 暂时性死区。 它只是用来说明我们不能在 let语句之前访问它们，幸运的是TypeScript可以告诉我们这些信息。

1
2

a++; // illegal to use 'a' before it's declared;
let a;

注意一点，我们仍然可以在一个拥有块作用域变量被声明前获取它。 只是我们不能在变量声明前去调用那个函数。 如果生成代码目标为ES2015，现代的运行时会抛出一个错误；然而，现今TypeScript是不会报错的。

1
2
3
4
5
6
7
8
9
10

function foo() {
    // okay to capture 'a'
    return a;
}

// 不能在'a'被声明前调用'foo'
// 运行时应该抛出错误
foo();

let a;

关于暂时性死区的更多信息，查看这里Mozilla Developer Network.

重定义及屏蔽

我们提过使用var声明时，它不在乎你声明多少次；你只会得到1个。示例如下

1
2
3
4
5
6
7
8

function f(x) {
    var x;
    var x;

    if (true) {
        var x;
    }
}

在上面的例子里，所有x的声明实际上都引用一个相同的x，并且这是完全有效的代码。 这经常会成为bug的来源。 好的是， let声明就不会这么宽松了。示例如下

1
2

let x = 10;
let x = 20; // 错误，不能在1个作用域里多次声明`x`

并不是要求两个均是块级作用域的声明TypeScript才会给出一个错误的警告。

1
2
3
4
5
6
7
8

function f(x) {
    let x = 100; // error: interferes with parameter declaration
}

function g() {
    let x = 100;
    var x = 100; // error: can't have both declarations of 'x'
}

并不是说块级作用域变量不能用函数作用域变量来声明。 而是块级作用域变量需要在明显不同的块里声明。

1
2
3
4
5
6
7
8
9
10
11
12

function f(condition, x) {
    if (condition) {
        let x = 100;
        return x;
    }

    return x;
}

console.log("========f4=========\n");
console.log(f4(false, 0)); // returns 0
console.log(f4(true, 0));  // returns 100

运行后输出如下结果

1
2
3
4

========f4=========

0
100

在一个嵌套作用域里引入一个新名字的行为称做屏蔽。 它是一把双刃剑，它可能会不小心地引入新问题，同时也可能会解决一些错误。 例如，假设我们现在用 let重写之前的sumMatrix函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function sumMatrix2(matrix: number[][]) {
    let sum = 0;
    for (let i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (let i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}

console.log("========== sumMatrix2 \n");
console.log(sumMatrix2([[1],[2]]))

运行后输出如下结果

1
2
3

========== sumMatrix2

3

这个版本的循环能得到正确的结果，因为内层循环的i可以屏蔽掉外层循环的i。

通常来讲应该避免使用屏蔽，因为我们需要写出清晰的代码。 同时也有些场景适合利用它，你需要好好打算一下。

块级作用域变量的获取

在我们最初谈及获取用var声明的变量时，我们简略地探究了一下在获取到了变量之后它的行为是怎样的。 直观地讲，每次进入一个作用域时，它创建了一个变量的 环境。 就算作用域内代码已经执行完毕，这个环境与其捕获的变量依然存在。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function theCityThatAlwaysSleeps() {
    let getCity;

    if (true) {
        let city = "Seattle";
        getCity = function () {
            return city;
        }
    }

    return getCity();
}
console.log('====== theCityThatAlwaysSleeps ======');
console.log(theCityThatAlwaysSleeps());

运行后得到的结果如下

1
2

====== theCityThatAlwaysSleeps ======
Seattle

因为我们已经在city的环境里获取到了city，所以就算if语句执行结束后我们仍然可以访问它。

回想一下前面setTimeout的例子，我们最后需要使用立即执行的函数表达式来获取每次for循环迭代里的状态。 实际上，我们做的是为获取到的变量创建了一个新的变量环境。 这样做挺痛苦的，但是幸运的是，你不必在TypeScript里这样做了。

当let声明出现在循环体里时拥有完全不同的行为。 不仅是在循环里引入了一个新的变量环境，而是针对 每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事，所以在 setTimeout例子里我们仅使用let声明就可以了。

1
2
3

for (let i = 0; i < 10 ; i++) {
    setTimeout(function() {console.log(i); }, 100 * i);
}

会输出与预料一致的结果：

1
2
3
4
5
6
7
8
9
10

0
1
2
3
4
5
6
7
8
9

const 声明

const 声明是声明变量的另一种方式。

1

const numLivesForCat = 9;

它们与let声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。 换句话说，它们拥有与 let相同的作用域规则，但是不能对它们重新赋值。这很好理解，它们引用的值是不可变的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const numLivesForCat = 9;
const kitty = {
    name: "Aurora",
    numLives: numLivesForCat,
}

// Error
// kitty = {
//     name: "Danielle",
//     numLives: numLivesForCat
// };

// all "okay"
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;

除非你使用特殊的方法去避免，实际上const变量的内部状态是可修改的。 幸运的是，TypeScript允许你将对象的成员设置成只读的。

let vs. const

现在我们有两种作用域相似的声明方式，我们自然会问到底应该使用哪个。 与大多数泛泛的问题一样，答案是：依情况而定。

使用最小特权原则，所有变量除了你计划去修改的都应该使用const。 基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用 const也可以让我们更容易的推测数据的流动。

本实例结束实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.5

项目实践仓库

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.3

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

1

npm install -D ts-node

后面自己在练习的时候可以这样使用

1

npx ts-node src/learn_basic_types.ts

1

npx ts-node 脚本路径

变量声明

let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。

因为TypeScript是JavaScript的超集，所以它本身就支持let和const。 下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替 var。

如果你之前使用JavaScript时没有特别在意，那么这节内容会唤起你的回忆。 如果你已经对 var声明的怪异之处了如指掌，那么可以了解加深下记忆。

var 声明

一直以来我们都是通过var关键字定义JavaScript变量。

1

var a = 10;

大家都能理解，这里定义了一个名为a值为10的变量。我们也可以在函数内部定义变量：

1
2
3
4
5

function f() {
    var message = "Hello, world!";

    return message;
}

并且我们也可以在其它函数内部访问相同的变量。

1
2
3
4
5
6
7
8
9
10

function f() {
    var a = 10;
    return function g() {
        var b = a + 1;
        return b;
    }
}

var g = f();
console.log(g());

运行后得到的结果如下

1

11

上面的例子里，g可以获取到f函数里定义的a变量。 每当 g被调用时，它都可以访问到f里的a变量。 即使当 g在f已经执行完后才被调用，它仍然可以访问及修改a。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function f() {
    var a = 1;

    a = 2;
    var b = g();
    a = 3;

    return b;

    function g() {
        return a;
    }
}

console.log(f());

运行后得到的结果如下

1

2

作用域规则

对于熟悉其它语言的人来说，var声明有些奇怪的作用域规则。 看下面的例子：

1
2
3
4
5
6
7
8
9
10

function f(shouldInitialize: boolean) {
    if (shouldInitialize) {
        var x = 10;
    }

    return x;
}

console.log(f(true));
console.log(f(false));

运行后得到的结果如下

1
2

10
undefined

有些读者可能要多看几遍这个例子。 变量 x是定义在*if语句里面*，但是我们却可以在语句的外面访问它。 这是因为 var声明可以在包含它的函数，模块，命名空间或全局作用域内部任何位置被访问，包含它的代码块对此没有什么影响。 有些人称此为 *var作用域或函数作用域*。 函数参数也使用函数作用域。这些作用域规则可能会引发一些错误。 其中之一就是，多次声明同一个变量并不会报错：

1
2
3
4
5
6
7
8
9
10
11

function sumMatrix(matrix: number[][]) {
    var sum = 0;
    for (var i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (var i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}

这里很容易看出一些问题，里层的for循环会覆盖变量i，因为所有i都引用相同的函数作用域内的变量。 有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引发无穷的麻烦。

捕获变量怪异之处

下面的代码会返回什么：

1
2
3

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}

介绍一下，setTimeout会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。

好吧，看一下结果：

1
2
3
4
5
6
7
8
9
10

10
10
10
10
10
10
10
10
10
10

很多JavaScript程序员对这种行为已经很熟悉了。 大多数人期望输出结果是这样：

1
2
3
4
5
6
7
8
9
10

0
1
2
3
4
5
6
7
8
9

还记得我们上面提到的捕获变量吗？

我们传给setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个i。

让我们花点时间思考一下这是为什么。 setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。 for循环结束后，i的值为10。 所以当函数被调用的时候，它会打印出 10！

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

1
2
3
4
5

for (var i = 0; i < 10; i++) {
    (function (i) {
        setTimeout(function () { console.log(i); }, 100 * i);
    })(i);
}

运行后的结果如下

1
2
3
4
5
6
7
8
9
10

0
1
2
3
4
5
6
7
8
9

这种奇怪的形式我们已经司空见惯了。 参数 i会覆盖for循环里的i，但是因为我们起了同样的名字，所以我们不用怎么改for循环体里的代码。

本实例结束实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.4

项目实践仓库

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.2

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

1

npm install -D ts-node

后面自己在练习的时候可以这样使用

1

npx ts-node src/learn_basic_types.ts

1

npx ts-node 脚本路径

基础类型简介

TypeScript支持与JavaScript几乎相同的数据类型，包括：数字，字符串，结构体，布尔值等。此外还提供了实用的枚举类型方便我们使用。

布尔值

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。

1
2
3

// 布尔值
let isDone: boolean = false;
console.log('isDone = ', isDone);

运行后结果如下

1

isDone =  false

数字

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

1
2
3
4
5
6
7
8
9
10

// 数字
let number1: number = 6;
let number2: number = 0xf00d;
let number3: number = 0b1010;
let number4: number = 0o744;

console.log('number1 = ', number1);
console.log('number2 = ', number2);
console.log('number3 = ', number3);
console.log('number4 = ', number4);

运行后结果如下

1
2
3
4

number1 =  6
number2 =  61453
number3 =  10
number4 =  484

字符串

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（”）或单引号（’）表示字符串。

1
2

let title: string = "gowhich"
console.log('title = ', title);

运行后结果如下

1

title =  gowhich

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（`），并且以${ expr }这种形式嵌入表达式

1
2
3
4
5
6
7
8

let firstName: string = "Durban";
let age: number = 42
let sentence: string = `==
Hello, 大家好，我是${firstName}

下个月我就${age}岁大了。
`;
console.log(sentence);

运行后结果如下

1
2
3
4

==
Hello, 大家好，我是Durban

下个月我就42岁大了。

数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

1

let list1: number[] = [1,2,3];

运行后结果如下

1

[ 1, 2, 3 ]

第二种方式是使用数组泛型，Array<元素类型>：

1

let list2: Array<number> = [1,2,3];

运行后结果如下

1

[ 1, 2, 3 ]

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

1
2
3
4
5
6
7

// 声明元组类型
let x: [string, number]
// 正确的初始化x
x = ["durban", 42]
// 错误的初始化
// x = [42， "durban"]
console.log('x = ', x);

运行后结果如下

1

x =  [ 'durban', 42 ]

当访问一个已知索引的元素，会得到正确的类型：

1
2

console.log(x[0].substr(1));
// console.log(x[1].substr(1)); // number 没有substr

当访问一个越界的元素，会使用联合类型替代：

1
2
3
4

x[3] = "world"
console.log(x[5])
console.log('x = ', x);
// x[6] = true // Error, 布尔不是(string | number)类型

运行后的结果如下

1
2

undefined
x =  [ 'durban', 42, <1 empty item>, 'world' ]

联合类型是高级主题，我们会在以后的分享中介绍。

枚举

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

1
2
3

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log('c = ', c)

运行后结果如下

1

c =  1

默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1开始编号：

1
2
3

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
console.log('c = ', c)

运行后结果如下

1

c =  2

或者，全部都采用手动赋值：

1
2
3

enum Color {Red = 1, Green = 4, Blue = 8}
let c: Color = Color.Green;
console.log('c = ', c)

运行后结果如下

1

c =  4

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

1
2
3

enum Color {Red = 1, Green = 4, Blue = 8}
let c: string = Color[4];
console.log('c = ', c)

运行后结果如下

1

c =  Green

Any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：

1
2
3

let notSure: any = 4
notSure = false
notSure = "A string"

在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object有相似的作用，就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法：

1
2
3
4
5
6

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：

1
2
3
4

let list: any[] = [1, true, 'durban'];
console.log(list[1])
list[1] = 100;
console.log(list[1])

运行后结果如下

1
2

true
100

Void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

1
2
3

function noReturn(params:string): void {
    alert("HaHa");
}

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

1
2

let unusable: void = undefined;
console.log('unusable = ', unusable);

运行后结果如下

1

unusable =  undefined

Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和void相似，它们的本身的类型用处不是很大：

1
2
3
4

let u: undefined = undefined
let n: null = null
n = undefined
u = null

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

然而，当你指定了–strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免 很多常见的问题。 也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。

注意：我们鼓励尽可能地使用–strictNullChecks，但在本手册里我们假设这个标记是关闭的。

Never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。下面是一些返回never类型的函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

// 推断的返回值类型为never
function Failed() {
    return error("Fauled");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {

    }
}

Object

object是表示非基本类型的类型, 例如除了number, string, boolean, symbol, null, or undefined之外的类型
使用object类型，像Object.create等APIs。如下代码

1
2
3
4
5
6
7

declare function create(o: object | null) :void ;
create({ prop: 0 })
create(null)
// create(42) // 会报错
// create("string") // 会报错
// create(false) // 会报错
// create(undefined) // 会报错

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。
类型断言有两种形式。 其一是“尖括号”语法：

1
2
3

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一个为as语法：

1
2
3

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

关于let

你可能已经注意到了，我们使用let关键字来代替大家所熟悉的JavaScript关键字var。 let关键字是JavaScript的一个新概念，TypeScript实现了它。 我们会在以后详细介绍它，很多常见的问题都可以通过使用 let来解决，所以尽可能地使用let来代替var吧。

这里有个知识点要注意下
就是对需要编译的文件进行处理的逻辑

1
2
3

"include": [
    "src/**/*.ts"
],

可以做模糊的匹配然后将匹配的文件进行编译

1
2
3

"files": [
    "src/main.ts"
],

是做具体的文件匹配，同时指定要输出的目录
在compilerOptions配置中加入

1

"outDir": "./dist",

本次实例分享结束实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.3

1、创建目录
选择一个你认为适合开发项目的目录，然后参考下面创建项目目录

1

mkdir typescript_demo && ce typescript_demo

2、npm初始化项目
进入的项目目录后，执行

1

npm init -y

3、安装依赖库

1

npm install gulp-cli gulp typescript gulp-typescript --save-dev

gulp-typescript是TypeScript的一个Gulp插件。

4、配置项目

4.1、在项目目录下面创建目录src和dist
src目录用来存储原始的文件也即是这里的.ts文件，dist用来存放编辑后的文件。
在src目录下添加main.ts文件，内容如下

1
2
3
4

function hello(compiler: string) {
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");

4.2、在项目目录下新建一个tsconfig.json文件，配置内容如下

1
2
3
4
5
6
7
8
9

{
    "files": [
        "src/main.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

4.3、在项目目录下新建一个gulpfile.js文件，配置内容如下

1
2
3
4
5
6
7
8
9

const gulp = require("gulp");
const ts = require("gulp-typescript");
const tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest("dist"));
});

4.4、试试gulp是否起作用，执行如下

1

npx gulp

得到类似如下的输出

1
2
3

[13:29:14] Using gulpfile ~/nodejs/typescript_demo/gulpfile.js
[13:29:14] Starting 'default'...
[13:29:15] Finished 'default' after 1.52 s

查看下dist目录下是否生成了一个main.js文件
执行如下命令 确保代码运行正常

1

node dist/main.js

执行后输出类似如下结果

1

Hello from TypeScript

4.5、配置package.json
修改package.json中main对一个的值，如下

1

"main": "./dist/mian.js",

如果有其他想要的修改的话，可以继续修改其他符合自己需求的项

5、模块添加
创建文件src/greet.ts文件，内容如下

1
2
3

export function sayHello(name: string) {
    return `Hello from ${name}`;
}

然后在src/main.ts代码中调用，修改后结果如下

1
2
3

import { sayHello } from './greet';

console.log(sayHello("TypeScript"));

最后，将src/greet.ts添加到tsconfig.json，结果如下

1
2
3
4
5
6
7
8
9
10

{
    "files": [
        "src/main.ts",
        "src/greet.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

通过gulp编译代码

1

npx gulp

得到类似如下的输出

1
2
3

[13:38:59] Using gulpfile ~/nodejs/typescript_demo/gulpfile.js
[13:38:59] Starting 'default'...
[13:39:01] Finished 'default' after 1.6 s

执行如下命令 确保代码运行正常

1

node dist/main.js

执行后输出类似如下结果

1

Hello from TypeScript

6、Browserify

注意，即使我们使用了ES2015的模块语法，TypeScript还是会生成Node.js使用的CommonJS模块。 我们在这个教程里会一直使用CommonJS模块，但是你可以通过修改 module选项来改变这个行为。

现在，让我们把这个工程由Node.js环境移到浏览器环境里。 因此，我们将把所有模块捆绑成一个JavaScript文件。 所幸，这正是Browserify要做的事情。 更方便的是，它支持Node.js的CommonJS模块，这也正是TypeScript默认生成的类型。 也就是说TypeScript和Node.js的设置不需要改变就可以移植到浏览器里。

首先，安装Browserify，tsify和vinyl-source-stream。 tsify是Browserify的一个插件，就像gulp-typescript一样，它能够访问TypeScript编译器。 vinyl-source-stream会将Browserify的输出文件适配成gulp能够解析的格式，它叫做 vinyl。
安装命令如下

1

npm install browserify tsify vinyl-source-stream --save-dev

6.1、在src目录下新建一个index.html文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
    </head>
    <body>
        <p id="greeting">Loading ...</p>
        <script src="bundle.js"></script>
    </body>
</html>

6.2、修改main.ts文件，修改后内容如下

1
2
3
4
5
6
7
8

import { sayHello } from "./greet";

function showHello(idName: string, name: string) {
    const elt = document.getElementById(idName);
    elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

调用sayHello函数更改页面上段落的文字
6.3、配置gulpfile.js，修改后内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const paths = {
  pages: ['src/*.html']
};

gulp.task("copy-html", function () {
  return gulp.src(paths.pages)
    .pipe(gulp.dest("dist"));
})

gulp.task("browserify", function() {
  return browserify({
      basedir: '.',
      debug: true,
      entries: ['src/main.ts'],
      cache: {},
      packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("dist"));
})

gulp.task("default", gulp.series('copy-html', 'browserify'));

这里的gulp配置可能与以往的不同，需要稍加注意下，这里使用的是xx@xx这个版本
这里增加了copy-html任务并且把它加作default的依赖项。 这样，当 default执行时，copy-html会被首先执行。 我们还修改了 default任务，让它使用tsify插件调用Browserify，而不是gulp-typescript。 方便的是，两者传递相同的参数对象到TypeScript编译器。

调用bundle后，我们使用source（vinyl-source-stream的别名）输出文件命名为bundle.js。

测试此页面，运行npx gulp，然后在浏览器里打开dist/index.html。 你应该能在页面上看到“Hello from TypeScript”。

注意，我们为Broswerify指定了debug: true。 这会让 tsify在输出文件里生成source maps。 source maps允许我们在浏览器中直接调试TypeScript源码，而不是在合并后的JavaScript文件上调试。 你要打开调试器并在 main.ts里打一个断点，看看source maps是否能工作。 当你刷新页面时，代码会停在断点处，从而你就能够调试 greet.ts。

7、Watchify、Babel和Uglify
现在代码已经用Browserify和tsify捆绑在一起了，还可以使用Browserify插件为构建添加一些新的特性。

Watchify启动Gulp并保持运行状态，当你保存文件时自动编译。 帮你进入到编辑-保存-刷新浏览器的循环中。

Babel是个十分灵活的编译器，将ES2015及以上版本的代码转换成ES5和ES3。 你可以添加大量自定义的TypeScript目前不支持的转换器。

Uglify帮你压缩代码，将花费更少的时间去下载它们。

7.1、Watchify
启动Watchify，让它在后台帮我们编译：

1

npm install watchify gulp-util --save-dev

修改gulpfile.js文件，修改后内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const watchify = require("watchify");
const gutil = require("gulp-util");
const paths = {
  pages: ['src/*.html']
};

const watchedBrowserify = watchify(browserify({
  basedir: '.',
  debug: true,
  entries: ['src/main.ts'],
  cache: {},
  packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
  return gulp.src(paths.pages)
    .pipe(gulp.dest("dist"));
})

function browserifyBundle() {
  return watchedBrowserify
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("dist"));
}

gulp.task("browserify", function() {
  return browserifyBundle();
})

gulp.task("default", gulp.series('copy-html', 'browserify'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

共有三处改变，但是需要你略微重构一下代码。

1. 将browserify实例包裹在watchify的调用里，控制生成的结果。
2. 调用watchedBrowserify.on(“update”, bundle)每次TypeScript文件改变时Browserify会执行bundle函数。
3. 调用watchedBrowserify.on(“log”, gutil.log);将日志打印到控制台。

(1)和(2)在一起意味着我们要将browserify调用移出default任务。 然后给函数起个名字，因为Watchify和Gulp都要调用它。 (3)是可选的，但是对于调试来讲很有用。

现在当你执行gulp，它会启动并保持运行状态。 试着改变 main.ts文件里showHello的代码并保存。 你会看到这样的输出：

7.2、Uglify
首先安装Uglify。 因为Uglify是用于混淆你的代码，所以我们还要安装vinyl-buffer和gulp-sourcemaps来支持sourcemaps。

1

npm install gulp-uglify vinyl-buffer gulp-sourcemaps --save-dev

修改gulpfile.js文件，修改后内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const watchify = require("watchify");
const gutil = require("gulp-util");
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const paths = {
  pages: ['src/*.html']
};

const watchedBrowserify = watchify(browserify({
  basedir: '.',
  debug: true,
  entries: ['src/main.ts'],
  cache: {},
  packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
  return gulp.src(paths.pages)
    .pipe(gulp.dest("dist"));
})

function browserifyBundle() {
  return watchedBrowserify
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({
      loadMaps: true
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist"));
}

gulp.task("browserify", function() {
  return browserifyBundle();
})

gulp.task("default", gulp.series('copy-html', 'browserify'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

注意uglify只是调用了自己。buffer和sourcemaps的调用是用于确保sourcemaps可以工作。 这些调用让我们可以使用单独的sourcemap文件，而不是之前的内嵌的sourcemaps。 你现在可以执行 gulp来检查bundle.js是否被压缩了：

7.3、Babel
首先安装Babelify和ES2015的Babel预置程序。 和Uglify一样，Babelify也会混淆代码，因此我们也需要vinyl-buffer和gulp-sourcemaps。 默认情况下Babelify只会处理扩展名为 .js，.es，.es6和.jsx的文件，因此我们需要添加.ts扩展名到Babelify选项。

1

npm install babelify babel-core babel-preset-env vinyl-buffer gulp-sourcemaps --save-dev

修改gulpfile.js文件，修改后内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const watchify = require("watchify");
const gutil = require("gulp-util");
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const paths = {
  pages: ['src/*.html']
};

const watchedBrowserify = watchify(browserify({
  basedir: '.',
  debug: true,
  entries: ['src/main.ts'],
  cache: {},
  packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
  return gulp.src(paths.pages)
    .pipe(gulp.dest("dist"));
})

function browserifyBundle() {
  return watchedBrowserify
    .transform('babelify', {
      presets: ['env'],
      extensions: ['.ts']
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({
      loadMaps: true
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist"));
}

gulp.task("browserify", function () {
  return browserifyBundle();
})

gulp.task("default", gulp.series('copy-html', 'browserify'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

我们需要设置TypeScript目标为ES2015。 Babel稍后会从TypeScript生成的ES2015代码中生成ES5。 修改 tsconfig.json:

1
2
3
4
5
6
7
8
9

{
    "files": [
        "src/*.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es2015"
    }
}

对于这样一段简单的代码来说，Babel的ES5输出应该和TypeScript的输出相似。

实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.2

安装TypeScript

获取TypeScript工具的方式：

通过npm（Node.js包管理器）

1

npm install -g typescript

构建你的第一个TypeScript文件

创建项目文件夹

1

mkdir typescript_demo && cd typescript_demo

创建文件greeter.ts

1

touch greeter.ts

将下面的代码写入greeter.ts中

1
2
3
4
5
6
7

function greeter(person) {
    return "Hello, " + person;
}

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

编译代码

这里使用.ts扩展名，但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。

在命令行上，运行TypeScript编译器：

1

tsc greeter.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！接下来让我们看看TypeScript工具带来的高级功能。 给 person函数的参数添加: string类型注解，如下：

1
2
3
4
5
6
7

function greeter(person:string) {
    return "Hello, " + person;
}

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里，我们希望 greeter函数接收一个字符串参数。 然后尝试把 greeter的调用改成传入一个数组：

1
2
3
4
5
6
7

function greeter(person:string) {
    return "Hello, " + person;
}

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

重新编译，你会看到如下产生 的一个错误。

1
2
3

greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

7 document.body.innerHTML = greeter(user);

类似地，尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js文件还是被创建了。 就算你的代码里有错误，你仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

接口

这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

1
2
3
4
5
6
7
8
9
10
11
12

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Durban", lastName: "Zhang" };

document.body.innerHTML = greeter(user);

类

最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

让我们创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class Student {
    fullName:string;
    constructor (
        public firstName: string,
        public middleName: string,
        public lastName: string) {
        this.fullName = firstName + " " + middleName + " " + lastName;

    }

}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Durban", "M.", "Zhang");
document.body.innerHTML = greeter(user);

重新运行tsc greeter.ts，你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

运行TypeScript Web应用

创建greeter.html并在里面输入如下内容：

1
2
3
4
5
6
7

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

实践项目地址

1
2

https://github.com/durban89/typescript_demo.git
tag: 1.0.0

微信公共号开发，提示“该公众号暂时无法提供服务，请稍后再试”，如何解决？

以前使用Yii框架的时候，并没有像Yii2，以前的Yii框架似乎用起来在安全方面不如Yii2，后面在用Yii2的时候发现了一个有趣的事情。
以前在用Yii框架做微信方面的开发的时候，开发模式需要添加对应的接口。
这里一定要注意点的点是在做接口验证的时候是使用GET请求，这个毫无疑问没有任何问题，但是在验证完之后，进行接口上面的交互的时候就有问题了，使用的POST的请求。
如果是以前的Yii的话，如果没有做严格的post请求的csrf验证的话，应该都是正常的。
但是使用Yii2之后就会有问题，如下

1
2
3
4

'request' => [
    'cookieValidationKey' => 'xxxxxx',
    'csrfParam' => 'xxxxxx',
],

这里的配置，我记得官网的例子或者是在使用Yii2创建项目之后就会添加这一部分，这个会导致在所有的Conroller写的action，post请求接收的时候系统会默认做csrf安全验证，导致在做微信开发的时候，这块post的请求也失效了，当时在action中加了log日志，很奇怪为什么action的方法也不执行。
解决办法如下
在对应的Controller中添加

1

public $enableCsrfValidation = false;

这个是将请求的csrf验证做了关闭，也就是说所有请求到这个Controller的都不会做csrf的验证。这块的安全看来还是要通过其他方式避免一下，针对微信端的请求做处理，以实现安全的防护。

当然到这里说的也就只有程序上的问题，如果是真实的微信公众号的问题，那就只能找找微信客服解决了。

PS:
现在的客服全都机器的，问一句根本不知道你想要啥，说实话还是喜欢跟人工客服打交道，人跟人交流不能退缩到原始，见面就只是哼哼，时代的进步不代表要减少沟通。

npm新版本新推来一个功能，npm profile，这个可以更改自己简介信息的命令，以后可以不用去登录网站来修改自己的简介了

具体的这个功能的支持大概是在6这个版本如果你的npm版本没有这个命令的话，建议升级试下

1

npm install -g npm

npm profiles主要作用是更改registry profile的设置，刚开始我很蒙圈，不知道啥时profile，直接叫用户信息不就可以了吗？但我们通过官网的地址登录后，点击右侧的自己的头像会发现，点击后会出现一个下拉列表，列表里面有个”Profile Settings”，于是乎我好像明白了。其实就是更改自己的用户信息而已。可以进入里面看下，基本信息跟我们稍后列表来profile支持的选项是一样的。

npm profile 的简介如下

1
2
3
4
5

npm profile get [--json|--parseable] [<property>]
npm profile set [--json|--parseable] <property> <value>
npm profile set password
npm profile enable-2fa [auth-and-writes|auth-only]
npm profile disable-2fa

主要功能也就上面这些，跟我上面的截图的内容差不多一致，以后如果增加了相应的选项的话，应该也会更新对应的配置选项

下面详细了解下具体的情况

在registry中更改您的个人profile信息。
如果使用的是non-npmjs registry，则无法使用此功能。

npm profile get []:

展示所有profile中的属性或者一个或者更多的属性，比如我的属性包括如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

┌─────────────────┬──────────────────────────────────┐
│ name            │ durban                           │
├─────────────────┼──────────────────────────────────┤
│ email           │ xx@xx (verified) │
├─────────────────┼──────────────────────────────────┤
│ two-factor auth │ disabled                         │
├─────────────────┼──────────────────────────────────┤
│ fullname        │ durban zhang                     │
├─────────────────┼──────────────────────────────────┤
│ homepage        │ www.gowhich.com                  │
├─────────────────┼──────────────────────────────────┤
│ freenode        │                                  │
├─────────────────┼──────────────────────────────────┤
│ twitter         │                                  │
├─────────────────┼──────────────────────────────────┤
│ github          │                                  │
├─────────────────┼──────────────────────────────────┤
│ created         │ 2015-03-18T02:35:58.918Z         │
├─────────────────┼──────────────────────────────────┤
│ updated         │ 2018-07-17T06:27:25.590Z         │
└─────────────────┴──────────────────────────────────┘

这个提示下如果你在运行

1

npm profile

之后没有出现我上面说的情况的话，会有一个问题就是你还没有进行登录，需要执行

1

npm login

进行登录操作

npm profile set :

设置profile中属性的值，可以设置的属性包括下面的几个
email, fullname, homepage, freenode, twitter, github

npm profile set password:

修改你的密码。这个是一个交互的功能，你将被提示去输入你当前的密码和一个新的密码，如果开启了双重认证[two-factor authentication]的话，还需要输入一个OTP[动态口令]

npm profile enable-2fa [auth-and-writes|auth-only]:

允许使用双重认证[two-factor authentication]，默认是auth-and-writes模式。
模式的话有如下几种

auth-only: 当登录或者是修改账户信息是需要OTP[动态口令]。这个OTP[动态口令]在网站和命令行都会被需要的。
auth-and-writes: 在auth-only的所有时间都需要OTP[动态口令]，并且在发布模块，设置最新的dist-tag或通过npm access和npm owner更改访问权时也需要一个OTP[动态口令]。

npm profile disable-2fa:

禁止使用双重认证[two-factor authentication]

所有npm profile子命令都接受–json和–parseable，并将根据这些命令调整其输出。
其中一些命令可能在non-npmjs registry中不可用。