TypeScript学习笔记

标题一、安装 TypeScript

    npm install -g typescript

二、查看 TypeScript版本号

    tsc -v

三、TypeScript文字转成JavaScript文件

    单个转换：tsc app.ts
    多个转换：tsc app1.ts app2.ts app3.ts

四、TypeScript 保留关键字

break：跳出语句
as：使用于类型断言
switch、case：选择语句
try：语句测试代码块的错误
catch：语句处理错误
throw：语句创建自定义错误
finally：语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行
if-else：判断语句
var、let：声明变量，let 是在代码块内有效，var 是在全局范围内有效
number：数字类型
string：字符串类型
instanceof：运算符用于判断对象是否为指定的类型，后面章节我们会具体介绍它。
typeof：是一元运算符，返回操作数的数据类型。
public：公有
private	：私有
enum：枚举型
export：在命名空间或模块中，使用 export 来暴露方法或变量
for-in、while、do-wile：循环
continue：进入下一个循环
void：一般用于方法，表示没有返回值。
null：用于变量值，表示该变量没有指向。
super：父对象
this：代表自己
new：创建对象
return：返回值或退出
true、false：布尔值
any：任意类型
extends：接口继承接口、类继承类
static：静态
const：声明一个只读的常量，一旦声明，常量的值就不能改变。
implements：类实现接口
interface：用于定义接口
function：用于定义函数
type：设置类型的别名
get：设置类的get方法
set：设置类的set方法
abstract：用于声明抽象类或抽象方法

五、分号是可选的

单行指令单独一行，分号可选

    console.log("Hello World")
    console.log("Hello World");

多行指令写在一行上要用分号隔开，同一行的最后一个指令分号可选

    console.log("Hello World"); console.log("Hello World")

六、TypeScript 区分大小写

TypeScript 区分大写和小写字符。

七、TypeScript 注释

单行注释 ( // ) − 在 // 后面的文字都是注释内容。
多行注释 (/* */) − 这种注释可以跨越多行。

八、TypeScript 基础类型

1、任意类型：any

声明为 any 的变量可以赋予任意类型的值。

2、数字类型：number

双精度 64 位浮点值。它可以用来表示整数和浮点数。

3、字符串类型：string

使用单引号（'）或双引号（"）来表示字符串类型。
字符串模版：反引号（`）来定义多行文本和内嵌表达式， ${} 内部是引用的变量。

    let school: string = "广州第一初级中学";
    let num: number = 1;
    let MyStr: string = `您好，我是${school}的学生，我在${num+1}班`;
    console.log(MyStr);

4、布尔类型：boolean

表示逻辑值：true 和 false。

5、数组类型：类型[ ]

声明变量为数组。

6、元组：[类型1, 类型2, 类型3]

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同，位置不同赋值失败。

    let x: [string, number];
    x = ['学习', 1];    // 运行正常
    x = [1, '学习'];    // 报错
    console.log(x[0]);    // 输出 学习

7、枚举：enum

枚举类型用于定义数值集合。

8、空类型：void

用于标识方法返回值的类型，表示该方法没有返回值。

9、空指向类型：null

表示对象值缺失，表示没有指向，表示没有引用。

10、未定义类型：undefined

用于初始化变量为一个未定义的值。

11、从不出现的类型：never

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
never 在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）。

九、TypeScript 变量声明

变量名可以包含数字和字母，且除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符和空格。
变量名不能以数字开头。
声明变量的类型及初始值：var [变量名] : [类型] = 值;
声明变量的类型，没有初始值：var [变量名] : [类型] ;
声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined, 如：var [变量名];
在声明变量没有设置类型和初始值时，编译器会用第一次赋值的类型，设置变量的类型之后再赋值其他类型会报错。
变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

十、TypeScript 类型断言

    语法格式：<类型>值或 值 as 类型

当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。
类型断言用于手动指定一个值的类型，即使这个值的类型看起来不符合断言的类型。
类型断言可以用来告诉TypeScript编译器，你确信一个变量的类型与编译器推断的类型不同。
它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。
类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。

    let x: any = "this is a string";
    let y: number = x as number;    // 使用类型断言将 'x' 断言为 'number'
    console.log(y);
    console.log(typeof (y));

输出：

    this is a string
    string

十、TypeScript 联合类型

用联合类型声明变量，可以预设可能会出现的多个类型，可用 | 隔开多个类型

    let x : number | string | boolean; //表示变量 x 可以接收这三种类型的数据。

十一、TypeScript 变量作用域

1、全局作用域
全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
2、类作用域
这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。
该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
3、局部作用域
局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

十二、TypeScript 循环语句

for 循环

    var sum: number = 0;
    for (var i = num; i <= 5; i++) {
        sum += i;
    }
    console.log(sum);

for…in 循环，用于一组值的集合或列表进行迭代输出

    for (var val in list) { // val 需要为 string 或 any 类型。
        //语句
    }

for…of循环，创建一个循环来迭代可迭代的对象

在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。

    let someArray = [1, "string", false];
    for (let entry of someArray) {
        console.log(entry);
    }

forEach 循环，在循环中，不能够终止循环

    let list = [4, 5, 6];
    list.forEach((val, idx, array) => {
        // val: 当前值
        // idx：当前index
        // array: Array
        console.log(val, idx, array[idx]);
        return false;
    });

输出：

    4 0 4
    5 1 5
    6 2 6

every 循环，在循环中，能够终止循环，能使用return false来退出循环

    let list1 = [4, 5, 6];
    list1.every((val, idx, array) => {
        // val: 当前值
        // idx：当前index
        // array: Array
        console.log(val, idx, array[idx]);
        return false;
    });

输出：

    4 0 4

some 循环，在循环中，能够终止循环，能使用return true来退出循环

    let list = [4, 5, 6];
    list.some((val, idx, array) => {
        // val: 当前值
        // idx：当前index
        // array: Array
        console.log(val, idx, array[idx]);
        return true;
    });

输出：

    4 0 4
    5 1 5
    6 2 6

十三、TypeScript 函数

无参无返回值

    function function_name() {
    // 执行代码
}

无参有返回值

    function function_name(): return_type  {
    // 执行代码
        return value;
    }
    // return_type 是返回值的类型。
    // return 关键词后跟着要返回的结果。

有参无返回值

    function func_name(param1 [: datatype], param2 [: datatype]) {
    // 执行代码
    }
    // param1、param2 为参数名。
    // datatype 为参数类型。

可选参数

    function func_name(param1 [: datatype], param2? [: datatype]) {
    // 执行代码
    }
    // param1、param2 为参数名。
    // param2 为可选参数，可选参数用 ? 表示，可选参数必须跟在必需参数后面。
    // datatype 为参数类型。

默认参数

    function func_name(param1[: datatype], param2[: datatype] = default_value) {
    // 执行代码
    }
    // param1、param2 为参数名。
    // datatype 为参数类型。
    // default_value 为默认参数，参数不能同时设置为可选和默认。

剩余参数，剩余参数必须放在最后面

当不知道要向函数传入多少个参数，这时候可以使用剩余参数来定义。
函数的参数不能同时存在可选参数和剩余参数。

    function func_name(...param[: datatype]) {
    // 语句
    }
    // param 为参数名，使用 ... 为前缀，表示为剩余参数。
    // datatype 为参数类型。

十四、匿名函数

匿名函数是一个没有函数名的函数。
语法格式：

    var res = function( [arguments] ) { ... }

十五、匿名函数自调用

匿名函数自调用在函数后使用 () 即可。
语法格式：

    function( [arguments] ) { ... }();

十六、函数类的构造函数

系统底层定义了一个函数类Function，可以用函数类的构造函数构造一个函数。
语法格式如下:

    var res = new Function([arg1[, arg2[, ...argN]],]functionBody);
    
    // 参数说明:
    // arg1, arg2, ... argN：参数列表。
    // functionBody：一个含有包括函数定义的 JavaScript 语句的字符串。

举例说明:

    var myFunction = new Function("a", "b", "return a * b");
    var x = myFunction(4, 3);
    console.log(x); // 输出 12

十七、TypeScript 的 Number类

数值构造函数

    var num = new Number(value);

如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

Number类的常量

MAX_VALUE：可表示的最大的数，MAX_VALUE 属性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 "Infinity"。
MIN_VALUE：可表示的最小的数，即最接近 0 的正数 (实际上不会变成 0)。小于 MIN_VALUE ("underflow values") 的值将会转换为 0。
NEGATIVE_INFINITY：负无穷大，溢出时返回该值。该值小于 MIN_VALUE。
POSITIVE_INFINITY：正无穷大，溢出时返回该值。该值大于 MAX_VALUE。
NaN：非数字值（Not-A-Number）。

Number 对象方法

toExponential()：把对象的值转换为指数计数法。
toFixed()：把数字转换为字符串，并对小数点指定位数。
toLocaleString()：把数字转换为字符串，使用本地数字格式顺序。
toPrecision()：把数字格式化为指定的长度。
toString()：把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。
valueOf()：返回一个 Number 对象的原始数字值。

十八、TypeScript 的 String类

String 对象属性

length：返回字符串的长度。

String 对象方法

charAt()：返回在指定位置的字符。
charCodeAt()：返回在指定的位置的字符的 Unicode 编码。
concat()：连接两个或更多字符串，并返回新的字符串。
indexOf()：返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()：从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
localeCompare()：用本地特定的顺序来比较两个字符串。
match()：查找找到一个或多个正则表达式的匹配。
replace()：替换与正则表达式匹配的子串
search()：检索与正则表达式相匹配的值
slice()：提取字符串的片断，并在新的字符串中返回被提取的部分。
split()：把字符串分割为子字符串数组。
substr()：从起始索引号提取字符串中指定数目的字符。
substring()：提取字符串中两个指定的索引号之间的字符。
toLocaleLowerCase()：根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。
toLocaleUpperCase()：据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。
toLowerCase()：把字符串转换为小写。
toString()：返回字符串。
toUpperCase()：把字符串转换为大写。
valueOf()：返回指定字符串对象的原始值。

十九、TypeScript 的 Array类（数组）

指定数组初始化大小

    var arr_names: number[] = new Array(4);

直接初始化数组元素

    var arr_sites: string[] = new Array("Google", "Runoob", "Taobao", "Facebook");

遍历数组：for-in、for-of、every()、filter()、forEach()、some()

    var nums: number[] = [1001, 1002, 1003, 1004]
    // 遍历方法一
    for (var index in nums) {
        console.log(nums[index])
    }
    // 遍历方法二
    for (var val of nums) {
        console.log(val)
    }

Array 对象方法

forEach()：数组每个元素都执行一次回调函数。
every()：检测数值元素的每个元素是否都符合条件。
some()：检测数组元素中是否有元素符合指定条件。
filter()：检测数值元素，并返回符合条件所有元素的数组。
map()：通过指定函数处理数组的每个元素，并返回处理后的数组。
reduce()：将数组元素计算为一个值（从左到右）。
reduceRight()：将数组元素计算为一个值（从右到左）。
concat()：连接两个或更多的数组，并返回结果。
join()：把数组的所有元素放入一个字符串。
toString()：把数组转换为字符串，并返回结果。
indexOf()：搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。
lastIndexOf()：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
pop()：删除数组的最后一个元素并返回删除的元素。
push()：向数组的末尾添加一个或更多元素，并返回新的长度。
shift()：删除并返回数组的第一个元素。
splice()：从数组中添加或删除元素。
unshift()：向数组的开头添加一个或更多元素，并返回新的长度。
slice()：选取数组的的一部分，并返回一个新数组。
reverse()：反转数组的元素顺序。
sort()：对数组的元素进行排序。

二十、TypeScript 的 Map类（字典）

创建 Map 对象

    let myMap = new Map();

创建 Map 对象，并直接初始化字典元素

    let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]);

Map 对象属性

size：返回 Map 对象键/值对的数量。

Map 对象方法

clear()：移除 Map 对象的所有键/值对 。
set()：设置键值对，返回该 Map 对象。
get()：返回键对应的值，如果不存在，则返回 undefined。
has()：返回一个布尔值，用于判断 Map 中是否包含键对应的值。
delete()：删除 Map 中的元素，删除成功返回 true，失败返回 false。
keys()：返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
values()：返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

遍历Map 对象：for-of

    let nameSiteMapping = new Map();
    nameSiteMapping.set("Google", 1);
    nameSiteMapping.set("Runoob", 2);
    nameSiteMapping.set("Taobao", 3);
    // 遍历 Map 中的 key
    for (let key of nameSiteMapping.keys()) {
        console.log(key);
    }
    // 遍历 Map 中的 value
    for (let value of nameSiteMapping.values()) {
        console.log(value);
    }
    // 遍历 Map 中的 key => value
    for (let entry of nameSiteMapping.entries()) {
        console.log(entry[0], entry[1]);
    }
    // 使用对象解析
    for (let [key, value] of nameSiteMapping) {
        console.log(key, value);
    }

二十一、TypeScript 元组

元组和数组有点相似，都可以用[]来创建，访问也可以用下标访问，数组存储的是相同的数据，而元组可以存储不同类型数据。

声明一个元组并初始化

    var mytuple = [10,"Runoob"];
    console.log(mytuple [1]);

元组对象的方法

push()：向元组添加元素，添加在最后面。
pop()：从元组中移除元素（最后一个），并返回移除的元素。

二十二、TypeScript 接口

接口不能转换为 JavaScript，它只是 TypeScript 语法的一部分。
定义接口并使用，接口的用法和定义变量一样，把接口当作一个类型即可。

    interface IPerson {
        firstName: string,
        lastName: string,
        sayHi: () => string
    }
    var customer: IPerson = {
        firstName: "Tom",
        lastName: "Hanks",
        sayHi: (): string => { return "Hi there" }
    }
    console.log("Customer 对象 ")
    console.log(customer.firstName)
    console.log(customer.lastName)
    console.log(customer.sayHi())

输出：

    Customer 对象
    Tom
    Hanks       
    Hi there  

接口的继承，关键字extends，继承的各个接口使用逗号 , 分隔

    // 定义接口
    interface Person {
        age: number
    }
    // 定义新接口，并继承其他接口
    interface Musician extends Person {
        instrument: string
    }
    // 使用并实现接口
    var drummer = <Musician>{};
    drummer.age = 27
    drummer.instrument = "Drums"
    console.log("年龄:  " + drummer.age)
    console.log("喜欢的乐器:  " + drummer.instrument)

二十三、TypeScript 类

类定义方式如下：

    class class_name {
    // 类作用域
    }

使用 new 关键字来实例化类的对象，语法格式如下：

    var object_name = new class_name([ arguments ])

类的继承

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。
TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

    class child_class_name extends parent_class_name{
    // 类作用域
    }

继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。
其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。

public（默认）：公有，可以在任何地方被访问。
protected：受保护，可以被其自身以及其子类访问。
private ： 私有，只能被其定义所在的类访问。

类实现接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。
可选属性是，可以根据要求添加，也可以不添加。使用[]表示。

    class Pron {
        name: string;
        age: number;
    // 定义一个可选的属性，字符串命名的属性，值可以是数字或字符串
        [propName: string]: number | string;
    }
    var p: Pron = {
        name: "John",
        age: 30,
        height: 1.7,
        weight: "60kg"
    }
    console.log(p); // John

可以使用constructor()构造函数简化类的属性声明

    class Pron {
    private _name: string;
    private _age: number;
    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }
    get getname(): string {
        return this._name;
    }
    set setname(value: string) {
        this._name = value;
    }
    get getage(): number {
        return this._age;
    }
    set setage(value: number) {
        this._age = value;
    }

    }
    
    
    // 可以简化成如下形式
    class Person {
        constructor(public _name: string, private _age: number) { }
        get age(): number {
            return this._age;
        }
        set age(value: number) {
            this._age = value;
        }
        get name(): string {
            return this._name;
        }
        set name(value: string) {
            this._name = value;
        }
    }
    var p: Pron = new Pron("John", 25);
    console.log(p.getname); // Mike
    console.log(p.getage);
    p.setname = "Mike";
    p.setage = 30;
    console.log(p.getname); // Mike
    console.log(p.getage); // 25
    console.log("===================");
    var pp: Person = new Person("John", 25);
    console.log(pp.name); // Mike
    console.log(pp.age);
    pp.name = "Mike";
    pp.age = 30;
    console.log(pp.name); // Mike
    console.log(pp.age); // 25

二十三、TypeScript static 关键字

关键字：声明静态属性、方法、变量
static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

二十三、TypeScript instanceof 运算符

作用：判断对象是否是指定的类型。
instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

二十四、TypeScript 泛型

在泛型中，通常使用一些约定俗成的标识符如下

T: 代表 "Type"，是最常见的泛型类型参数名。
K, V: 用于表示键（Key）和值（Value）的泛型类型参数。
E: 用于表示数组元素的泛型类型参数。
R: 用于表示函数返回值的泛型类型参数。
U, V: 通常用于表示第二、第三个泛型类型参数。

二十五、TypeScript 命名空间

命名空间一个最明确的目的就是解决重名问题

TypeScript 中命名空间使用 namespace 来定义，使用 export 来暴露方法或变量

    namespace SomeNameSpaceName {
        export interface ISomeInterfaceName {      }
        export class SomeClassName {      }
    }

在另外一个命名空间调用

    SomeNameSpaceName.SomeClassName;

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它

    /// <reference path = "SomeFileName.ts" />

二十六、TypeScript 模块

模块是在其自身的作用域里执行，定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块导出使用关键字 export 关键字

    // 文件名 : SomeInterface.ts
    export interface SomeInterface {
    // 代码部分
    }

要在另外一个文件使用该模块就需要使用 import 关键字来导入

    import someInterfaceRef = require("./SomeInterface");