TypeScript学习

前提

JS缺陷

(1)变量频繁变换类型,类型不明确难以维护

TS定义

(1)定义
    以JavaScript为基础构建的语音，一个JavaScript的超集，扩展js添加了类型，
可以在任何支持js的平台中执行 #TS不能被JS解析器(浏览器)直接执行，需要将TS编译为JS

TS开发环境搭建

(1)使用npm 全局安装typeScript
		npm i -g typescript
        tsc -v //查看版本
(2)创建ts文件
(3)使用tsc对ts文件进行编译
  		tsc xxx.ts
(4)tsc --init //生成tsconfig.json配置文件 可指定编译js的版本
        
#注意 tsc运行ts文件报错系统禁止允许脚本
	`解决方案`：
    (1)使用管理员身份打开powershell 输入指令 set-ExecutionPolicy RemoteSigned 命令 选择Y或者A
    (2)get-ExecutionPolicy 命令--- 执行策略已被更改为 RemoteSigned

#报错 TS重新编译报错---无法重新声明块范围变量
	解决方案：在TS项目文件夹下创建tsconfig.son(可以不用填写内容)

类型

基本类型

类型声明为小写

• 类型声明

  • 通过类型声明指定TS变量(参数，形参)的类型

  • 声明类型后，变量只能使用声明类型的值

  • 声明多个类型可以用 | 来连接

  • 语法

    let 变量：类型;
    let 变量：类型=值;
    function fn(参数：类型，参数：类型)：类型{
        ... //第三个‘类型’为返回值的类型
    }
    eg:
    let a: number; //声明变量为number类型
    let b: string;//声明变量为number类型
    let c: boolean; //声明变量为boolean类型
    	let c=true ;//ts自动判断为布尔类型  
    
     /***声明函数类型**/
    function sum(a:number,b:number) : number{//(1)声明形参为number类型,(2)返回值为number
        return a+b;
    }
    sum(a=123，b=456)
        
    /***变量声明多个类型**/
    let d: boolean | string;
    d=true;
    d='hello';
    

• 自动类型判断

  • TS拥有类型判断机制
  • 变量的声明和赋值同时进行时，TS编译器会自动判断变量的类型

• 类型

  类型	案例	描述
  number	1, -2, 3.5	数字
  string	'hello'	字符串
  boolean	true	布尔
  字面量	其本身	限制变量的值为自身不能修改为其他值
  any	*	任意类型
  void	空值	空类型
  never	没有值	不能是任意值
  object		js对象
  array	[1,2,3]	js数组
  tuple	[4,5]	元组，固定长度数组
  enum	enum(a,b)	枚举，ts新增类型
  unknown	*	类型安全的any

  类型使用

  (1)any与unkown的区别
  	any----任意类型   unknown----未知类型
      any可以赋值任意次，unknown赋值其他类型后不能再赋值
  eg:    
      let a: number =12
      let b: any
      let c: string='abc'
      let d: unknown
      b = a  //b是any 把a赋给b不会报错
      d = true // d由unknown变换为布尔类型
      d = c //这里会报错，因为d 已经赋给布尔，不能再重新赋其他类型值
  
  (2)void 与 never
    void---空值 never---永远不会有值
  //
  function fn(): void{//void用在函数表示没有返回值的函数
      
  }
  function fn2(): never{//never 
      throw new Error('报错了')
  }
  
  (3) object与字面量 {}
  let a: object;
  a={};
  a=function(){} //不会报错 
  
  //{}字面量用来指定对象中可以包含的属性，声明后{}里面属性要与赋值内一致
  //语法: {属性名：属性值，属性名：属性值} ---在数据名后加? 表示属性是可选的
  let b: {name:string,age?: number};
  b = {name:'lht',age :18}
  
  //[propName: string]表示任意属性名  
  //[propName: string]: any ---表示可以是任意类型的属性名
  let c: {name: string,[propName: string]: any};
  c={name:'lht',age:18,gender: '男'}
  
  (4)function
  /*设置函数结构的类型声明
  	语法： (形参：类型，形参：类型 ...)=> 返回值
  */
  let d: (a: number,b: number)=>number //d为函数类型 形参类型为number，返回值为number类型
  
  (5)array数组
  `写法:
    (1)类型[]
    (2)Array<类型>
  `
  //string[] ---表示字符串数组
  let e: string[];
  e=['a','b','c']
  //number[] ---表示数值数组
  let f: number[]
  
  //Array<类型>
  let g: Array<any>
  g=[1,2,3,'hello']   
  
  (6)tuple元组---固定长度的数组
  `语法：[类型，类型，类型]
  `
  let h:[string,number]
  h=['hello',123]
  
  
  (7)enum 枚举---（没懂）
  `语法：
  
  `
  enum Gender{
      Male = 0,
      Female = 1
  }
  let i:{name: string, gender:Gender}
  i={
      name:'lht',
      gender: Gender.Male //male
  }
  

  类型断言

  告诉解析器变量的实际类型
  `写法一：变量 as 类型`
  `写法二：<类型> 变量`
  eg:
  let a: number;
  a as number //或<number> a
  
  

  类型别名

  type myType =string
  let m: myType
  

编译选项

自动编译文件

(1)编译单个文件时，使用-w 自动监视ts文件，ts文件改变时js会跟着改变
	eg: tsc app.ts -w
(2)编译所有ts文件，使用tsc将所有ts文件编译成js文件
    eg:tsc
(3)编译所有ts文件，自动编译ts文件
    eg:tsc -w

自动编译项目

新增ES6新特性

配置选项

tsconfig.json文件配置
{
    //(1)include 用来指定文件哪些需要被编译
    "include":[
       "./src/**/*",//----两个*代表任意编译目录 一个*代表任意编译文件,
    ],
    //(2) exclude不需要被编译的文件
    "exclude":[
        './src/views/**/*'，
        "node_modules",//默认值
        "bower_components",//默认值
        "jspm_packages",//默认值
    ],
    //(3) extends 定义被继承的配置文件
    "extends":"./configs/base",
    //(4)files 指定被编译文件的列表，只有需要编译的文件少时才会用到
    "files":[
        "core.ts",
        "sys.ts",
        ......
    ],
    //(5) compilerOptions 编译器的选项
    "compilerOPtions":[
        //1.target 用来指定被编译的es版本es3 es5 es6 es2015...esNext
        "target":"ES3",
        //2.modules 用来使用的模块化的规范 commonjs  amd  es6 none sysem....
        "module":'es2015',
        //3.lib 用来指定项目使用的库 es5,es6,dom.
        "lib":['dom'],
   		//4.outDir 用来指定编译后文件所在的目录
    	"outDir":'./dist',
    	//5.outFile 将代码合并成一个文件
    	"outFile":'./dist/app.js',
    	//6.allowJS  是否对js文件进行编译 默认是false
    	"allowJS":false,
    	//7. checkJS 检查js是否符合语法规范
    	"checkJs":false,
    	//8. removeComments 是否移除注释
    	"removeComments":false,
    	//9. noEmit 不生成编译后的文件
    	"noEmit":false,
    	//10. noEmitOnError 当有错误时不生成编译后的文件
    	"noEmitOnError":true,
    	//11. alwaysStrict 用来编译后的文件是否使用严格模式
    	"alwaysStrict":true,
    	//12 noImplicitAny 不允许隐式的any类型
    	"noImplicitAny":true,
    	//13 strictNullChecks 严格的检查控制
    	"strictNullChecks":true,
    	//14 strict  控制所有严格检查
    	"strict":true
    ]    
}

开发工具