个人对TypeScript的理解

230 阅读3分钟

基本配置:编写一个ts文件,用tsc 命令将ts文件转换为js文件,再用node 命令运行, 如果想要简便一些,使用npm i -g ts-node命令来全局安装一个东西,安装之后不用使用tsc命令转换了,直接使用ts-node命令直接就可以运行。

typescript的静态类型: 在一个变量后加上“:”和“要赋予的数据类型(eg: number,string)”用来规定这个变量能够所赋值的数据类型。其实这就是后面说的类型注解。

typescriptd 的静态类型分为基础静态类型和对象静态类型 。

基础静态类型:

         const a : string意思是a必须赋值一个string类型的值
         const b : number 意思是b必须赋值一个number类型的值          

对象静态类型:

         const hanwen : {name:string,age:number} = {name:"hanwen",age:18}//普通的对象静态类型  
         class Person{}
         const hanwen0 : Person = new Person //类类型
         const hanwen1:string []= ["a","b","c"]//数组类型,意思是hanwen1是一个数组,而且数组里面的值都要是string类型  
         const hanwen2 : ()=>string = ()>{return 'aaa'}//函数类型,意思是hanwen2必须是一个箭头函数,而且返回值必须是string类型 

类型注解和类型推断:上面所说的":+数据类型"其实就是类型注解,也就是规定变量的数据类型。而类型推断 就是系统自动推断出这个变量的类型的行为。

函数参数注解和返回类型注解:

         function hanwen(one : string)  {}//表示传的参数要是string类型
         function hanwen(one ) : number {}//表示函数返回值是number类型
         function hanwen({one,two}:{one:number,two:number})
         {
               return one + two  
         } //传递的参数如果是对象就必须用:{}来对对象里的属性进行类型注解

数组类型的注解方法:要对一个数组里面的值注解为数字

         const a : number[] = [1,2,3,4]
         要对一个数组里面的值注解为对象 
         const a : {name:string,age:number}[]=[         {name:hanwen,age:18},         {name:hanwen,age:18},         {name:hanwen,age:18}         ] 

但是注解为对象感觉还是麻烦怎么办,这时也有一个方法,就是类型别名。 类型别名

         type aLias :type Lady = {name:string,age:number}
         有了类型别名就可以const a : Lady[]=[{},{},{}]
         其实用类也可以
         class madam = {name:string,age:number}
         const a : madam[]=[{},{},{}]

元组:什么是元组,可以说元组其实就是一个数组的加强版,比如

         const a = ["hanwen","man",18],
         当变成["hanwen",18,"man"]的时候依旧可以运行,
         因为类型注解为:(string | number)[],不会强制规定输入类型的顺序
         我们可以const a: [string,string,number]= ["hanwen","man",18]
         这个时候就规定了数组里的每个数据类型。
         但是现在一般很少用,因为类似这种我们都是用对象来规定它。

接口:什么时候用到接口呢?在这之前,我们在打代码的过程中总会遇到一些重复性的代码,而考虑到代码的可重用性,我们通常是把这个重复的代码封装到一个对象,这个对象就受到接口的约束。

         eg:const screenResume = (name:string,waist:string,age:number)=>{
         waist<90&&console.log(name+"进入面试") }
         const getResume = (name:string,waist:string,age:number)=>{
         console.log(name+"的年龄是"+age) console.log(name+"的腰围是"+waist)
         } 

以上(name:string,waist:string,age:number)就是重复的部分,考虑代码的可重用性,我们通常先定义一个接口

         interface Girl{ 
         name:string,
         waist:number,
         age:number 
         }
    //const girl = { name:"lisi",waist:99,age:18 }

之后就可以这么写

    const screenResume = (girl:Girl)=>{
    girl.waist<90&&console.log(girl.name+"进入面试")
    }
    const getResume = (girl:Girl)=>{
    console.log(girl.name+"的年龄是"+girl.age) console.log(girl.name+"的腰围是"+girl.waist)
    }

如果还想加一个例子可以这么写

     interface Girl{
     name:string,
     waist:number,
     age:number,
     bust ?:number 
     }  //接口中最后的“?:”代表这一属性的值可有可没有,不会报错。