这是我参与「第四届青训营」笔记创作活动的的第1天
青训营第一天，讲师讲了html的基础知识，由于之前学过，所以简单的复习了一下，没有多花时间，所以决定学习学习typescript，以作之后的项目实践中使用。
首先已知TypeScript 是 JavaScript 的一个超集，支持ES6语法，它的设计目标是开发大型应用，可以编译成纯JavaScript，之后运行在任何浏览器上。
JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
TypeScript的安装及第一个程序
使用npm命令即可安装成功
npm install -g typescript
首先建立一个ts为结尾的文件，然后输入代码
var message:string = "hello world"
console.log(message);
在终端中打开该文件，首先通过 tsc 命令编译：
tsc Runoob.ts
就得到一个文件名相同、后缀为js的文件，使用 node 命令来执行该 js 代码，就可以得到输出
$ node Runoob.js
Hello World
TypeScript 基础类型
任意类型(any) 字符串类型(string) 数字类型(number) 布尔类型(boolean)
数组 元组 枚举(emun) void
null undefined never
any类型针对编程时类型不明确的变量使用
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型
let x: number;
x = 1; // 编译正确
x = undefined; // 编译错误
x = null; // 编译错误
上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型，示例代码如下：
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined; // 编译正确
x = null; // 编译正确
变量作用域
TypeScript 有以下几种作用域：
- 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
- 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
- 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。
以下实例说明了三种作用域的使用：
var global_num = 12 // 全局变量
class Numbers {
num_val = 13; // 实例变量
static sval = 10; // 静态变量
storeNum():void {
var local_num = 14; // 局部变量
}
}
console.log("全局变量为: "+global_num)
console.log(Numbers.sval) // 静态变量
var obj = new Numbers();
console.log("实例变量: "+obj.num_val)
以上代码使用 tsc 命令编译为 JavaScript 代码为：
var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
function Numbers() {
this.num_val = 13; // 实例变量
}
Numbers.prototype.storeNum = function () {
var local_num = 14; // 局部变量
};
Numbers.sval = 10; // 静态变量
return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);
执行以上 JavaScript 代码，输出结果为：
全局变量为: 12
10
实例变量: 13
如果我们在方法外部调用局部变量 local_num，会报错：
error TS2322: Could not find symbol 'local_num'.
此外，TypeScript的运算符，变量声明，条件与循环等都与其他语言大差不差，很容易理解，但在函数中设置返回值类型略有不同，以下举例讲解。
// 函数定义
function greet():string { // 返回一个字符串
return "Hello World"
}
function caller() {
var msg = greet() // 调用 greet() 函数
console.log(msg)
}
// 调用函数
caller()
- 实例中定义了函数 greet() ，返回值的类型为 string。
- greet() 函数通过 return 语句返回给调用它的地方，即变量 msg，之后输出该返回值。 在调用带参数的函数时：
function add(x: number, y: number): number {
return x + y;
}
console.log(add(1,2))
- 实例中定义了函数 add() ，返回值的类型为 number。
- add() 函数中定义了两个 number 类型的参数，函数内将两个参数相加并返回。
可选参数
在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
以下实例，我们将 lastName 设置为可选参数：
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
默认参数
我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数
function calculate_discount(price:number,rate:number = 0.50) {
var discount = price * rate;
console.log("计算结果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)
剩余参数
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。
function addNumbers(...nums:number[]) {
var i;
var sum:number = 0;
for(i = 0;i<nums.length;i++) {
sum = sum + nums[i];
}
console.log("和为：",sum)
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)
匿名函数
匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。
我们可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式。
var msg = function() {
return "hello world";
}
console.log(msg())
带参数
var res = function(a:number,b:number) {
return a*b;
};
console.log(res(12,2))
总的来说，TypeScript的学习与其他语言差别并不大，而且有了js的基础以后对文档的理解也并不困难，今天先记录到这里，之后再继续学习记录。
