Typescript

Typescript

首先Typescript其实是javascript的超集，我们都知道js是弱类型语言，ts是编译性语言，那么为什么我们要选择ts呢？

• 首先ts增加了代码的可读性和维护性
• ts非常包容,即时报错也会执行文件
• ts拥有非常活跃的社区

1.安装使用ts

首先全局安装命令 npm install -g typescript
然后编译文件 tsc hello.ts
约定文件以ts为后缀,编写react时，以.tsx为后缀
主流IDE中都支持ts，包括代码不全，接口提示，跳转定义

2.ts的原始数据类型

• string
     var a:string = “haha”
• boolean
     var a:boolean = true
• number
     var a:number = 1
• null
     var a :null = null
• undefined
     var a:undefined = undefined
  注意：
  undefined和null是string、boolean、number三种的子集
  也就是说可以定义 var a:string = null 或者var a:string = undefined。
  当给一个变量赋值初始值的时候，它会根据你初始赋值的类型进行定义。
  var b = 1 b=“1” 这样就会报错
  3.ts的联合类型
  第一种方式：var muchtype:string | number = ‘1’
  或者 第二种方式：var muchtype:any =‘1’
  **注意：**第一种方式只能访问此联合类型的所有共有属性或方法
  4.ts的对象
  注意：
  对象一般首字母大写
  对象中可以定义可选属性 只读属性 任意属性
  interface IState{
  name:string，
  age?:number , //存疑 可有可无
  readonly sex：string，//只读属性，一旦赋值便不可更改
  [propName:string]:any //属性个数不确定
  }
  var obj:IState;
  obj = {name：1} //报错
  obj={name:“zhangsan”,age:“3”}
  5.声明类型的函数
  第一种：返回值为number
  function type1(name:string,age:number):number{
  return age
  };
  第二种：参数sex为可有可无
  function type2(name:string,age:number,sex?:string):number{
  return age
  };
  第四种：参数固定
  function type3(name:string=“张三",age:number=18):number {
  return age
  };
  6.表达式函数
  第一种：
  var type1=function(name:string,age:number=18):number{
  return age
  }
  第二种：
  var type2:(name:string,age:numbe)=>number = function(name:string,age:number):number{
  return age
  }
  第三种：
  interface type3{
  (name:string,age:number):number
  }
  var type4:type3=function(name:string,age:number):number{
  return age
  }
  7.重载：输入number就是number，输出string就string
  function type1(name:string):string{
  return name
  }
  function type1(name:number):number{
  return name
  }
  function type1(name:string|number):number|string{
  return name
  }
  8.类型断言：jsx中只能用as语法
  注意：类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的
  比如：
  function type1(name:string|number){
  return name.length //这里由于number类型没有length属性
  return (name as string).length //通过as类型进行共享属性
  return (name).length //通过尖括号进行属性共享
  }
  9.类型别名
• 类型别名采用关键字type 用来给一个类型起个新名字
• 也可以采用type来约束取值只能是某些字符串中的一个
  比如：type Name=string|number
  Name = “1”//name也可以是string
  Name = 1 //name可以是number
  或者：type sex = ‘男’ | ‘女’
  10.枚举
• 枚举采用关键字enum定义，用于取值被限定在一定范围内的场景
  比如：
  enum Days{one，two，three，four，five，six，seven}