Typescript学习笔记(VSCODE)
→ 环境安装
前提条件：nodejs已经安装完成
cmd打开命令行窗口安装ts
npm install -g typescript
建立项目文件夹，并在vscode中打开此文件夹，建立index.ts文件，配置自动编译（命令行进入当前目录tsc --init 生成tsconfig.json，修改outdir，vscode 任务/终端 运行任务，监视****任务即可）
生成index.html文件，并引入index.js文件，使用浏览器打开，即可成功运行。
→ 基本数据类型
必须添加类型校验，如下
var flag:boolean= false;
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);
→ 类