TypeScript基础语法

typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验,语法类型和类型不匹配会报错

• 中文文档 https://www.tslang.cn/docs/handbook/generics.html

  使用vscode配置自动编译typescript

  // 会将.ts文件编译到当前目录的js文件下
  1、第一步 tsc --inti 生成tsconfig.json   改 "outDir": "./js",
  2、第二步 任务 - 运行任务  监视tsconfig.json(.ts文件会自动编译成js文件)

  typeScript中的数据类型

• typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型

  布尔类型（boolean）
  数字类型（number）
  字符串类型(string)
  数组类型（array）
  元组类型（tuple）
  枚举类型（enum）
  任意类型（any）
  null 和 undefined
  void类型
  never类型

  布尔类型（boolean）

• es5

  var flag = true
  flag = 456

• 写ts代码必须指定类型

  var flag:boolean = true;
  //flag = 123 错误写法
  flag = false
  ````
  ### 数字类型（number）
  ```bash
   var num:number= 123;
   num = 456;
   //num='str';    //错误

  字符串类型(string)

  var str:string = '123'
  str = '456'

  数组类型（array） ts中定义数组有两种方式

• 1.第一种定义数组的方式 数组里边所有的原数据都是number或者是指定类型

  var arr:number[] = [1,2,3,4,5]
  var arr1:string[] = ['1','2','3']

• 2.第二种定义数组的方式

  var arr:Array<number>=[11,22,33];

  元组类型（tuple） 属于数组的一种

• 数组类型是var arr1:string[] = [‘1’,’2’,’3’]
• 但是我们`**希望数组里既是number也是string就叫元祖类型*`` 给数组中每一个位置指定一个类型

  et arr_:[number,string]=[123,'this is ts'];

  枚举类型（enum） 用的最多的就是表示一些状态码

• 随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。
• 例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。
• 在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。
• 如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解。
• 也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，
• 这种方法称为枚举方法，用这种方法定义的类型称枚举类型。

  enum 枚举名{
      标识符[=整型常数],
      标识符[=整型常数],
      ...
      标识符[=整型常数],
  } ;

  枚举列子 比如 ：1代表success 0代表error

  enum Flag{success=1,error=2}
  let s = Flag.success
  console.log(s)//1
  let f:Flag = Flag.error;
  console.log(f)//2

• 如果标识符没有赋值 它的值就是下标

  enum Color {blue,red,'orange'};
  var c:Color=Color.red;
  console.log(c);   //1

• 如果其中一个有下标，后边的下标就被改变

  enum Color1 {white,yellow=3,pink};
  var d:Color1=Color1.yellow;
  console.log(d);   //3
  var e:Color1=Color1.pink;
  console.log(e);   //4 下标就被改变了

  enum Err {'undefined'=-1,'null'=-2,'success'=1};
  var z:Err=Err.success;
  console.log(z);//1

  任意类型（any）

• 之前不指定类型和类型不匹配会报错 这回可以随意匹配

  var num_:any = true;
  num_ = [1,'2']

• 注意:在typescript ts没有没有Object数据类型

  var oBox:any = document.getElementById('box')
  oBox.style.color = 'red'

  null 和 undefined 其他数据类型的子类型

  var aa:number;
  console.log(aa) //变量定义未赋值  undefined 但是报错
  
  var bb:undefined;
  console.log(bb)
  
  var cc:number | undefined;
  cc = 234
  console.log(cc)
  
  var nul_:null
  nul_ = null

• 一个元素可能是number 可能是null 可能是undefined

  var then:number|null|undefined
  then=null

  void类型

• typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值
• ES5

  function run(){
      console.log('run')
  }
  run()

• ts

  function run_():void{
      console.log('run_')
  }
  run_() //表示这个方法没有任何类型
  
  function run_1():number{
      return 123 //返回什么就指定什么类型
  }
  run_1() //表示这个方法返回的是number类型

  never类型(不常用)

• never类型是其他类型 （包括 null 和 undefined）的子类型
• ** 代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。**

  var undefined_:undefined
  //undefined_必须是undefined类型的否则报错
  undefined_ = undefined

  var a:never;
  a=(()=>{
      throw new Error('错误');
  })()

赏

谢谢你请我吃糖果

支付宝

微信