TypeScript

TypeScript

安装

npm i -g typescrip

yarn global add typescript

运行

tsc --init

数据类型

JavaScript数据类型
基本	引用
number	Array
string	object
null	function
undefined
boolean
Symbol

---

TypeScript数据类型
number
string
null
undefined
boolean
tuple(元组)
enum(枚举)
void(没有返回值)
never(从来没有出现过的值)
any(任意)

• enum(枚举)
  • 如果没有初始化就会被当作常数，这是第一项为0，其余为前一项加一
• never(从来没有出现过的值)
  • 永远达不到的
  • 例如:让他报错 就是永远达不到的
• any(任意类型)
  • 可以给他赋任何值
• void(没有返回值)
  • 可以上强制让函数没返回值
  • 函数四要素
    • 参数
    • 返回值
    • 函数的作用
    • 函数何时调用

---

方法和类

• 实例属性 , 类属性 , 实例方法 , 类方法
• 访问修饰符:修饰方法,属性
  • public:共有方法(在哪使用,都可以(本类,子类,类外))
  • private:私有方法(只能在本类使用)
  • protent:受保护的(只能在本类,子类使用)

class Person{
    static age:number=1000;
    name:string;
    constructor(){
        this.name="孙悟空" //实例属性
    }
    get():string{ //实例方法
        return this.name
    }
    set(name:string):void{ //实例方法
        this.name=name
    }
    static statcFn(){ //类方法
        console.log("类方法")
    }
}
//实例
let p=new Person()
Person.age//类属性
Person.statacFn()//类方法

可选参数+参数默认值

    function getInfo(name:string,age?:number=18):string{
            if(age){
                return name+age
            }else{
                return name
            }
    }

剩余参数 rest参数 …

    function sum(...args:number[]):number{
        let res=0
    args.forEach(item=>{
        res+=item
    })
}
sum(1,2,3,4,5,6)

重载

• 使用场景:多人协作开发同一个项目的时候
• 重载:同一个函数提供多个函数类型定义来进行函数重载。
• 方法构成:方法名,参数,方法体
• 函数构成:函数名,参数,函数体

   function getInfo(name:string):string
   function getInfo(age:number):string
   function getInfo(name:any,age?:any):any{
           if(age){
               return name+age
           }else{
               return name
           }
   }

继承(extends)

• 子类继承父类的所有
• 继承

  class ChildRen extends Father{
      constructor(){
          super()
      }
  }   

抽象(abstract)

• 抽象就是规则
• 关键字 abstract
• 继承抽象类 必须用抽象类的东西

  abstract class Father{
      //抽象属性
      abstract str:string="我是爸爸",
      //抽象方法
      abstract fun(name:string):string
      //普通方法
      func2(){}
  }

接口(interface)

• 类似于抽象 同上
• 接口可以继承接口

interface FullName{
        MyName:string,
        YouName:string
}
function Ceshi(AllName:FullName){
    console.log(AllName.MyName,AllName.You)
}
let N={
    MyName:"leaphy",
    YouName:"WuQuL"
}
Ceshi(N)

参数接口

interface Config{
    type:string,
    url:string,
    data:any,
    dataType:string
}
function ajax(obj:Config){
    let xhr=new XMLHttpRequest();
            //              同步/异步
    xhr.open(obj.type,obj.url,true)
    xhr.send(obj.data)
    xhr.onreadystatechange=function(){
           if(xhr.status===200){

           } else{

           }
    }
}
 ajax({
    type:"GET",
    url:"/api/getList",
    data:{"name":"leaphy"},
    dataType:"json"
})

类 类型接口

• 接口用<>包住 放到类后面

interface IProp{
    name:string
}
class Index extends React.Component<IProp>{
    render(){
        let {name}=this.props
        return <div></div>
    }
}

方法接口

• 同抽象

    interface N{
        (name:string):string
    }
    let MyName:N=function(name:string):string{
        return name
    }

类型断言

• 你比ts更了解,你要使用的类型
• 语法:尖括号 as

//尖括号
let val:any="string"
let strlength:number=(<number[]>val).length
//as
let str1: any = "string";
let strLength1: number = (str as string).length;

泛型

• 泛型就是在编译期间不确定方法的类型(广泛之意思)，在方法调用时，由程序员指定泛型具体指向什么类型

装饰器

• 在不修改类中方法的时候,添加额外功能
• @符号 装饰器的语法糖
• 种类:类装饰器,属性装饰器,方法装饰器,方法参数装饰器

//类装饰器
function A(name: string) {
   //name是A函数的参数  target是Demo类
   return function (target: any) {
       console.log(name, target)
       let NEW=new target();
       NEW.say()//
   }
}
//属性装饰器
function B(name:string){
                   //Demo类    属性名
   return function(target:any,attrName:any){
       console.log(attrName)//属性名 state
   }
}
//方法装饰器
function C(name: string) {
                                //方法名      数据属性
   return function (target: any, fnName: any, desc: any) {
       console.log(fnName, desc)//方法名 数据属性
   }
}
@A("leaphy")//类装饰器
class Demo {
   @B("属性装饰器")
   state!: string;
   @C("方法装饰器")
   say(){
       console.log("这是我想说的")
   }
}

Ts中的单例

饿汉式

//单例 饿汉式(以上来就加载)
class SingleTon {
   //私有静态变量
   private static _instance = new SingleTon()
   private constructor() { }
   public static getInstance(): SingleTon {
       return SingleTon._instance
   }
}
let a = SingleTon.getInstance();
let b = SingleTon.getInstance();
console.log(a === b, "ab")

懒汉式

//饿汉式(什么时候用,什么时候加载)
class SingleTon2 {
   private static _instance: SingleTon2;
   private constructor() { }
   public static getInstance(): SingleTon2 {
       if (!SingleTon2._instance) {
           SingleTon2._instance = new SingleTon2()
       }
       return SingleTon2._instance
   }
}
let c = SingleTon2.getInstance();
let d = SingleTon2.getInstance();
console.log(c === d, "cd")

前端自动化

• require.context(当前路径,boolean,正则表达式)
• directory {String} -读取文件的路径
• useSubdirectories {Boolean} -是否遍历文件的子目录
• regExp {RegExp} -匹配文件的正则

  require.context('./test', false, /.test.js$/);