[JavaScript知识库]TypeScript学习笔记

第一章、基础类型

1.布尔值
let isDone: boolean = false;

2.数字
let decLiteral: number = 6;

3.字符串
let name: string = "bob";

4.数组
let list: number[] = [1, 2, 3];

5.任意类型 any
变量的类型是动态的，可以是任意的，并且不会被类型检查器而检查，可以顺利通过编译阶段
let notSure: any = 4;
notSure = "maybe a string instead";
数组包含不同类型的元素
let list: any[] = [1, true, "free"];
list[1] = 100;

6.无任何类型void
变量没有任何类型，函数没有返回值的时候也可以定义函数为void类型
function warnUser(): void {
    console.log("This is my warning message");
}
声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
let unusable: void = undefined;

7.Null 和 Undefined

8.元组 Tuple
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

9.Never
never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

10.对象Object

11.枚举
enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

12.类型断言（类型转换）
尖括号
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

as语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

第二章、变量声明

var、let、const，同JavaScript

1.var是函数作用域，
let是块作用域，不允许重复声明
const是块作用域且初始化后无法改变其值
函数作用域：函数
块作用域：if for 等{}语句

2.var会声明提升，但赋值不会提升

console.log(name); //undefined 
var name='a'
let,const暂时性死区
console.log(name); //ReferenceError: name没有定义 
let name='a'

第三章、接口

我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。

类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

这个接口代表了有一个 label属性且类型为string的对象。

1.可选属性

interface SquareConfig {
  color?: string;
  width?: number;
}

2.只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}

3.函数类型

interface SearchFunc {
  (source: string, subString: string): boolean;
}
这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。 比如，我们使用下面的代码重写上面的例子：

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

• 函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。
• 如果你不想指定参数类型，TypeScript的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc类型变量。
• 函数的返回值类型是通过其返回值推断出来的（此例是 false和true）。

如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

4.可索引类型

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

第四章、函数

1.函数类型

function add(x: number, y: number): number {
    return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };

可以给每个参数和返回值添加类型，但是返回值类型可以省略，因为ts可以自动推断出返回值类型

2.推断类型

尝试这个例子的时候，你会发现如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型：

// myAdd has the full function type
let myAdd = function(x: number, y: number): number { return x + y; };

// The parameters `x` and `y` have the type number
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

3.可选参数和默认参数

注意：可选参数和默认参数一定要放在必须参数的后面（默认参数可以放前面，但是为了保证参数的顺序，一定要传入undefined）

TypeScript里的每个函数参数都是必须的。传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能

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

在TypeScript里，我们也可以为参数提供一个默认值，当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。

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

带默认初始化的参数都是可选类型的，与可选参数一样，在调用函数的时候可以省略。
与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值。

function buildName(firstName = "Will", lastName: string) {
    return firstName + " " + lastName;
}
let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // okay and returns "Bob Adams"
let result4 = buildName(undefined, "Adams");     // okay and returns "Will Adams"

4.剩余参数(同arguments)

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用 arguments来访问所有传入的参数。在TypeScript里，你可以把所有参数收集到一个变量里：

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
//Joseph Samuel Lucas MacKinzie

这个省略号也会在带有剩余参数的函数类型定义上使用到：

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

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;