TypeScript总结--一文在在手，ts无忧

ts数据类型总结

10种数据类型：string, number， boolean, 数组, 元组（和数组类似，但已知类型和数量）, undefined和null, Any（任何值）, void（没有任何值，函数返回没有值）, enum（枚举类型）, never（永远不会有值的类型，常用抛出异常）

// string, number, boolean
let str:string = ''
let num:number = 1
let falg:boolean= true

// 数组
let arr:number[] = [1, 2]
let arr2:Array<string> = ['1', 'sehf']

// 元组
let arr3:[number, string, boolean] = [1, '112d', false]

// undefined和null
let u: undefined = undefined;
let n: null = null;

// Any
let str:Any = ''
str = 123

// void
function fun():void{ console.log(1111) }

// never
let error:never;
error = (()=>throw new Error('错误'))()

ts函数使用部分特殊总结

// 可选参数（参数后加?）
function func4(a1:string, a2?:number):string{}

// 剩余参数（... 3点运算符）
function func6(a:number, ...result:number[]):number{ return 数字 }
console.log(func6(1,2,3,4,5))

// 方法重载（根据传入参数类型进行判断）
function gitInfo(name:string):string;
function gitInfo(age:number):string;
function gitInfo(param:any):any {
    if (typeof param === 'string'){
        return `我叫${param}`
    }
    return `我的年龄是${param}`
}

// 箭头函数
let func7 = (name:string):any=>name

ts类总结

1. 类定义：class， 类继承：extends
2. 类里修饰符：public， protected， private

public //公共的（类中，子类，类外都可访问）
protected //受保护（类，子类中可以访问，类外不能访问）
private //私有（类中可以访问，其他不可访问）
static //静态参数，方法，直接绑定在类上，不用new可直接访问

3. 抽象类（用来继承，抽象类的子类必须实现抽象方法）：abstract定义

// 类定义
class Person {
    name:string; //定义属性
    static sex:string = '男';
    constructor(n:string) { //构造函数，实例化时触发
        this.name = n;
    }
    
    run():void{
        console.log(this.name);
    }
    
    static print(){ //静态方法
        console.log('静态方法')
    }
   
}

let newClass = new Person('张三')
Person.print()

ts接口总结

接口的作用：在面向对象过程中，接口是一种规范的定义，它定义的行为和动作规范，在程序设计里面，接口起到限制和规范作用。
接口定义某一批类所需要的规范，接口不关心这些类内部状态数据，也不关心这些类里方法实现的细节，它只规定这批类必须提供的方法。

1. 属性接口：

interface FullName {
    firstName:string;
    age?:number; //可选属性
    readonly secondName: string; //只读不可改
}

function printName(name:FullName) {
    //必须传入对象
    console.log(name)
    console.log(name.firstName + '---' + name.secondName)
}

let obj = {
    firstName: '123',
    secondName: '456'
}
obj.secondName = 'ja;fj' //不可改，报错

2. 函数类型接口：对方法换入的参数 以及返回值进行约束

interface encrypt {
    (key:string,value:string):string; // (第一参数约束，第二参数约束):返回类型约束
}
let md5:encrypt = function (key:string,value:string):string {
    return key+value;
}

3. 类类型接口：对类进行约束（与抽象类相似）

interface Animals {
    name:string;
    eat(str:string):void;
}

class Dog12 implements Animals { // 类使用implements继承
    name:string;
    constructor(name:string) {
        this.name = name
    }
    eat(): void {
        console.log(this.name+ '1212')
    }
}

4. 索引接口：数组/对象约束（不常用）

interface Arr {
    [index:number]:string
}
let users:Arr = ['1','dede']
let objs:Arr = {
    1:'ddd',
    2:'dddsss',
}

ts泛型总结

泛型：当前数据类型不确定，调用时确定（解决接口类重用性）

1. 函数泛型

function getData<T>(value:T):T { // T表示泛型，具体什么调用方法决定的
    return value;
}

getData<number>(123); //指定什么类型，传入什么类型

2. 泛型类

class MinClass<T> {
    public list:T[] = [];

    add(value:T):void{
        this.list.push(value)
    }
}

let m1 = new MinClass<number>() //实例化，指定了类的T类型为number

3. 接口泛型

interface ConfigFn {
    <T>(value:T):T;
}
let getConfig:ConfigFn = <T>(value:T):T=>{
    return  value;
}
getConfig<string>('123');

ts装饰器总结(装饰器目前还在实验阶段)

• 装饰器：特殊类型声明，能附加到类声明，方法，属性，参数上，可改变类的行为
• 通俗讲装饰器就是一个方法，可以注入类，方法，属性，参数上扩展他们的功能
• 常见装饰器：类装饰器，属性装饰器，方法装饰器，参数装饰器
• 装饰器写法:普通装饰器（无法传参），装饰器工厂（可传参）
• 装饰器执行顺序：属性装饰器》方法装饰器》方法参数装饰器（从后向前）》类装饰器（从后向前）

1. 普通装饰器

function logClass(params:any) { // 装饰器，就是一个方法
    //params是当前类
    params.prototype.apiUrl = 'xxx' //添加apiUrl属性
}

@logClass
class HttpClient {
    constructor() {
    }
    getData(){

    }
}
let http:any = new HttpClient()
console.log(http.apiUrl)

2. 装饰器工厂（可传参数）

function logClass(params:string) { // params为传入参数
    return function (target:any) { // target为当前类
        target.prototype.apiUrl = params
    }
}

@logClass('http//123.com')
class HttpClient {
    constructor() {
    }
    getData(){

    }
}
let http:any = new HttpClient()
console.log(http.apiUrl)

3. 属性装饰器

function logProperty(params:any) { // params为传入参数
    // target为当前类, attr为属性名称（HttpClient类的url属性
    return function (target:any, attr:any) { ）
        target[attr] = params; // 修改url = 传入参数
    }
}

class HttpClient {
    @logProperty('123567')
    public url:string | undefined;
    constructor() {}
    getData(){
        console.log(this.url)
    }
}

4. 方法装饰器

function logMethod(params:any) {  // params为传入参数
    // target：当前类，methodName：方法名称 desc：方法描述（方法）
    return function (target:any,methodName:any,desc:any) {
         var oMethod = desc.value // 保存现有方法
        desc.value = function (...args:any[]) { //直接修改了原方法
            args = args.map(value => String(value))
            console.log(args)
            oMethod.apply(this, args) // 对象冒充，执行原方法
        }
    }
}

class HttpClient {
    constructor() {}
    @logMethod('http://1112.com')
    getData(){
        console.log(this.url)
    }
}

5. 方法参数装饰器（基本不会使用）

function logparams(params:any) {  // params为传入参数
    // target：当前类，logparams：方法名称 paramsIndex：参数索引
    return function (target:any,logparams:any,paramsIndex:any) {
        target.apiUrl = params
    }
}

class HttpClient {
    constructor() {}
    getData(@logparams('uuid') uuid:any){
        console.log(this.url)
    }
}