TypeScript学习【一】

1. JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，TypeScript 通过类型注解提供编译时的静态类型检查。

const hello : string = "Hello World!"
console.log(hello)

2. 安装

npm install -g typescript

2.1 查看版本

tsc -v

2.2 第一行helloword

1. 扩展文件名是：.ts
2. 新建.ts文件

var message:string = "Hello World" 
console.log(message)

3. 终端执行：tsc app.ts
   同时编译多个 ts文件：tsc file1.ts file2.ts file3.ts
4. 这时候在当前目录下（与 app.ts 同一目录）就会生成一个 app.js 文件，代码如下：

var message = "Hello World";
console.log(message);

5. 使用 node 命令来执行 app.js 文件：
   node app.js
   

• TypeScript 通过 TypeScript Compiler 转换为 JavaScript

3. TypeScript 基础语法

• 区分大小写
• 分号可选（同一行使用；不同行可以不使用）
• 面向对象

4. TypeScript 基础类型

TypeScript 包含的数据类型如下：

• any：声明为 any 的变量可以赋予任意类型的值。
  任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。

  //1. 变量的值会动态改变时，任意值类型可以让这些变量跳过编译阶段的类型检查
  	let x: any = 1;    // 数字类型
  	x = 'I am who I am';    // 字符串类型
  	x = false;    // 布尔类型
  	
  //2. 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
  	let x: any = 4;
  	x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
  	x.toFixed();    // 正确
  //3. 定义存储各种类型数据的数组时
  	let arrayList: any[] = [1, false, 'fine'];
  	arrayList[1] = 100;
  

• number：双精度 64 位浮点值。它可以用来表示整数和分数
  let hexLiteral: number = 0xf00d; // 十六进制
• string：一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

  let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
  

• boolean
• 数组类型

  // 在元素类型后面加上[]
  let arr: number[] = [1, 2];
  
  // 或者使用数组泛型
  let arr: Array<number> = [1, 2];
  

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

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

• enum：枚举类型用于定义数值集合。
• void：用于标识方法返回值的类型，表示该方法没有返回值。

  	function hello(): void {
  	alert("Hello Runoob");
  }
  

• null：表示对象值缺失。用 typeof 检测 null 返回是 object。
• undefined：用于初始化变量为一个未定义的值，typeof 一个没有值的变量会返回 undefined。

  //Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型
  // 启用 --strictNullChecks
  let x: number;
  x = 1; // 编译正确
  x = undefined;    // 编译错误
  x = null;    // 编译错误
  //用 | 来支持多种类型
  // 启用 --strictNullChecks
  let x: number | null | undefined;
  x = 1; // 编译正确
  x = undefined;    // 编译正确
  x = null;    // 编译正确
  

• never ：never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。never 类型的变量只能被 never 类型所赋值

  let x: never;
  let y: number;
  
  // 编译错误，数字类型不能转为 never 类型
  x = 123;
  
  // 运行正确，never 类型可以赋值给 never类型
  x = (()=>{ throw new Error('exception')})();
  
  // 运行正确，never 类型可以赋值给 数字类型
  y = (()=>{ throw new Error('exception')})();
  
  // 返回值为 never 的函数可以是抛出异常的情况
  function error(message: string): never {
  	 throw new Error(message);
  }
  
  // 返回值为 never 的函数可以是无法被执行到的终止点的情况
  function loop(): never {
  	while (true) {}
  }
  

5.TypeScript 变量声明

TypeScript 变量的命名规则：

变量名称可以包含数字和字母。
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
变量名不能以数字开头。

四种方式来声明变量：

	//声明变量的类型及初始值
	var [变量名] : [类型] = 值;
	//声明变量的类型，但没有初始值，变量值会设置为 undefined：
	var [变量名] : [类型];
	//声明变量并初始值，但不设置类型，该变量可以是任意类型：
	var [变量名] = 值;
	//声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：
	var [变量名];

注意：变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

类型断言（Type Assertion）:允许变量从一种类型更改为另一种类型。

类型断言是一个编译时语法，不涉及运行时【而类型转换是运行时语法】类型断言不是类型转换，它不会真的影响到变量的类型
值 as 类型(推荐)或 <类型>值
形如 <Foo> 的语法在 ts 中除了表示类型断言之外，也可能是表示一个泛型，故建议在使用类型断言时，使用 值 as 类型 语法
断言参考
类型断言是有限制的，并不是任何一个类型都可以被断言为任何另一个类型。具体来说，若 A 兼容 B，那么 A 能够被断言为 B，B 也能被断言为 A

双重断言

使用双重断言，则可以打破要使得A能够被断言为 B，只需A 兼容 B 或B兼容A即可的限制，可以使用双重断言 as any as Foo ，将任何一个类型断言为任何另一个类型

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

var num = 2;    // 类型推断为 number
console.log("num 变量的值为 "+num); 
num = "12";    // 编译错误
console.log(num);

变量作用域

• 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。

• 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。

• 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

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)

6 TypeScript 运算符

算术运算符
逻辑运算符
关系运算符
按位运算符
赋值运算符
三元/条件运算符
字符串运算符
类型运算符
typeof 是一元运算符，返回操作数的数据类型。
其他运算符

• 负号运算符(-)
• 字符串运算符: 连接运算符 (+)

7. TypeScript 条件语句

1. if
2. if…else
3. if…else if…else
4. switch…case

8 TypeScript 循环

1. for( ; ; ){}
2. for(i in list){}
3. for(i of list){}
4. forEach
5. every
6. some
7. while（）{}
8. do{}where（）

break：语句会停止执行最内层的循环
continue：会跳过当前循环中的代码，强迫开始下一次循环

//for in
var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}
//for of
let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}
//foreach
let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});
//every
let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});