这是我参与【第五届青训营】伴学笔记创作活动的第2天。

本节课重要内容

• TypeScript发展历史
• TypeScript语言优势
• TypeScript毕基本语法

1-1：TypeScript发展历史

• 2012-10：微软发布了第一个版本typescript（0.8）
• 2014-10：angular发布了基于typescript的2.0版本
• 2015-04：微软发布了VS code
• 2016-05：typescript可开发react
• 2020-09：vue发布3.0版本，官方支持typescript
• 2021-11：v4.5版本发布

1-2：TypeScript与JavaScript的比较

• JS：动态类型 弱语言类型
• TS：静态类型 弱语言类型

1-2-1：动/静态类型语言的解释：

• 动态类型：在执行阶段进行类型的匹配
• 静态类型：变量需要提前定义语言类型 eg：python 、Java。
• 动态类型语言与静态类型语言的差异就在于：发生在执行前还是执行时。

1-2-2：强/弱类型语言

• 强类型语言：变量之间不能进行隐式转换
• 弱类型语言：变量之间可以进行隐式转换

1-3：TS的好处：

• 增强代码的可读性（ts基于语法解析可以自动生成一些文档 等）
• 增强代码的维护性（在编译阶段可以暴露大量的错误 ：语法错误、类型匹配错误等 ）
• 有更好的稳定性和开发效率
• 兼容所有含JS特性
• 支持渐进式引入与升级

2:基本语法

• 基础数据类型：string（字符串）、number（数字）、boolean（布尔值）、null、undefine。

  //JS                                        //TS
/*字符串*/                                 /*字符串*/
const q='string';                         const q:string='string';  
/*数字*/                                  /*数字*/
const w=1;                                const w:number=1;  
/*布尔值*/                                /*布尔值*/
const e=true;                             const e:boolean=true;   
/*null*/                                  /*null*/
const r=null;                             const r:null=null;  
/*undefined*/                             /*undefined*/  
const t=undefined;                        const t:undefined=undefined;  

根据上图可知：只需要在变量后面使用:type就可以声明类型

• 对象数据类型：使用interface可以定义对象类型
• 函数类型：(添加函数声明）
  • 直接在函数上进行类型的补充（补充参数的类型以及返回值的类型）
  • 给函数变量赋值函数类型的声明

    function add(x:number,y:number):number{
      return x+y;
    }
    const mult:(x:number,y:number)=>number=(x,y)=>x*y;

    interface IMult{
      (x:number,y:number):number;
    }
    const mult:IMult=(x,y)=>x*y;

• 函数重载
• typescript泛型
  • 泛型约束：限制泛型必须使用字符串
  • 泛型参数默认类型

    /*泛型接口*/
    interface IX<T, U>{
      key:T;
      val:U;
    }

     /*泛类型*/
    class IMan< T >{
      instance:T；
    }
    

• 类型别名:
  • 通过type关键字定义IObjArr别名类型:
  • 未指定类型，result类型为{}
  • 通过as关键字，断言result类型为正确类型

    /*通过type关键字定义IObjArr别名类型:*/
    type IObjArr = Array<{
      key:string;
      [objKey:string]：any；
    }>  

    function keyBy<T extends IObjArr>(objArr:Array<T>){
    /*未指定类型，result类型为{} * /
     const result = objArr.reduce((res,val,key)=>{
      res[key]=val;
      return res;
     },{}); 
    /*通过as关键字，断言result类型为正确类型*/
     return result as Record<string,T>;
    }