学习 Typescript 的笔记

1. 笔记
- 1.1. let 和 var 的区别
  - 1.1.1. 不同作用域
  - 1.1.2. 重定义及屏蔽
- 1.2. 函数传参
  - 1.2.1. 可选参数和默认参数
  - 1.2.2. 变长参数
2. 参考链接

1 笔记

1.1 let 和 var 的区别

let 和 var 两个关键字都可以定义变量，两者的主要区别是他们的作用域不一样的。 var 是函数作用域， let 是块作用域。

function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10; // 这里如果用 let 定义则 return 就不能返回 x
  }

  return x;
}

f(true);  // returns '10'
f(false); // returns 'undefined'

1.1.1 不同作用域

var 声明可以在包含它的函数，模块，命名空间或全局作用域内部任何位置被访问。这里会引起一些不易察觉的错误，

// i 被重复定义
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }

  return sum;
}

// 每次定义的 i 只会引用最后的变量
for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, 100 * i);
}
// output:
// 5
// 5
// 5
// 5
// 5

// 解决方案是使用 lambda 函数来扩充定义域
for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() { console.log(i); }, 100 * i);
  })(i);
}
// output:
// 1
// 2
// 3
// 4
// 5

1.1.2 重定义及屏蔽

function f(x) {
    var x;
    var x; // 可以定义
    if (true) {
        var x;
    }
}

let x = 10;
let x = 20; // 错误，不能在 1 个作用域里多次声明`x`

1.2 函数传参

TypeScript 里的每个函数参数都是必须的。这不是指不能传递 null 或 undefined 作为参数，而是说编译器检查用户是否为每个参数都传入了值。编译器还会假设只有这些参数会被传递进函数。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

1.2.1 可选参数和默认参数

JavaScript 里，每个参数都是可选的，可传可不传。没传参的时候，它的值就是 undefined 。在 TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能。比如，我们想让 lastName 是可选的：

// 可选参数
function buildName(firstName: string, lastName?: string) {
  if (lastName)
    return firstName + " " + lastName;
  else
    return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

// 默认参数
function buildName(firstName: string, lastName = "Smith") {
  return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined);       // still works, also returns "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result4 = buildName("Bob", "Adams");         // ah, just right

1.2.2 变长参数

在 TypeScript 里，你可以把所有参数收集到一个变量里，剩余参数会被当做个数不限的可选参数。可以一个都没有，同样也可以有任意个。编译器创建参数数组，名字是你在省略号 … 后面给定的名字，你可以在函数体内使用这个数组。

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");