typescript的基本用法
1.安装
npm i -g typescript 全局安装
或者yarn add typescript -g
然后使用tsc 命令来解析ts将其变为js代码,在使用node来执行js代码,因为浏览器不识别ts代码
简化使用安装一个
ts-node包npm i -g ts-node
使用ts-node 文件名 直接就可以使用了
注意: 在引用前记得初始化一下不然html导入不进去tsc --init生成一个tsconfig.json文件
修改里面的outDir :’’./js"
第二步点击终端–>运行任务–>更多任务–>监视tsconfig.json文件然后就会生成一个js文件
1.1注释
单行注释 Ctrl+/
多行注释shift+Alt+a
2.ts使用(类型)
布尔类型 boolean
数字类型 number
字符串类型 string
数组类型 array
元组类型 tuple
枚举类型 enum
任意类型 any
null 和 undefined
never类型
表示的是那些永不存在的值的类型,一般用于抛出异常或根本不可能有返回值的函数。
void类型 (空白,无)
void与any正好相反, 表示没有任何类型, 一般用于函数返回值。在TS中只有null和undefined可以赋值给void类型
2.1类型语法
TS中类型可以自动解析也可以类型声明,不过最好是声明一下,这样后期好维护
2.1.1基本类型声明
let count:number = 123 //数字类型
let str : string = 'abc' //字符串类型
let flag : boolean = true //布尔类型
2.1.1数组类型声明(array)
let arr1:number[] = [1,2,3] //数字数组
let arr2 :Array<number> = [4,5,6] //数字数组
let arr3 : any[] = ['1123',23] //每一项为任意类型
元祖类型也是数组中的一种
let arr:[number,string]=[123,'str']
常常我们不定义也就是any类型,特殊情况有时候需要用到元祖类型
2.1.2枚举类型(enum)
有的时候处理非数据的数据,例如性别,年龄,颜色等
enum Flag{
success=1,
error=2
}
let res = Flag.success //返回值是1,有值就返回值,没值就返回索引
enum Color{
blue=9,red=4,'white'
}
console.log(Color.white);//打印5只有数字才可以作为枚举计算对象,字符串布尔都会报错
//枚举取值只影响后面值不影响前值比如blue如果没有值永远都是0,red的值不影响blue的值,但是影响后面
enum Color{
blue,red,white,yellow
}
let c:Color=Color.red
console.log(c) //1 没有赋值就是索引
2.1.3any(任意类型)
任意类型跟es5没有设置类型相似
//没有加any类型ts中就报错虽然有效果,因为还有可能为null
var box:any= document.getElementsByClassName('box');
console.log(box);
box[0].style.color='red'
写到这里突然发现踩了一个坑可能基础还不牢固把,经过一番思考发现获取元素的时候只有获取
getElementById跟querySelector,这两个获取的是当前元素,因为前者是根据id这个没什么问题,后者是获取第一个,由于我写的demo只有一个所以第一个就是,所以这两个修改样式box.style.color='red'是不需要索引的,其余由于返回的是伪数组形式所以要加索引,至此还是基础要掌握牢固
2.1.4Null和Undefined
//此时因为并未赋值,所以打印出来的就是undefined,并且ts代码还会报错
//如果定义类型为undefined|null则它的值就是undefined|null
var a:undefined;
a=undefined
var num:number;
console.log(num); //undefined错误写法因为没有赋值
var num:undefined;
console.log(num);//undefined正确
var num:undefined|number|null;//不赋值就是undefined,
//表示方法没有返回任何类型
function run():void{
console.log('run');
}
run()
3.1函数声明
第一种方法
定义什么类型返回值必须是什么类型
function run():number{
return 123
}
run()
第二种方法
匿名函数声明法
var fun2=function():number{
return 123
}
fun2()
定义方法传参
匿名函数跟这个一样
function getInfo(name:string,age:number):string{
return `${
name}--- ${
age}`
}
getInfo('zhangsan',20)
没有返回值的方法,这是没有返回值的时候
function run():void{
console.log('run')
}
run()
方法可选参数
es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样就需要配置可选参数
//这段代码代表如果没传age则执行下面代码,如果age存在则执行上面代码,在可选参数的后面加上?代表参数可以填可以不填,如果不加?ts就会报错
function getInfo(name:string,age?:number):string{
if(age){
return `${
name}---${
age}`;
}else{
return `${
name}---年龄保密`
}
}
console.log(getInfo('zhangsan'));
默认参数
//在后面添加值则代表默认参数
function getInfo(name:string='lisi',age?:number):string{
if(age){
return `${
name}---${
age}`;
}else{
return `${
name}---年龄保密`
}
}
console.log(getInfo('zhangsan'));
剩余参数
//...result代表运用展开运算符把参数打开,result可以自己定义,如果不使用...展开的话就代表的是第一个参数
//如果前面有参数的话,...则代表剩余的参数
function sum(a:number,b:number,...result:number[]):number{
console.log(result) //[1,2,2,3,4,5]
var sum=a+b;
for(var i=0;i<result.length;i++){
sum+=result[i]
}
return sum
}
console.log(sum(1,2,2,3,4,5));
3.2TS函数重载
参数不一样
//es5中出现同名方法,下面的会替换上面的方法
//下面是Typescript的重载,比如说下面没有boolean的定义,如果参数为布尔值ts则会报错,虽然会有结果
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
if(typeof str==='string'){
return `我的名字是${
str}`
}else{
return '我的年龄是'+str
}
}
console.log(getInfo(20)); //因为是number类型所以结果是我的年龄是20
参数一样
function getInfo(name:string):string;
function getInfo(name:string,age:number):string;
function getInfo(name:any,age?:any):any{
if(age){
return `我的名字是${
name}---我的年龄${
age}`
}else{
return '我的年龄是'+name
}
}
//如果参数为true因为在重载函数里面找不到虽然有结果但是ts会报错
//另外参数必须一一对应
console.log(getInfo(50))//我的名字是50 错误写法,他会把50当成第一个参数name
console.log(getInfo('zhangsan',50));//我的名字是zhangsan---我的年龄50
箭头函数
箭头函数this指向上下文
setTimeout(()=>{
console.log(this);
},1000)