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
       复制代码

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