typescript的基本用法

柔情只为你懂 2022-12-28 14:17 142阅读 0赞

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

**参数一样**

**箭头函数**

> 箭头函数this指向上下文

setTimeout(()=>{ 
                console.log(this);
         },1000)