TypeScript笔记

关于 typescript ：

typescript是JavaScript的超级，是一个编程语言，静态类型和面向对象的语言

PS：typescript是重用js，它可以引入js的流行库

安装：

//命令行安装
npm i typescript -g //全局安装typesctipt
//检测是否安装成功 命令行输入  tsc --version
//初始化package.json 命令行输入  npm init -y //采取默认的形式
//初始化tsconfig.json 命令行输入 tsc --init
//初始化types/node包  命令行输入  npm install @type/node --dev--save

ts变量类型：

1.Undefind 未定义类型
2.Number 数值类型
3.string 字符串类型
4.Boolean 布尔类型
5.enum 枚举类型
6.any  任意类型
7.void 全类型
8.Array 数组类型
9.Tuple 元组类型
10.Null 空类型 

typescript是强类型语言，因此在定义变量的时候必须带上定义的类型
例如：定义一个数值   lei a:number = 12 //定义了一个数值类型a，赋值为12

ts定义函数

//正常的函数
function myFn(name:string):string{
    console.log('定义的一个函数')
}

定义一个函数，形参必须制定好类型，而且函数返回值的类型也要正确指定好，形参和实参的对应的类型必须一致

//对于有可选参数的函数
function myFn(name:string,age?:number):string{
    console.log('定义的一个函数')
}

//有可选参数的函数，可选参数，age用来定义可选，就在定义的形参后面加上一个  “？”去定义

//有默认参数的函数
function myFn(name:string,age:number=22):string{
    console.log('定义的一个函数')
}

//在需要添加默认参数的形参后面直接赋值即可  age:number=22

//有剩余参数的函数

function myFn(...canshu:string[]):string{
    console.log('定义一个有剩余参数的函数',canshu)
}
//直接利用ES6的解构  ...canshu:string[] 类型是字符串，以数组的形式传进去的参数
//在函数内部直接调用即可

函数声明

//1.函数声明法
function add(n1:number,n2:number):number{
    return n1+n2
}
//2.函数表达式法
var add = function (n1:number,n2:number):number{
    return n1 + n2
}
//3.箭头函数定义，在typescript里面，是完全支持使用ES6的语法的
var add = (n1:number,n2:number):number =>{
    return n1 +n2
}

变量的作用域

TypeScript中，变量的作用域的划分是以函数为标准的

局部变量：函数体内定义的变量就是局部变量
全局变量：函数体内定义的变量就是全局变量

当全局变量和局部变量重名的时候，在函数体内的局部有变量起作用，在有重名的情况下，就会有变量提升出现

在ES6语法中，对应作用域的贡献就是 
let 定义的变量，此时定义的变量是有块级作用域的

引用类型

ts的引用类型是一种符合的数据类型，引用类型中可以封装很多对属性，每一对属性都有属性名和属性值。属性名是字符串，属性值是任意类型的数据，可以通过变量名和属性名获取属性的值或者调用属性的方法

在ts中，提供了一些常用的引用类型，例如：Array(数组)，String(字符串)，Date(日期对象)，RegExp(正则表达式)等


初始化数组的两种方法
1.声明数组的方法
声明数组跟声明一个普通的变量是一样的，都是用过 var let 关键字实现的，只不过数组的类型说明符比较复杂而已。
let arr1:number[]//声明一个数值类型的数组
let arr2:Array<string> //声明一个字符串类型的数组
给数组赋值
数组是存储大量数据的集合，声明数组之后，需要给数组存储数据
方法两种：
1.字面量赋值法：直接使用“[]”对数组进行赋值
2.构造函数赋值法：
**字面量赋值法**
    let arr1: number[] = []
注意：在typescript中。指定数据类型的数组只能存储同一类型的数组元素

**构造函数赋值法**
    let arr1:number = new Array()

元组，一种特殊的数组

元组是一种特殊的数组，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
但是一般开发不用

引用类型-字符串

字符串的两种类型：
基本类型字符串：由单引号或者双引号括起来的一串字符串
引用类型字符串：用new实例化的string类型

这两种声明字符串的方法没有什么不同，基本类型的字符串可以直接使用引用类型的属性和方法

字符串的长度length。可以用来获取字符串的长度
let zhu:string = '你是猪'
console.log(zhu.length) //3

小部分字符串的方法：
1.查找字符串  基本语法:str.indexOf(subStr)
查找到返回字符串的位置，找不到返回 -1
从字符串尾部开始查找字符串的位置，实例  lastIndeOf()

注意，返回的都是字符串的下标，所以返回值是相同的，并不是返回从后到前的下标位置

截取字符串
基本语法：str.substring(startIndex,[endIndex])
参数startIndex表示开始下标，endIndex表示结束下标，endIndex参数是可选，该方法的作用是从制度的开始下标开始截取字符串，截取到endIndex的下标之前，如果没有endIndex，则截取字符串结束


替换字符串
基本语法：str.replace(subStr,newStr)
subStr表示被替换的子串，newstr表示要替换成的子串，该方法的作用是在str中从头部开始找substr子串，找到之后，吧str用newstr替换掉，需要注意的是如果str中有多个substr子串，只有第一个substr子串会被替换掉！

引用类型 日期对象

TypeScript中适用Date这个引用类型来存储日期对象，
创建日期对象
1.不传递任何参数
构建函数中不传递参数时，Date()构造函数将根据当前日期创建一个Date对象
let d:Date = new Deta()

2.传递一个整数，
传递一个整数，这个整数代表的是距离1970-01-01 00:00:00 的毫秒数，
let d:Date = new Date(1000)

3.传递一个字符串
如果传递一个表示日期的字符串，就会生成相对于的日期对象，
字符串的常用格式：
YYYY/MM/DD HH:MM:SS , YYYY-MM-DD HH:MM:SS , YYYY-MM-DDTHH:MM:SS
let d:Date() = new Date('YYYY/MM/DD HH:MM:SS')
let d:Date() = new Date('YYYY-MM-DD HH:MM:SS')
let d:Date() = new Date('YYYY-MM-DDTHH:MM:SS')

4.传递表示年月日时分秒的变量
let d:Date = new Date(year,month,day,hours,minutes,seconds,ms);

引用类型，正则表达式

创建正则的两种方式：

1.采用new关键字

2.采用字面量的方式

构造函数法：

构造函数中可以传一个参数，也可以传递两个参数。一个是字符串描述，另一个是修饰符。

修饰符：

g 表示全局修饰符

i 是忽略大小写

m是多行模式

构造函数：

let reg1:RegExp = new RegExp('zhu')

let reg2:RegExp = new RegExp('zhu','gi')

字面量法：

构造函数法在适用的过程中比较少，大多数都是字面量法去声明正则

let reg1:RegExp = /zhu/

let reg2:RegExp = /zhu/gi

RegExp中的常用方法

RegExp对象包含两个方法：test() 和exec(),功能基本相似，用于测试字符串匹配

test(sting):在字符串中查找是否存在指定的正则表达式，并返回布尔值，如果存在返回true，不存在返回false

exec(string):用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息，如执行失败，则返回null

let reg1:RegExp =  /zhu/i
let website:string = 'zhu.com'
let result:boolean = reg1.test(website)
console.log(result)    //true


let reg1:RegExp =  /zhu/i
let website:string = 'zhu.com'
console.log(reg1.exec(website))
//[ 'jspang', index: 0, input: 'zhu.com' ]

面向对象编程-类的声明和使用：

TypeScript提供了强大的类的支持，类的出现可以让前端程序员抽象层次，增加维护性和复用性。

TypeScript是基于类的面向对象编程语言

认识类

类是对象具体事务的一个抽象，对象是类的具体表现

类的定义：

class zhu{

	name:string

	age:string

	constructor(name:string,age:string){

		this.name = name

		this.age = age

	}

	say(){

		console.log('这是一个类的定义')

	}

}
首先，先用Class关键字声明了一个类，并在里面声明了name和age属性。constructor为构造函数。
构造函数的主要作用是给类中封装的属性进行赋值

适用和定义类其实很简单，关键是理解类的思想。要有抽象逻辑的能力，这样才能复印和增强维护性

面向对象编程-修饰符

类中的修饰符是最常见的，TypeScript为我们准备了丰富的修饰符，

访问修饰符

typescript语言中，类中属性的访问可以用访问修饰符来进行限制

访问修饰符分别为：public protected private

public 公有修饰符，可以在类内或者类外使用public修饰符的属性或者行为，默认修饰符

protected 受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为

private 私有修饰符，只可以在类内使用private修饰的属性和行为

class zhu{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.sex=sex
        this.name=name
        this.age=age
    }
    public sayHello(){
        console.log('你是大猪')
    }

    protected sayLove(){
        console.log('你是猪')
    }
}

var zhuzhu:zhu = new XiaoJieJie2('猪','肥猪',22)

console.log(zhuzhu.sex)
console.log(zhuzhu.name)   //报错
console.log(zhuzhu.age)    //报错
jiejie2.sayHello()
jiejie2.sayLove()    //报错

只读修饰符

使用readonly修饰符将属性设置为只读，只读实现必须在生命是或者构造函数里被初始化（注意）

class Man{
    public readonly sex:string = '男'
}

var man:Man = new Man()
man.sex='女'
你会发现，这样去赋值的是，编译器就直接报错了，只读属性不能被修改

面向对象编程-继承和重写

类的继承

typescript一个重要基本功就是面向对象编程，那对类的扩展就变得额外重要，扩展经常使用的手段就是继承

继承‘：允许我们创建一个类（子类），从已有的类（父类）上继承所有的属性和方法，子类可以新建父类中没有的属性和方法

//创建一个父类

class parent{
    public name:string
    public age:number
    constructor(name:string,age:string){
        this.name = name
        this.age = age
    }
    public parentFn(){
		console.log('这是一个父类的类')
    }
}
//子类继承父类
class parent extends child {
    public face:string
    public childFn(){
        console.log('这是子类的函数')
    }
}

extends 关键字是继承的重点
在TypeScript里面是不支持多重继承的

类方法的重写

重写就是在子类中重写父类的方法

class parent extends child {
    public face:string
    public parentFn(){
        super.parentFn()
        console.log('重写父类的方法')
    }
    public childFn(){
        console.log('这是子类的函数')
    }
}

先是继承了父类的方法，然后通过super关键字调用了父类的方法，实现了技能的增加

面向对象编程-接口

认识接口：

定义接口的关键字是 interface，

interface shazhu{
    zhuname:string
    weight:string
}
let myshazhu.shazhu = {zhuname:'肥猪',weight:'180斤'}

定义了一个杀猪的接口，两个必选项

可选参数接口：

interface shazhu{
    zhuname:string
    weight:string
    dao?:Boolean
}
    
 let myshazhu.shazhu = {zhuname:'肥猪',weight:'180斤',dao:true}

定义的 dao 选项是可选的，可以写也可以不写

面向对象编程-命名空间

为了让程序更加有层次感和变量之间不互相干扰，可以使用命名空间去构建程序

命名空间，又称内部模块，被用于组织有些具有内在联系的特性和对象

namespace shuaiGe{
    export class Dehua{
        public name:string = '刘德华'
        talk(){
            console.log('我是帅哥刘德华')
        }
    }
}

namespace bajie{
    export class Dehua{
        public name:string = '马德华'
        talk(){
            console.log('我是二师兄马德华')
        }
    }
}

let dehua1:shuaiGe.Dehua   = new shuaiGe.Dehua()
let dehua2:shuaiGe.Dehua   = new bajie.Dehua()
dehua1.talk()