TypeScript

1.什么是TypeScript
TypeScript 是一种由微软开发的*和开源的编程语言。它是 JavaScript 的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作 Prototype。C#的首席架构师以及 Delphi 和 Turbo Pascal 的创始人安德斯·海尔斯伯格参与了 TypeScript 的开发。
2.支持的浏览器和平台
运行于任何平台上的任何网页浏览器都可以运行 TypeScript：由于它仅仅是被编译为标准的 JavaScript，一个脚本既可以被预编译为 JavaScript，也可以通过为 TypeScript 包含 JavaScript 编译器实时编译。
安装TypeScript
有两种主要的方式来获取TypeScript工具：
1.通过npm（Node.js包管理器）
2.安装Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript，你可以下载它。
可能出现的报错
报错解决方案
ts代码

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

js代码

"use strict";
function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

在控制台输入tsc ts名，就会出现一个js文件
如果嫌每次都要运行太麻烦，可以配置一个自动保存
去要写入ts的文件夹下打开黑窗口，输入tsc --init

就会自动生成一个tsconfig.json文件

写一个ts文件
点击终端—>运行任务–>typescript–>监听

保存就会出现一个js文件

ts常用数据类型

布尔值
ts

let isTrue: boolean = false;
console.log(isTrue);

js

"use strict";
var isTrue = false;
console.log(isTrue);

数字
ts

let age: number = 26;
console.log(age);

js

"use strict";
var age = 26;
console.log(age);

字符串
ts

let name: string = "bob";

js

"use strict";
var name = "bob";

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

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

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

js

"use strict";
var list = [1, 2, 3];

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

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

js

"use strict";
var list = [1, 2, 3];

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

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

js

"use strict";
var notSure = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

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

function warnUser(): void {
    alert("This is my warning message");
    }

js

"use strict";
function warnUser() {
    alert("This is my warning message");
}

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

let tup: [number, string] = [27, "jianan"];
console.log(tup);
console.log(tup[0], tup[1]);
 
let a: Array<[number, string]> = [[27, "jianan"], [28, "xixi"]];
console.log(a);

js

"use strict";
var tup = [27, "jianan"];
console.log(tup);
console.log(tup[0], tup[1]);
var a = [[27, "jianan"], [28, "xixi"]];
console.log(a);

运行结果