TypeScript 学习（上）

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

TypeScript在前端开发中很火，趁着最近时间比较充沛，学习一下，把学习笔记和大家分享一下。

概述

• js的超集

• 能运行js代码，支持Es语法，完全兼容js代码，

• 静态类型语言

  安装TypeScript

  npm install -g typescript
  

类型声明

let a:Number;
let str:string;  
//类型名大小写均可

• 类型

  boolean,number,string,undefined,null
  

  • 数组和对象

    //定义数组
    let arr:number[]=[1,2,3]
    console.log(arr)
    let arr2:Array<number> = [1,2,3]
    console.log(arr2)
    //定义对象
    let obj:object = {}
    

    • any和void

      //any为不固定类型，即任意类型
      let x:any=123
      x = true
      let arr:any[]={1,2,"hh",true}
      //void表示空值
      function fun():void{
          console.log("234")
      }
      fun()
      

类型推断

ts在没有明确指定类型的时候推测一个类型

let t = 123;//将t定义为number类型
t = true //错误

可以通过检查

let g;
g = {};
g = [];
g = 223

联合类型

表示取值可以为多种类型的一种

let f: boolean | number | string = true
f = "ls"
f = 1
console.log(f)

接口

• 约束
• 对象类型

interface Person{
    name:string;
    age:number;
    readonly id:number; //只读属性
    num?:number; //？表示可选属性
    [propName:string]:any //任意属性和任意属性值
}
let ts:Person = {
    name: 'ts',
    age: 1,
};

定义的变量比接口少一些属性是不允许的，多一个属性也不允许

任意属性也可使用联合属性

• 数组类型(不常用)

  interface Arr{
      [index:number]:number
  }
  let arr:Arr = [1,2,3,4]
  

• 函数类型

  interface Func{
      (a:string,b:string):boolean
  }
  const f:Func=function fun(a:string,b:string):boolean{
      return true;
  }
  

函数

• 函数声明

  • js

    //命名函数
    function add(a,b){
        return a+b;
    }
    //函数表达式,匿名函数
    let add = function(a,b){
        return a+b;
    }
    ​
    

  • ts

    //函数表达式
    function add(a:number,b:number):number{
        return a+b;
    }
    console.log(add(1,2))
    //匿名函数
    let add = function (a:number,b:number):number{
        return a+b;
    }
    console.log(add(1,3))
    //完整写法
    let add:(a:number,b:number)=>number=function (a:number,b:number){
        return a+b;
    }
    

• 可选参数和默认参数

  let getName = function (a:string,b?:string):string{ //?表示可选参数
      return a+b;
  }
  console.log(getName("zhang"));
  let getName = function (a:string="zhu",b?:string):string{ //默认参数
      return a+b;
  }
  console.log(getName());
  

  • 必选参数不能位于可选参数的后面
  • 默认参数是可以放在必选参数以及可选参数之后

• 剩余参数

  function fn(x:string,y:string,...args:number[]){
      console.log(x,y,args);
  }
  fn(""," ",12,3,6)
  

• 函数重载

  函数名相同，形参不同

  function add(x:string,y:string):string
  function add(x:number,y:number):number
  function add(x:string|number,y:string|number):string|number{
     if(typeof x =='string'&&typeof y == 'string'){
         return x+y;
     }
      if(typeof x == 'number'&&typeof y == 'number'){
          return x+y;
      }
  }
  console.log(add(1,2))
  console.log(add("zhang","san"))
  ​
  

  ....敬请期待