Typescript学习笔记(VSCODE)

作者:MIRIII    提交时间:2019-11-05    点击:1164    TAGS:Typescript

 环境安装

前提条件:nodejs已经安装完成

cmd打开命令行窗口安装ts

npm install -g typescript

建立项目文件夹,并在vscode中打开此文件夹,建立index.ts文件,配置自动编译(命令行进入当前目录tsc --init 生成tsconfig.json,修改outdir,vscode 任务/终端 运行任务,监视****任务即可)

生成index.html文件,并引入index.js文件,使用浏览器打开,即可成功运行。


 基本数据类型

必须添加类型校验,如下

var flag:booleanfalse;


var num:number=123;


var str:string="this is ts string;";


var arr1:number[]=[11,22,33,44,55];


var arr2:Array<number>=[11,22,33,44,55];


var arr3:[number,string]=[11,'this is tuple type string'];


enum e1 {success=1,error=2};

var t1:e1=e1.error;


var oBox:any=document.getElementById('box');

oBox.style.color='red';


var n2:number|undefined|null;


function f1():void

{

    console.log('123');

}


var a:never;

a=(()=>{

    throw new Error('错误');   

})()


 函数

function run3():string{

    return 'run3';

}


var run4=function():string{

    return 'run4';

}

function getinfo1(name:string,age:number):string{

    return `${name} -- ${age}`;

}

console.log(getinfo1('zhangsan',25));


var getinfo2 = function(name:string,age:number):string{

    return `${name} --${age}`;

}

//可选参数

function getinfo3(name:string,age?:number):string{

    if(age)

    {

        return `${name} -- ${age}`;

    }else{

        return `${name} -- 年龄保密`;

    }

}

//默认参数

function getinfo4(name:string,age:number=20):string{

    if(age)

    {

        return `${name} -- ${age}`;

    }else{

        return `${name} -- 年龄保密`;

    }

}

console.log(getinfo4('李四'));

//剩余参数 三点运算符接收多个参数

function sum1(...a:number[]):number{

    var sum = 0;

    for(var i=0;i<a.length;i++){

        sum += a[i];

    }

    return sum;

}

console.log(sum1(1,2,3));

console.log(sum1(1,2,3,4,5));

//函数重载

function getinfo5(name:string):string;

function getinfo5(age:number):number;

function getinfo5(str:any):any{

    if(typeof str == 'string')

    {

        return 'my name is ' + str;

    }else{

        return 'my age is ' + str;

    }

}

console.log(getinfo5('李四'));

console.log(getinfo5(36));


function getinfo6(name:string):string;

function getinfo6(name:string,age:number):string;

function getinfo6(name:any,age?:any):any{

    if(age){

        //

    }else{

        //

    }

}


//箭头函数

//es5

setTimeout(() => {

    //

}, 1000);