typescript学习记录

1、typescript初体验

//安装ts编译工具npm i -g typescript
//安装ts运行工具npm i -g ts-node
console.log("hello typescript");
//控制台输入ts-node 文件名即可


let str: string = "Hello TypeScript";

console.log(str);

2、类型案例

//字符串类型
let string:string = 'Hello TypeScript';
console.log(string);

//数字类型
let number:number = 19950707;
console.log(number);

//数组
let arr:number[] = [1,2,3,4,5,6];
console.log(arr);

let arr1:Array<string> = ['1','2','3'];
console.log(arr1);

//boolean
let boolean:boolean = true;
console.log(boolean);

//枚举
enum ENUM {success=1,error=0};//如果不赋值，默认使用当前索引0~n
const flag:number = ENUM.success;
console.log(flag);

3、任意类型any

//指定类型
let newArr:[string,number,boolean] = ['string',123,true];
console.log(newArr);

//任意类型
let any:any[] = ['string',123,true,null,undefined];

4、typescript函数

function funcA():string{
    return "Hello typeScript";
}
console.log(funcA());

//----------------------------

function funcB(name:string,age:number):string{
    let temp = `${name} --- ${age}`;
    return temp;
}
console.log(funcB('Agwenbi',25));

//----------------------------

function funcC(name:string='agwenbi',age:number=26):string{//使用默认值
    let temp = `${name} --- ${age}`;
    return temp;
}
console.log(funcC());

//----------------------------

let func = (name:string,age:number):string=>{
    let temp = `${name} --- ${age}岁`;
    return temp;
}
console.log(func('Agwenbi',25));

//----------------------------

function funcD(name:string,age:number):void{
    const temp = `${name} --- ${age}岁`;
    console.log(temp);
}
funcD('Agwenbi',25);

//----------------------------

function funcE(name:string,age?:number):string{
    const temp = `${name} --- ${age + '岁' || '年龄保密'}`;
    return temp;
}
console.log(funcE('Agwenbi',25));

//----------------------------

function funcF(...args:number[]):number{
    let temp:number = 0;
    args.map(item => temp += item);
    return temp;
}
console.log(funcF(1,2,3,4,5));

//----------------------------

function funcG(name:string):string;//函数重载
function funcG(age:number):number;
function funcG(str:any):any{
    if(typeof str === "string"){
        return `我叫${str}`;
    }else{
        return `我的年龄是${str}`;
    }
}
console.log(funcG('Agwenbi'));
console.log(funcG(25));

5、类的使用

class ts{
    private name:string;
    constructor(name:string='Agwenbi'){
        this.setName(name);
    };
    getName():string{
        return this.name;
    }
    setName(name:string){
        this.name = name;
    }
}

let temp:any = new ts();
console.log(temp.getName());

temp.setName('Agwenbi');
console.log(temp.getName());

class web extends ts{
    constructor(name:string='李四'){
        super(name);
    }
}
let webTemp:any = new web();
console.log(webTemp.getName());

6、接口

interface cName{//定义属性接口
    name:string;
    age:number;
    work:string;
}
function cNameFunc(info:cName):string{
    const temp = `姓名：${info.name},年龄：${info.age},职业：${info.work}`;
    return temp;
}
console.log(cNameFunc({
    name:"Agwenbi",
    age:25,
    work:"程序员"
}));

interface cFunc{//定义函数类型接口
    (key:string,val?:string):string;
}

let funcH:cFunc = (key:string,val?:string):string=>{//val参数可以不传
    let temp = key + '---' + val || 'val';
    return temp;
}
console.log(funcH('key','value'));

7、接口的扩展

interface interfaceA {
    getName():string;
}

interface interfaceB extends interfaceA {
    getAge():string;
}

interface interfaceC extends interfaceB {
    getWork():string;
}

class people {
    name:string;
    constructor(name:string){
        this.name = name;
    }
    work():string{
        return `${this.name}会工作赚钱`;
    }
}

class student extends people implements interfaceC {
    age:number;
    zw:string;
    constructor(name:string='Agwenbi',age:number=25,zw:string='程序员'){
        super(name);
        this.age = age;
        this.zw = zw;
    }
    getName():string{
        return `学生姓名是：${this.name}`;
    }
    getAge():string{
        return `学生年龄是：${this.age}`;
    }
    getWork():string{
        return `学生的工作是：${this.zw}`;
    }
}

let tempInterface:any = new student();
console.log(tempInterface.getName());
console.log(tempInterface.getAge());
console.log(tempInterface.getWork());
console.log(tempInterface.work());

8、泛型的使用

interface fxParams<T>{
    (name:T):T;
}

function fxGetData<T>(name:T):T{
    return name;
}

let tempFunc:fxParams<string> = fxGetData;
console.log(tempFunc("Agwenbi"));

//方法的重载

function funcI(arg:string):string;
function funcI(arg:number):string;
function funcI(arg:boolean):string;
function funcI(arg:any):any{
    if(typeof arg === "string"){
        return "传递的参数是一个字符串";
    }else if(typeof arg === "number"){
        return "传递的参数是一个数字";
    }else if(typeof arg === "boolean"){
        return "传递的参数是一个布尔值"
    }else{
        return "其它类型";
    }
}
console.log(funcI(123));

9、泛型的使用2

interface _fxData{
    name:string;
    age:number;
    work:string;
}

class funcJ{
    behavior:string;
    constructor(behavior:string){
        this.behavior = behavior;
    }
    _carry():string{
        return "behavior:"+this.behavior;
    }
}

class funcK extends funcJ implements _fxData{
    name:string;
    age:number;
    work:string;
    constructor(name:string,age:number,work:string,behavior:string){
        super(behavior);
        this.name = name;
        this.age = age;
        this.work = work;
    }
    _con():string{
        return "con:" + this.name + this.age + this.work;
    }
}

let funcU = new funcK("Agwenbi",25,"工作","吃饭");

console.log(funcU._carry());
console.log(funcU._con());

//--------------------------------------------------------------------

interface _fxParams<T>{
    addInfo(info:T):boolean;
    findInfo(info:T):string;
}

class funcL{
    user:string | undefined;
    pass:string | undefined;
}

class funcN<T> implements _fxParams<T>{
    _jsonData:any;
    constructor(){
        this._jsonData = {};
        console.log("信息系统准备中...");
    }
    addInfo(info:T):boolean{
        if(this._jsonData.hasOwnProperty(info["user"])){
            console.log("已存在，添加失败");
            return false;
        }
        this._jsonData[info['user']] = info['pass'];
        console.log('添加成功');
        return true;
    }
    findInfo(info:T):string{
        return "当前数据：" + this._jsonData[info['user']];
    }
}
let _funcL = new funcL();
_funcL.user = "Agwenbi";
_funcL.pass = "123456";
let _funcN = new funcN<funcL>();
_funcN.addInfo(_funcL);
console.log(_funcN.findInfo(_funcL));

10、泛型的练习

interface _fx_<T>{
    params:any[];
    addInfo(info:T):boolean;
    getInfo(num:number,key:string):string;
}

class user {
    key:string | undefined;
    val:string | undefined;
}

class conUser<T> implements _fx_<T>{
    params:any[];
    constructor(){
        this.params = [];
        console.log("初始化成功");
    }
    addInfo(info:T):boolean{
        this.params.push(info);
        console.log("添加成功");
        return true;
    }
    getInfo(num:number,key:string):string{
        if(num >= this.params.length){
            return "超出索引值";
        }
        return this.params[num][key];
    }
}

let _user = new user();
let _conUser = new conUser<user>();

_conUser.addInfo({
    key:"key值a",
    val:"val值a"
});
_conUser.addInfo({
    key:"key值b",
    val:"val值b"
});
_conUser.addInfo({
    key:"key值c",
    val:"val值c"
});

console.log(_conUser.getInfo(0,"val"));
console.log(_conUser.getInfo(3,"key"));