typescript基础

全局安装typescript npm i -g typescript

• ts的文件后缀是以.ts来结尾的
• 浏览器无法解析ts文件的代码，需要编译成js文件的代码，执行命令：tsc index01.ts --转换成–>index01.js（手动编译）

vscode配置自动编译ts文(进入到根目录下)件：

• tsc --init,生成tsconfig.json配置文件
• 在tsconfig。json文件中找到outDir（输出至哪个文件夹，默认为根目录下，配置ts编译成js后需要存储的位置
• 点击“ 终端 – 运行任务 – tsc-监视config.json ”

HBuilder配置自动编译ts文件：

• 点击“工具–插件安装“

• 点击”浏览eclipse插件市场“

• 弹框中找到输入框find，输入 “typescript”,找到typescript（有点慢），点击安装

• 安装完成后重启编译器，点击“工具-选项-Typescript-Compiler",勾选上Compiler all TypeScript files on builder，点击确定

• 右键点击项目根目录–配置–点击“enable TypeScript Hbuilder”

TS新增了类型校验，写ts代码的时候必须指定类型

var flag:number = 1;

var flag:number = '1';错误写法

TS的数据类型：(11种)

• boolean number string array tuple(元祖类型) enum(枚举) any(任意类型) null undefined void never

数组类型：ts中定义数组的方式有两种

• 第一种：

  ​ 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

字符串类型

​ var str:string='abcccd';

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

    
    
    

​

null undefined类型

var num:number | undefined // num的类型为number类型或者只定义了num这个变量，没有赋值。如果要赋值的话，只能是number类型或者值为undefined
var num:undefined // num只申明了但是没有赋值，如果要赋值，只能赋undefined
var num:null; // 表示num只能是null，不能给它赋值，或者说只能赋null给num

void 类型

typescript中void表示没有任何类型，一般用于定义方法的时候方法没有返回值

function fn():void {
   } // 定义一个没有任何返回值的fn方法
// 指定返回数组类型
function fn():Array<any> {
   
    var obj:any = {
   name:'张三'};
    let arr:Array<any> = [];
    arr.push(obj);
    return arr;
}
console.log(fn())

 
 
 

TS函数

函数声明指定类型

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);

 
 
 

方法的可选参数

// ES5中方法的形参和实参可以不一样，但是在TS中必须一样，如果不一样，则需要配置可选参数

// 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

 
 
 

函数的剩余参数

// 剩余参数(有点类似于agreement伪数组传参数)
function fn3(...result:number[]):void {
   
  var sum=0;
  for (vat i=0;i<result.lenth;i++){
   
    sum+=result[i]
  }
	console.log(sum)
}
// fn3(1,2,3)
// fn3(1,2,3,4,5)
function fn4(a:number,...res:number[]):Array<any> {
   
  var sum = a;
  return res;
}
fn4(1, 2, 3, 4, 5);

 
 
 

函数重载

// java中，函数重载指的是函数名一样，但是他们的参数不一样，这是会出现函数重载的情况
// ts中的重载，是指通过为同一个函数提供多个函数类型定义来实现多种功能的目的
// ts为了兼容es5/es6，重载的写法和java有区别
/*
es5中，出现同名的函数时，下面的函数会替换掉上面的函数
function css(conf){}
functioncss(conf:number, color:string){} // 会替换掉上面的css函数
*/
// ts中的重载
function info(name:string):string ;
function info(age:number):string ;
function info(str:any):any {
   
    if (typeof str == 'string') {
   
        return '姓名'+str;
    } else {
   
        return '年龄'+str
    }
};

console.log(info(‘张三’))
console.log(info(20))

// 参数重复时的写法
function info(name:string):string;
function info(name:string,age:number):string;
function