typeScript--日记(一)

开篇:你好,时间的朋友,今天想记录下这段时间使用typeScript的一些心得体会,那么,为什么要学习typeScript呢?,因为,'javaScript不行',开个玩笑,Js是“动态”语言,自由度有点高,Ts的存在就是限制Js的自由度,更加“静态”,存在的就是合理的,存在并且能够流行起来,那就更加证明其合理性了,typeScript存在并且流行起来,有很多原因,如:是js的超级,是开发大型应用的基石(这话说的,额...),在编写阶段就可以检查错误,还有语法提示,更重要的是由微软("爸爸")开发的...,其他的就不多说了,开始我们的正文。

正文

  • 工具
    1. 如果要想练习typeScript的,你需要安装好nodejs,typeScript,巴拉巴拉(此处省略1000字),如果有项目使用typeScript,那就在项目里拉个页面,开始搞吧,安装和配置可以参考官方文档
  • 配置(具体看官方文档)
tsc --init  //会生成一个tsconfig.json文件,具体配置看官方文档
复制代码
  • 数据类型:(由于ts是js的超级,js有的数据类型,ts都有,不仅有,还多出了好几个,具体下文讨论)

    • 基础数据类型
      1. 稍微用过ts的朋友对基本的数据类型都会有一些了解,如:number,boolean,string...,可以在声明变量的时候指定数据类型(也可以利用ts的类型推断),且确定变量类型后,如果再赋值不同的数据类型,就会报错...
      2. 我着重谈谈我对any,never,void,null,underfined这些数据类型的看法
        • any: 我们声明一个变量,没有自定类型,这个变量就会默认是any类型,我的理解是(再基础数据类型中),any是基础数据类型的父集(就是变量为any类型的变量,可以被赋值给任意的基础数据类型),我觉得这个any虽然有很多好处,但也有一些坏处:没有了ts的提示,基本上跳过了对any类型的变量检查,这和我们使用ts的初衷好像有点相违背,如果项目中都是哦耶那个any类型,那我们写的代码就重新回到回到了js(出力不讨好),更形象的说是:anyScript
        • null与undefined:这两个是所有类型的子类型(当然需要在tsconfing.json 中打开配置项"strictNullChecks": true,不建议这样做,我们可以使用联合类型来做代替),null与undefind互为子类型(它俩真的很客气)
        • void: 我使用的这段时间,发现用这个void地方不多,这个主要用在函数没有返回值的地方可以指明其为void
        • never: 这个用的才少呢,可能说的不全,官网上说是用在报错,死循环的情况(只是我的理解)
        // 需要了解的几个名词
        //1. 类型注解(你想让定义的变量成为什么数据类型)
        //2. 类型推断(声明并且赋值,这样就不用类型注解了,不能正确推断出类型的时候用类型注解)
        // 联合类型 let a: number | string (a是number或者string),注意要用联合的公有属性,在赋值的时候确
        //确认其类型
        
        // 基本数据类型示例:
        let myNumber: number = 1000; 
        let myBoolean: boolean = true; // 同number
        let myString: string; //同number,也可以用模板字符串 ``
        myString = '1000'
        let myAny: any; //等同于let myAny;
        myAny = 10; //可以是任意数据类型
        myAny = "string";//可以是任意数据类型
        
        let voidFunction = ():void=>{  //没有返回值的用void
            console.log(321132);
            // return 123 // 会报错
        }
        // null 和 undefined是所有类型的子类型,被null和undefined赋值后就会变成any类型
        let a = undefined  //         可以用联合类型来搞
        a=null
        
        // never 报错死循环
        //object: 所有的非原始数据类型
        declare function test(a:number,b:number):number  //函数注解,全局声明
        test(10,10)
        复制代码
  • 对象数据类型

    • 接口(是用来描述object的,像数组,函数,对象...,都可以用接口来描述)
      1. 对象类型(注解示例)
        interface Person {
            readonly id: number  //只读属性
            name: string, //必须有
            age?: number,  //可选属性,可有可无,可少(如果想减少)
            [propName:string]:any  // 这样就可以多了,任意属性,一定是any
        }
        
        let person:Person = {
            name: 'THAT MAN',
            age: 29,
            sex: 'man',
            id:1
        }
        // person.id = 1000  //报错,因为是只读属性
        复制代码
      2. 数组类型(注解示例)
        let bb = [1,3,45,5,'sdfa']  // 传入多个类型,等价于 (string | number)[]
        // 下面是三种等效的写法
        interface MyList { // interface写法
            [index: number]:number  //优先级最高,当然也可以设置其他属性,并为它们加上修饰符readonly
        }
        
        let numberArray: number[] = [1,3,4]  //类型的写法,必须都为number类型
        let genericType: Array<string> = ['1','2','4'] //泛型的写法
        let c: MyList = [1,3,4]
        
        // 类数组可以用内置对象表示
        interface Aegs { // 模仿内置对象的写法
            [index:string]:any
            length:number
        }
        function test () {
            let a:Aegs = arguments
        }
        复制代码
      3. 函数类型(注解示例)
        // 函数注解的四种方式
        // 1.函数声明的注解方式
        // function add(a: number, b?:number,c=20, ...restOfNumber:number[]): number { 
                            //可选参数放到后面,默认值,剩余参数(必须放到最后)
        //   return a + b+c;
        // }
        // 2.函数表达式的注解方式
        const addB:(a:number,b:number)=>number =function(a,b){
            return a+b
        }
        // 3.使用type(类型别名)
        type Add =(first:number,second:number)=>number
        const addC:Add =function(a,b){
            return a+b
        }
        // 4. 由于函数也是对象,可以使用interface(这个比较常用)
        interface Add {
        (first:number,second:number):number
        }
         const addE:Add =function(a,b){
            return a+b
        }
        // 5. 解构赋值,默认值,类型注解放到一起会是什么样子
        function test({first,second}:{first:number,second:number} = {first:1,second:2}){
            return first + second
        }
        console.log(test({first:1,second:4})); //5
        
        
        //函数中的this,可以用interface来描述
        
        函数的重载的意义(我觉得就是使表达的意思更加清楚,没什么用,也很少用)
        function reverse(x:number):number //函数重载 
        function reverse (x:string): string //函数重载 
        function reverse(x:number|string){
            if(typeof x === 'number'){
                return Number(`${x}`.split('').reverse().join(''))
            }else if(typeof x === 'string') {
                return x.split('').reverse().join('')
            }
        }
        console.log(reverse(123)); //321
        console.log(reverse('that man')); //nam taht
        复制代码

结束语:关于类,泛型,还有一些其他的,如:枚举,元组,如果感兴趣,请看我下篇文章,再见,时间的朋友

分类:
前端
标签: