Typescript 小案例

将两个类型进行合并

interface IRouters {
    push ():void ;
    pop ():void ;  
}
// routers 类型必须为 IRouters 和 包含remove 方法的对象 
function initRouters  (routers : IRouters & {
    remove ():void , 
}){ 
   console.log(routers) 
}
initRouters({
    push ():void {

    },
    pop (): void {

    },
    remove ():void {
        
    }
})

枚举

enum responseStatus  {
    success = 200 , 
    notAuthor = 405 
}


const code = 200 ; 
if (code === responseStatus.success){
    // 如果服务器响应成功
    console.log('服务器响应成功')
}else if(code === responseStatus.notAuthor) {
    // 没有权限 
    console.log('对不清, 你没有对应权限 ')
}else {
    // 请求失败, 或者服务器错误 
    console.log('不好意思, 出现异常了')
}

接口

1.用接口来代表数组类型

interface IRouters {
    [index:number] : string | number 
}
let routers:IRouters = ['1' , '2' , '3' , 1 , 2 ] ;  
console.log(routers)

2.用接口来代表函数

interface SearchFunc {
  (source: string, subString: string): boolean;
}
let replace: SearchFunc;
// 当这个函数要成为SearchFunc类型时, 返回值必须与对应的接口相同, 但是参数可以有所区别, 
// 这里的区别是, 可以选择接口定义的参数列表中的参数, 但是类型必须定义 
// 以下是正常, 可以编译通过的 
replace = function(abc: string) {
  return true;
};
// 编译不通过的 
/*
	错误信息
	不能将类型“(abc: string, bec: number) => true”分配给类型“SearchFunc”。
  	参数“bec”和“subString” 的类型不兼容。
    不能将类型“string”分配给类型“number”。
*/ 
let replace: SearchFunc;
replace = function(abc: string , bec : number) {
  return true;
};

这个数组中的value 只能是 a,b,c 其中的一个

type RouterNames = Array<'a' | 'b' | 'c'> ;
// 这个数组只能包含为  'a','b','c'
let arr:RouterNames = ['a', 'b' , 'c'] ; 

控制方法中的类型

function preloadRouter (routerName : string | number | boolean ) :boolean {
    if (typeof routerName === 'string'){
        routerName.substr(1)
    }
    return (routerName as boolean) ;  
}

使用接口控制属性

interface ITreeParent {
    name : "张萨姆"
}
interface ITreeChild {
    age : 13 
}
function generatorDomTree (domTree : ITreeParent & ITreeChild) {

}
generatorDomTree({
    name : "张萨姆" ,
    age : 13
})

多态this, 在一个类的方法中返回另一个this , 就可以使用链式调用

class Computed {
    private age:number = 1 ; 
    constructor () {
    }
    public addAge ():this {
        this.age ++ ; 
        return this ; 
    }
    public subAge ():this {
        this.age -- ; 
        return this ; 
    }
    public getAge () :number {
        return this.age ; 
    }
}

let com:Computed = new  Computed() ; 
com.addAge().subAge().addAge() ;
console.log(com.getAge()) // 2 

函数重载

type sn = string | number ; 
function add (num1:string , num2:string ):string ; 
function add (num1:number , num2:number) : number ; 
function add (num1:sn , num2:sn) :any {
   
}

console.log(add(1 , 2))
console.log(add('1' , '2'))

模块

// navigator.ts 
export default class Navigator {
    target (t:string ) :void{

    }
}
// demo.ts 
import Nav from './navigator';


let nav:Nav = new Nav () ; 
nav.target('aaa') ;  

命名空间

//首先定义一个 namespace ， 并且导出  
// namespace.ts
export namespace Validation {
    export class StringValidation {
        public static checkPhone (phone : string ):boolean {
            return /\d{11}/.test(phone)
        }
    }
}
// demo.ts , 引入并且使用
import  {Validation} from  './namespace';
let flag:boolean = Validation.StringValidation.checkPhone('15022113044');
console.log(flag) // true