typescript学习记录笔记

阳光穿透心脏的1/2处 2023-07-25 08:43 80阅读 0赞

typescript

### 仅个人学习记录使用 ###

### 目录 ###

*   *   *  仅个人学习记录使用
         *  基础语法
         *  TypeScript基础类型
         *  变量声明
         *   *   *  变量作用域
         *  运算符
         *  循环
         *   *   *  for...in
                 *  for...of
                 *  forEach
                 *  every
                 *  some
                 *  do...while 循环
                 *  break语句
                 *  continue 语句
         *  函数
         *   *   *  Lambda函数
                 *  函数重载
         *  Number
         *   *   *  prototype实例
                 *  Number对象方法
         *  String 字符串
         *  Array 数组
         *   *   *  数组解构
                 *  数组迭代
                 *  多维数组
         *  元祖
         *   *   *  元祖运算
                 *  解构元祖
                 *  联合类型
         *  接口
         *   *   *  实例：
                 *  接口继承
         *  类
         *   *   *  创建类的数据成员
                 *  类的继承
         *

安装

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

编译

tsc test.ts

### 基础语法 ###

TypeScript面向对象编程实例

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

编译后生成的JavaScript代码：

### 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代码：

### 运算符 ###

### 循环 ###

##### 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 = "admin@runoob.com"
    
    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
    
    ###  ###