为什么要使用TypeScript

为什么要使用TypeScript

编写代码的时候就会分析代码有无问题，实时检测错误

http://10.31.156.16:8080/

什么是TypeScript

Microsoft公司注册商标
TypeScript具有类型系统，且是JavaScript的超集。它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的
在JavaScript的基础上添加静态类型定义构建而成，通过TypeScript编译器或Babel转译为JavaScript代码

其他数据类型
1. 内置对象类型
2. 元组
3. 枚举
4. 接口
5. 。。。

为什么要提供类型系统？为什么要用ts

ts类型系统强类型数据类型是定死的安全性更高

js弱类型难以胜任和维护大型项目开发
编译代码时即可发现错误减少debug时间
提供更多的代码提示
缺点：代码量增加


1.  // 全局环境安装TS
$ cnpm i typescript -g<br />    会有 tsc 命令
 // 使用tsc命令 编译.ts文件<br />浏览器无法解析ts 需要转js代码<br /> $tsc ./scr/app.ts --outFile ./dist/app.js // 一对一转<br />    ts用let 到了js转成了var (优雅降级)
 $tsc ./src/* --outDir ./dist --watch // 目录全转 且 实时监听
 <br />$tsc --init   自动生成tsconfig.json(ts配置文件)<br />    rootDir ./src<br />    outDir ./dist<br />        之后执行需转换 -> $tsc<br />

基本数据类型写法

let / const 变量:数据类型 = 值<br />    let und:undefined=undefined;<br />    <br />    简写：类型推论 根据值定义变量的数据类型<br />        let n = 1000;

内置对象类型

Boolean   <br />    const bole:Boolean = new Boolean(false)<br />    <br />    DOM节点类型<br />    const box:HTMLDivElement = document.querySelector('.box') // div<br />    <br />    const span:HTMLSpanElement = document.querySelector('.span') // span<br />    <br />    const html:HTMLElement = document.documentElement // html<br />    <br />    const img:HTMLImgeElement = new Image()<br />    <br />    const d:Date = new Date() // 日期类型

对象类型

interface[接口]/type
1. interface 接口名称[大驼峰]{}
```
const obj:ObjType={
id:1,
name:‘zhujinming’,
age:18,
sex:’nan’,
color:’红色’ // 可能没有
}

interface ObjType{
readonly id:number, // 只读属性
name:string, // 必传属性
age:number, // 必传属性
sex:string, // 必传属性
color?:string, // 可选属性
[propName:string]:any // 任何属性 obj对象可以添加任何属性了【慎用】
}
```
1. tyoe 接口名称[大驼峰] = {}

函数

ts定类型：参数和返回值
```
// 有返回值
function fn(a:number,b:number):number{
return 1000
}
fn(20,10)

 // 无返回值 <br />    function fn1(a:string,b:boolean):void{ // void 表示空类型<br />        // a,b 做了一些逻辑<br />    }
const fn2:(a:number,b:number)=>number = (a,b)=> a + b

<a name="K7Nqz"></a>
###### 工作写法
    const fn:FnType=(a,b)=>a+b;<br />    <br />    interface FnType{ // 使用接口来定义函数类型<br />        (a:number,b:number):number;<br />    }<br />    <br />    type FnType={ // 使用接口来定义函数类型<br />        (a:number,b:number):number;<br />    }<br />    <br />    // 拓展 1<br />    const Fn = (options:ObjType):void => {<br />        console.log(options);<br />    }<br />    <br />    interface ObjType{<br />        url: string<br />    }<br />    <br />    // 拓展2<br />    const Fn2 = ({b}:Fn2type):void => {<br />        console.log(b)<br />    }<br />    <br />    const Fn2 = ({b}:{b:string,a:number}):void => {<br />        console.log(b)<br />    }<br />    <br />    Fn2({a:1,b:'b'});<br />    <br />    interface Fn2type{<br />        a:number,<br />        b:string,<br />    }
<a name="CUdIL"></a>
### 数组
    const arr:number[] = [1,2,3,4] // 表示定义了一个元素只能是number类型的数组<br />        arr2:string[]<br />    // 联合类型<br />    const arr3:(number|string)[] = [1,2,'3','4']<br />    <br />    const arr4:Arr4Type[]=[{},{},{}]<br />    <br />    interface Arr4Type{<br />        readonly id:number,<br />        has?:boolean,<br />        img:string,<br />        version:string,<br />    }
<a name="9g2Jw"></a>
### 元组类型
元组：是一种规定了数组长度以及每一个元素的数据类型的特殊数组<br />```<br />    // 1.定义了一个长度为2的数组<br />    // 2.第一个元素是number,第二个是string<br />    <br />    let x:[number,string]<br />    x = [10,'hello']<br />

枚举类型

自动添加计数
```
enum Color{Red = 1,Green,Yelllow}
console.log(Color,Green) // 2
console.log(Color,Yellow) // 3
console.log(Color[1]) // Red


<a name="1uLwj"></a>
### 泛型
给未知数据定义类型，通常用于类和函数<br />想让一个函数的参数和返回类型是相同的<br />```<br />    function Handler<T> (a:T):number{<br />        return 100;<br />    }<br />

类Class

实例成员 [public]
静态成员 static
私有成员 private

类实现接口

class App implements AppType{
}
interface AppType{ // 约定实例成员的属性
}

类型声明

ts引入js插件会发生什么？
> 引入时就报错
> js代码提示一个都没有

类型声明：xxx.d.ts 类型声明文件
> 类型声明文件 @types 社区
> $cnpm i @types/jquery -S

/// 三斜杠语法声明文件的引入
decl????

ts