Typescript基础

数据类型

字符串类型

var str:string='abcccd';

二：null undefined类型

var num:number | undefined
var num:undefined
var num:null; 

三：数组
方式一：

var arr:number[] = [1,2,3,11] 表示arr中的元素必须都是数字类型

方式二：

var arr:Array<number> = [1,2,3,11]

四：元组

var arr:[number, string, boolean] = [12,"11",true] // 位置与指定类型对应

五：枚举
enum 枚举名 {标示符1，标示符2，标示符3}

enum 枚举名 {‘标示符1’=1，‘标示符2’=2}

console.log(枚举名.标示符x)

如果不给标示符赋值，打印标示符所在位置的角标，赋值则打印出标示符对应的值

​ enum flag {'success' = 1, 'error' = 2}

​ var f:flag = flag.error

六：any任意类型

​ var obj:any = document.getElementById('box')
​ obj.style.color='red'

var num:any;
var num1:number;
var num2:number | undefined;
console.log(num); // 输出undefined
console.log(num1); // 报错
console.log(num2); // 输出undefined

七：void

function fn():void {}
function fn():Array<any> {
    var obj:any = {name:'张三'};
    let arr:Array<any> = [];
    arr.push(obj);
    return arr;
}
console.log(fn())

函数

一：函数声明指定类型

function fn():string {return String} // 定义了一个方法，该方法只能返回字符串
function fn():Object {return Object} // 定义了一个方法，该方法只能返回一个对象
var fn=function ():string {return string} // 定义了一个方法，该方法只能返回字符串
function fn(name:string, age:number, sex:string):object {return object}
// 指定传入的参数类型，返回指定类型的数据
function backStr(name:string, age:number):string {
    let str = name + '----' +age;
    return str;
}
console.log(backStr('小明', 20));
TS函数重载(函数同名，参数不同)

二：匿名函数指定类型

// 声明一个返回字符串的函数
let strfn = function ():string {
    var str = 'qwe';
    return str;
}
// 声明一个返回对象的函数
let objFn = function ():Object {
    let obj = {'name':'账单'};
    return obj;
}
// 声明一个返回数组的函数
let arrFn = function ():Array<any> {
    let arr:Array<any> = [1, '2', {name: "张三"}];
    return arr;
}
console.log(strfn());
console.log(objFn());
console.log(arrFn());

三：没有返回值的函数

function noReturn():void {
  console.log('没有返回值');
}
console.log(noReturn);

四：有参数函数

// TS中必须一样，如果不一样，则需要配置可选参数。如果在age后面不加?,则表示调用fn1函数的时候，name和age这两个参数都必须要传，如果在参数后面加一个？，则表示这个参数可传可不传，是可以选择的。
···注意：可选参数的位置必须放置在所有参数的最后面，不能放在必传参数的前面···
function fn1(name:string, age?:number):object{ // age为可选参数
  reuturn {}
}

五：函数的默认参数

// es5不能给函数指定默认参数，在es6和ts中是可以给函数指定默认参数
function getInfo(name:string, age:number = 30):void {
    console.log(name+'---'+age)
}
// age不是可选参数，但是age有默认参数，如果不传age的话，则会默认使用age的默认值20
getInfo('zhangsan', 100) // zhangsan---100
getInfo('zhangsan') // zhangsan---30

六：箭头函数

function fn() {}    ----------   () => {} this指向上下文