使用Typescript开发 （一）

ES5和ES6中提供了类、模块以及装饰器等等这些特性，其中有些特性已经在Typescript中实现了。而Typescript支持额外的类型注解，所以与Javascript相比，他支持更多语法特性。

Typescript 用法

看十遍书籍不如手动敲一遍，所以为了能让这些代码运行起来，需要在你的机器装上TS编译器。

用npm安装Typescript

1. 全局安装Typescript编译器和可执行程序（tsc）： $ npm i -g typescript
2. 验证是否安装成功：$ tsc -v

简单运行TS程序

1. 新建一个example.ts并在编辑器里输入：

let a = '123';
console.log(a);
复制代码

2. 使用tsc命令编译文件：$ tsc example.ts

会发现，在hello.ts同一个目录下面，看到一个example.js文件。

那其实生成的js文件等同于Typescript编译器输出的内容，可以用 $ node example.js验证：

使用静态类型

使用静态类型，首先能帮助我们避免出错并且提高效率。在写JS时候，编辑器（例VScode）都是在运行时语法高亮，对代码提供一些自动化完成建议。 而Typescript发挥自身静态类型检查的优势，把所有类型声明剔除，生成合法的Javascript代码。

显式类型

举个例子：

let word: string = 'apple';
console.log(word);
复制代码

最后输出：

这段代码的意思很显然：使用const语法定义了一个变量word，而且还声明word的类型式string，值为apple。

修改word的值

let word: string = 'apple';
word = 123;
console.log(word);
复制代码

平时在JS代码中这里正确的，发现word被设置为指定类型之后，就不能再赋值为其他类型。那如果我想允许修改任何类型的值，如何？

any类型

可以使用关键字any把变量声明为any类型，那么基本上就是便携动态类型了，导致无论是编译时还是运行时都不会抛出任何错误，所以这样就失去了TS带来的优点。

let word: any;
word = {first:'1'}
word = 'apple';
word += 100;
console.log(word); // apple100
复制代码

类型推断机制

静态类型由于要添加各种必须的类型注解，会使得代码变得很啰嗦。可以使用类型推断机制编写简洁的代码，不需要显示定义。所以，Typescript的编译器可以智能猜测代码中表达式的类型，比如：

let word = 'apple';
word = 123;
console.log(word);
复制代码

编辑器发现定了变量word，值为string类型的apple，就无法变成number类型的123了。

另一种情况，如果声明变量时候不赋值，那么编译器会自动设为any类型：

let word;
word = 'apple';
word = 123;
console.log(word); // 123
复制代码

多个表达式推断

上面例子都是一个表达式的类型推断，那么在多个类型推断会发什么结果？ 比如：

let arr = ['apple', 100]
arr.push('pear')
console.log(arr) // [ 'apple', 100, 'pear' ]
复制代码

这种情况，arr的类型将会变成any类型的数组。

但是，又比如：

let arr = ['apple', 'pear']
arr.push(122)
console.log(arr) 
复制代码

发现：

这种情况，arr的类型将是number[]。

与上下文有关

如果表达式的类型是由它所在的位置隐式决定，那么发生类型和上下文有关的情况。

document.body.addEventListener('click', e => {
  e.sayHello();
});
复制代码

回调函数中参数e的类型是编译器猜测而来，依据是参数e所在的上下文，会根据调用addEventListener的位置以及传递给方法的参数情况去了解e的类型。

总结：这篇内容比较简单，偏向基础性的内容。下一篇主要介绍Typescript的类型：原生类型，Object类型以及泛型和外部类型定义。

PS：写Typescript笔记的理由不是为了骗点击量和关注量，只是想一边学习之余一边整理自己的认知，做一次系统回顾。

转载于:https://juejin.im/post/5c1e31a6e51d452429741d01