typescript学习记录笔记

typescript

仅个人学习记录使用

安装

# 安装
npm install -g typescript
# 版本查看
tsc -v

编译

tsc test.ts

基础语法

TypeScript面向对象编程实例

class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();

编译后生成的JavaScript代码：

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

TypeScript基础类型

// 【任意类型 any】；string boolean number 声明类似
let a:any = 1

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

// 【元组】元组类型用来表示已知元素和类型的数组，各元素的类型不必相同对应位置的类型需要相同
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用于标识方法返回值的类型，标识该方法没有返回值
function hello():void {
    alert("Hello!");
}

// 【null】 表示对象值缺失
// 【undefined】 用于初始化变量为一个未定义的值
// 【never】 never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

TypeScript变量的命名规则：

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

// 可以使用var声明变量
var [变量名]: [类型] = 值;
var uname:string = 'Runoob';

// 没有初始值，会设置为undefined
var [变量名]: [类型];

// 没有设置类型，该变量可以是任意类型
var [变量名] = 值

变量作用域

变量作用域指定了变量定义的位置。

作用域：

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

var global_num = 12   // 全局变量
class Numbers {
  num_val = 13; // 实例变量
  static sval = 10;  // 静态变量

  storeNum ():void {
    var local_num = 14; // 局部变量
    console.log("局部变量："+ local_num);
  }
}

console.log("全局变量："+ global_num);
console.log("静态变量："+ Numbers.sval);
var obj = new Numbers();
console.log("实例变量："+ obj.num_val);
obj.storeNum();

编译为JavaScript代码：

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
        console.log("局部变量：" + local_num);
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
console.log("全局变量：" + global_num);
console.log("静态变量：" + Numbers.sval);
var obj = new Numbers();
console.log("实例变量：" + obj.num_val);
obj.storeNum();
/* 打印结果
全局变量：12
静态变量：10
实例变量：13
局部变量：14
*/

运算符

循环

for…in

var j;
var n = "a b c";
for (j in n) {
    console.log(n[j]);
}

for…of

for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。for…of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

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
});

some

while 循环

while(condition)
{
   statement(s);
}

do…while 循环

do
{
   statement(s);
}while( condition );

break语句

• 当break语句出现在一个循环内时，且循环会立即终止，且程序流将继续执行紧接着循环的下一条语句。
• 它可用于终止switch 语句中的一个case。
• 如果您使用的是嵌套循环（即一个循环内嵌套另一个循环），break 语句会停止执行最内层的循环，然后开始执行该块之后的下一行代码。

continue 语句

• continue会跳过当前循环中的代码，强迫开始下一次循环
• 对于for循环，continue语句执行后自增语句仍会执行；
• 对于while和do…while循环，continue语句重新执行条件判断语句

无限循环

无限循环就是一直在运行不会停止的循环。for和while循环都可以创建无限循环。

for(;;){
    // 语句
}
while(true) {
    // 语句
}

函数

Lambda函数

Lambda函数也称为箭头函数

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

函数重载

• 重载时方法名相同，而参数不同，返回类型可以相同也可以不同。

• 每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表

参数类型不同：

function disp(string):void; 
function disp(number):void;

参数数量不同：

function disp(n1:number):void; 
function disp(x:number,y:number):void;

参数类型顺序不同：

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Number

prototype实例

function employee(id:number, name:string) {
    this.id = id
    this.name = name
}
var emp = new employee(123, "admin")
employee.prototype.email = "[email protected]"

console.log("员工号:" + emp.id)
console.log("员工姓名:" + emp.name)
console.log("员工邮箱:" + emp.email)

Number对象方法

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

String 字符串

var txt = new String("string")
// 或
var txt = "string"

// length 返回字符串的长度
console.log(txt.length)

• charAt() 返回在指定位置的字符
• charCodeAt() 返回在指定的位置的字符的Unicode编码
• concat() 连接两个或者更多字符串，并返回新的字符串
• indexOf() 返回某个指定的字符串值在字符串中首次出现的位置
• lastIndexOf() 从后向前搜索字符串，并从起始位置(0)开始计算返回字符串最后出现的位置。

var str1 = "1234567890987654321"
str1.lastIndexOf('1') // 18

• localeCompare() 用本地特定的顺序来比较两个字符串（可实现按拼音排序）

• match() 查找找到一个或多个正则表达式的匹配

  var str = "The rain in SPAIN stays mainly in the plain"
  var n = str.match(/ain/g)	// ain,ain,ain
  

• replace() 替换与正则表达式匹配的子串

  var re = /(\w+)\s(\w+)/;
  var str = "zara ali";
  var newstr = str.replace(re, "$2, $1");
  console.log(newstr); // ali, zara
  

• search() 检索与正则表达式相匹配的值

• slice() 提取字符串的片段，并在新的字符串中返回被提取的部分

• split() 从起始索引号提取字符串中指定数目的字符

• substring() 提取字符串中两个指定的索引号之间的字符

• toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。

• toLocaleUpperCase() 据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。

• toLowerCase() 把字符串转换为小写。

• toUpperCase() 把字符串转换为大写。

• toString() 返回字符串

• valueOf() 返回指定字符串对象的原始值

Array 数组

数组解构

var arr:number[] = [12, 13]
var [x, y] = arr // 将数组的两个元素复赋值给变量 x 和 y

// 编译后的js代码
var arr = [12, 13]
var x = arr[0], y = arr[1]

数组迭代

var j:any;
var nums:number[] = [1001, 1002, 1003, 1004]
for(j in nums) {
    console.log(nums[j])
}

多维数组

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

元祖

数组中元素的数据类型都一般是相同的（any[]类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元祖。

元祖中允许存储不同类型的元素，元祖可以作为参数传递给函数。

var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) 
console.log(mytuple[1])

元祖运算

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

解构元祖

var a = [10, "runoob"]
var [b, c] = a
console.log(b)
console.log(c)

联合类型

联合类型（UnionTypes）可以通过管道（|）将变量设置多种类型，随时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其他类型就会报错

var val:string|number
val = 12
console.log("数字为：" + val)
val = "Runoob"
console.log("字符串为：" + val)

接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要有具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

interface interface_name {}

实例：

定义一个接口IPerson，定义一个变量customer，它的类型是IPerson。

interface IPerson {
    firstName:string,
    lastName:string,
    sayHi: ()=>string
}

var custom:IPerson = {
    firstName: "Tom",
    lastName: "Hanks",
    sayHi: ()=> {return "Hi there"}
}
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript允许接口继承多个接口。

继承使用关键字 extends

// 单接口继承语法格式
Child_interface_name extends super_interface_name

// 多接口继承语法格式
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

类

Typescript是面向对象的JavaScript。

class class_name {
    // 类作用域
}

定义类的关键字为class，后面紧跟类名，类可以包含以下几个模块：

• 字段 - 字段是类里面声明的变量。字段表示对象的有关数据
• 构造函数 - 类实例化时调用，可以为类的对象分配内存。
• 方法 - 方法为对象要执行的操作

创建类的数据成员

class Car {
   // 字段
    engine:string;
    
   // 构造函数
   constructor(engine:string){
       this.engine = engine
   }
   
   // 方法
   disp():void {
       console.log("发动机为： " + this.engine)
   }
}

编译后JavaScript代码为：

var Car = /** @class */ (function () {
    // 构造函数
    function Car(engine) {
        this.engine = engine
    }
    // 方法
    Car.prototype.disp = function () {
        console.log("发动机为：" + this.engine)
    }
}())

创建实例化对象，语法格式如下：

// 类实例化时会调用构造函数
var object_name = new class_name([arguments])
// 访问属性
object_name.field_name
// 访问方法
object_name.function_name()

完整实例：

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

类的继承

• 在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类；

• 类继承使用关键字 extends,子类处除了不能继承父类的私有成员（方法和属性）和构造函数，其它的都可以继承。

• Typescript一次只能继承一个类，不支持继承多个类，但Typescript支持多重继承（A继承B，B继承C）

  class child_class_name extends parent_class_name