TypeScript初学笔记

1 JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

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

2 基础类型

任意类型：any，声明为 any 的变量可以赋予任意类型的值。针对编程时类型不明确的变量使用的一种数据类型。

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

数字类型：number，双精度 64 位浮点值。它可以用来表示整数和分数。

字符串类型：string，一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

布尔类型：boolean，表示逻辑值：true 和 false。

数组类型：无，声明变量为数组。

// 在元素类型后面加上[]
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

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

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

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

null：null，表示对象值缺失。

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

never：never，never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

3 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。

• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

• 变量名不能以数字开头。

类型断言：类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

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

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

变量作用域

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)

4 运算符

TypeScript 主要包含以下几种运算：

• 算术运算符
• 逻辑运算符
• 关系运算符
• 按位运算符
• 赋值运算符
• 三元/条件运算符
• 字符串运算符
• 类型运算符

5 函数

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

必须参数和可选参数

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 buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

更多用法见 菜鸟教程 https://www.runoob.com/typescript/ts-tutorial.html