TypeScript

简介

1.什么是TypeScript？

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作Prototype。

2. TypeScript的历史

2012年10月，微软发布了首个公开版本的TypeScript，
2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript3.8。

3.JavaScript 与 TypeScript 的区别

1.TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 2.TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
3.TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript的优点

TypeScript 增加了代码的可读性和可维护性
1.类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
2.可以在编译阶段就发现大部分错误，这总比在运行时候出错好
3.增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

TypeScript 非常包容
1.TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可
2.即使不显式的定义类型，也能够自动做出[类型推论
3.可以定义从简单到复杂的几乎一切类型
4.即使 TypeScript 编译报错，也可以生成 JavaScript 文件
5.兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

TypeScript 拥有活跃的社区
1.大部分第三方库都有提供给 TypeScript 的类型定义文件
2.Google 开发的 Angular2 就是使用 TypeScript 编写的
3.TypeScript 拥抱了 ES6 规范，也支持部分 ESNext 草案的规范

TypeScript 安装以及运行

安装

1.安装：npm install -g typescript 或者 yarn add global typescript

2.确认是否安装成功: tsc -v

3.新建一个 test.ts 的文件

4.执行tsc test.ts命令将 TypeScript 转换为 JavaScript 代码

5.再当前目录下（与 test.ts 同一目录）就会生成一个 test.js 文件

6.使用 node 命令来执行 test.js 文件

配置

1…tsc --init 生成tsconfig.json文件

2…VSCode点击终端-> 运行任务-> tsc.监视

TypeScript 的数据类型

// 基本数据类型
数组类型
let num = 25;
let float = 25.5;
let hex = 0xf000;  // 16进制
let binary = 0b1001; // 2进制
let octal = 0o733;  // 8进制

字符串类型
let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

//数组
let arr: number[] = [1, 2];
let arr: Array<number> = [1, 2];
//元组：用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
// 枚举:用于定义数值集合。
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

void:用于标识方法返回值的类型，表示该方法没有返回值。
null:表示对象值缺失。
undefine:用于初始化变量为一个未定义的值
never:never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
any:声明为 any 的变量可以赋予任意类型的值。

注意：TypeScript 和 JavaScript 没有整数类型。

函数相关类型

// 函数的相关类型
function returnValue() {
  return 'hello';
}
// console.log(returnValue()); // hello

// 规范写法
function returnNum(): number { // 定义其返回值类型
  return 520;
}



// 若函数返回值 -- 空
function sayHello(): void {
  console.log('hello @@@@@');
}
sayHello();




// 参数类型
// 不标准写法,已经知道value1和value2的类型。
// 报错内容：参数“value1”隐式具有“any”类型。
// function sumVal(value1, value2) {
//   return value1 + value2;
// }

function sumVal1(value1: number, value2: number): number {
  return value1 + value2;
  // return value1 * value2; // 如果两个参数中有一个不是数值 那么返回的是NAN。但是若为0或者''，返回0。
}
console.log(sumVal1(1, 2)); // 3
// console.log(sumVal1(1, ''));

function sumVal2(value1: number, value2: string): string {
  return value1 + value2;
}
console.log(sumVal2(1, 'hello')); // 1hello



// 函数类型
let myFunc: (a: number, b: number) => number;
// 若函数为定义类型，如下则都可以赋值不同类型。
// myFunc = sayHello;
// myFunc();
myFunc = sumVal1; // 将函数 sumVal1 赋予给 myFunc
console.log(myFunc(5, 5));   // 10