web前端学习之TypeScript（持续更新中...）
web前端学习之TypeScript
- TypeScript简介
-
-
- 什么是TypeScript?
- TypeScript VS JavaScript 深度对比
- 安装TypeScript
- Hello TypeScript
-
- 基础
-
-
- 原始数据类型
- 任意值
-
TypeScript简介
什么是TypeScript?
- TypeScript 是一种有微软开发的自由和开源的编程语言，是JavaScript的超集。
- TypeScript拓展了JavaScript的语法，所以任何现有的JavaScript程序可以直接在 TypeScript下工作。
- TypeScript是为大型应用开发而设计的，生产过程中可以保证安全性和兼容性。
TypeScript VS JavaScript 深度对比
- TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言。
- TypeScript 是 JavaScript 的一个超集。
1.JavaScript 和 TypeScript 的主要差异
-
TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序
-
TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。 -
TypeScript 通过类型注解提供编译时的静态类型检查。
-
TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
-
TypeScript 为函数提供了缺省参数值。
-
TypeScript 引入了 JavaScript 中没有的“类”概念。
-
TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
2.TypeScript 的优势
-
静态输入
静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。 -
大型的开发项目
有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。 -
更好的协作
当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。 -
更强的生产力
干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。
3.JavaScript 的优势
相比于 TypeScript，JavaScript 也有一些明显优势。
-
人气
JavaScript 的开发者社区仍然是巨大而活跃的，在社区中可以很方便地找到大量成熟的开发项目和可用资源。 -
学习曲线
由于 JavaScript 语言发展的较早，也较为成熟，所以仍有一大批开发人员坚持使用他们熟悉的脚本语言 JavaScript，而不是学习 TypeScript。 -
本地浏览器支持
TypeScript 代码需要被编译（输出 JavaScript 代码），这是 TypeScript 代码执行时的一个额外的步骤。 -
不需要注释
为了充分利用 TypeScript 特性，开发人员需要不断注释他们的代码，这可能会使项目效率降低。 -
灵活性
有些开发人员更喜欢 JavaScript 的灵活性。
4.JavaScript某一天会被TypeScript替代吗？（个人拙见）
TypeScript火爆且优秀，但缺点也明显
- 有些第三方的js库缺失dts，或者dts更新不及时。会导致不能便利的使用它或者调用了过时的方法／函数
- 如果是熟练的前端开发，TypeScript有可能会成为桎梏。它强制你写一堆繁琐的接口类型。而且有些js的方式它还不兼容
- 它也阉割了js的一些技法。
小结：
我个人不会关闭这扇学习TypeScript的窗子，但是我也不会觉得现在火爆的TypeScript就能改变JavaScript的历史，就如当时火极一时的JQuery。
安装TypeScript
TypeScript 的命令行工具安装方法如下：
npm install -g typescript
编译一个 TypeScript 文件很简单：
tsc hello.ts
我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。
编辑器
TypeScript 最大的优势便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。
主流的编辑器都支持 TypeScript，推荐使用 Visual Studio Code。
它是一款开源，跨终端的轻量级编辑器，内置了 TypeScript 支持。它本身也是用 TypeScript 编写的。
Hello TypeScript
将以下代码复制到 hello.ts 中：
function sayHello(person: string) {
return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));
然后执行
tsc hello.ts
这时候会生成一个编译好的文件 hello.js：
function sayHello(person) {
return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));
TypeScript 中，使用 : 指定变量的类型，: 的前后有没有空格都可以。
基础
本部分介绍了 TypeScript 中的常用类型和一些基本概念，旨在让大家对 TypeScript 有个初步的理解。具体内容包括：
- 原始数据类型
- 任意值
- 类型推论
- 联合类型
- 对象的类型——接口
- 数组的类型
- 函数的类型
- 类型断言
- 声明文件
- 内置对象
原始数据类型
JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。
原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。
本节主要介绍前五种原始数据类型在 TypeScript 中的应用。
布尔值
在 TypeScript 中，使用 boolean 定义布尔值类型：
let isDone: boolean = false;
// 编译通过
// 为后面做个约定，未强调编译错误的代码片段，默认为编译通过
注意，使用构造函数 Boolean 创造的对象不是布尔值：
let createdByNewBoolean: boolean = new Boolean(1);
//类型“Boolean”不能赋值给类型“Boolean”。
//'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.
事实上 new Boolean() 返回的是一个 Boolean 对象
直接调用 Boolean 也可以返回一个 boolean 类型
在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null 和 undefined）一样
数值
使用 number 定义数值类型：
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
编译结果：
var decLiteral = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;
字符串：
使用 string 定义字符串类型：
let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;
编译结果：
var myName = 'Tom';
var myAge = 25;
// 模板字符串
var sentence = "Hello, my name is " + myName + ".
I'll be " + (myAge + 1) + " years old next month.";
空值：
JavaScript 没有空值（Void）的概念，但是在 TypeScript 中，可以用 void 表示没有任何返回值的函数：
function alertName(): void {
alert('My name is Tom');
}
声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：
let unusable: void = undefined;
Null 和 Undefined
在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：
let u: undefined = undefined;
let n: null = null;
与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
而 void 类型的变量不能赋值给 number 类型的变量：、
let u: void;
let num: number = u;
// Type 'void' is not assignable to type 'number'.
任意值
任意值（Any）用来表示允许赋值为任意类型。
什么是任意值类型
如果是一个普通类型，在赋值过程中改变类型是不被允许的：
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
任意值的属性和方法
在任意值上访问任何属性都是允许的：
let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
也允许调用任何方法：
let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');