TypeScript是什么

TypeScript，简称 ts，是微软开发的一种 静态 的编程语言，它是 JavaScript 的超集

• 以js为基础的构建语言
• 一个js的超集 （pro版本的js）
• 可以在任何支持js的平台中执行
• ts扩展了js并添加了类型
• ts不能被js解析器直接执行

js很好，但也有几个小毛病

• 不易于维护
• 做不到严格模式
• 安全隐患---不报错
• 变量类型是动态的
• 运算问题（没有严格的类型限制，任何类型都能运算，容易产生问题，不易维护与阅读）

TypeScript增加了什么

TypeScript开发环境搭建

1. 下载Node.js
2. 安装Node.js
3. 使用npm全局安装ts---npm i -g typescript
4. 创建一个ts文件
5. 使用tsc对ts文件进行编译---tsc xxx.ts

TypeScript的类型声明

• 类型声明是TS非常重要的一个特点
• 通过类型声明可以指定TS中的变量（参数、形参）的类型
• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
• 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
• 语法：

    let 变量：类型；
    // 声明一个变量a, 同时指定它的类型为number
    let a: number;
    a = 10;
    a = '333'; // 会报错，因为变量a的类型是number, 不能赋值字符串
    let 变量：类型 = 值;
    let b : number = 10
    // 如果你的变量的声明和赋值是同时进行的， TS可以自动对变量进行类型检测
    let c = false;
    function fn(参数1: 类型， 参数2: 类型)：返回值类型{
        ...
    }
    // js中的函数是不考虑参数的类型和个数的
    function sum(a, b){
        return a + b;
    }
    // console.log(sum(123, 456)); // 579
    console.log(sum(123, '456')); // '123456' 存在安全隐患
    // ts
    function sum(a: number, b: number): number{
        return a + b;
    }
    sum(123, 456) // 只能传入两个实参且必须为number类型

自动类型判断

• TS拥有自动的类型判断机制
• 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
• 如果你的变量的声明和赋值是同时进行的，可以省略掉类型声明

TypeScript的类型

    // 直接使用字面量进行类型声明
    let a: 10;
    a = 10;
    
    // 使用 ｜ 来连接多个类型（联合类型）
    let b: 'male' | 'female'; // 这种应用场景不是很多
    b = 'male';
    b = 'female';
    
    let c: boolean | string; // 这种应用较多
    c = true;
    c = 'hello';
    
    // any 表示的任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
    // 使用TS时，不建议使用any类型（但是存在即合理，不是不让用，只是不建议）
    let d: any;
    d = 10;
    d = true;
    d = 'hello';
    // any不仅影响自己，还会影响其他，谁沾边谁完
    // d的类型是any，它可以赋值给任意变量
    let s: string;
    s = d; // s本来是个string类型，但却变成了any
    
    // unknown 表示未知类型的值，实际上就是一个类型安全的any
    // unknown 类型的变量，不能直接赋值给其他变量
    // 不确定类型可以用unknown,尽量少用any
    let e: unknown;
    e = 10;
    e = true;
    e = 'hello';
    s = e; // 报错
    if（typeof e === 'string'）{
        s = e; // 解决
    }
    
    // 断言类型，可以用来告诉解析器变量的实际类型
    // 语法1:变量 as 类型
    // 语法2:<类型>变量
    s = e as string;
    s = <string>e;
    
    // void 用来表示空，以函数为例，就表示没有返回值的函数
    function fn(): void{
       alert('hello');
    }
    
    // never 用来表示永远不会返回结果
    function fn(): never{
      throw new Error('报错了');
    }
    
    // object {} 用来指定对象中可以包含哪些属性
    // 语法：{属性名：属性值，属性名：属性值}
    // 在属性名后加上？，表示该属性是可选的
    let b: {name: string, age?: number};
    b = {name: '孙悟空', age: 18};
    // 可以自定义多个属性
    let c: {name: string, [propName: string]: any};
    c = {name: '孙悟空', age: 18, gender: 1};
    
    // array 数组的类型声明
    // 语法1: 类型[]
    // 语法2: Array<类型>
    
    // string[] 表示字符串数组
    let e: string[];
    e = ['a', 'b', 'c'];
    
    // Array<number> 表示数字数组
    let e: Array<number>;
    e = [1, 2, 3];
    
    // 元组类型，元组就是固定长度的数组
    // 语法：[类型，类型，类型]
    let h: [string, number];
    h = ['hello', 123];
    
    // 枚举类型
    enum Gender{
        Male = 0,
        Female = 1
    };
    
    let person: {name: string, gender: Gender};
    person = {
        name: 'xiaoming',
        gender: Gender.Male
    }

TypeScript的常用的编译选项tsconfig.json文件

    /*
        tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
        include 用来指定哪些ts文件需要被编译
        路径：** 表示任意目录
              * 表示任意文件
    */
    "include": [
        "./src/**/*"
    ]
    
    // compilerOptions 编译器的选项
    "compilerOptions": {
        // target 用来指定ts被编译的ES版本
        "target": "es2021",
        // module 用来指定使用的模块化的规范
        "module": "es2021",
        // lib 用来指定项目中要使用的库
        "lib": ["dom", "es2021"],
        // outDir 用来指定编译后文件所在的目录
        "outDir": "app/dist"
        // 所有严格检查的总开关，设置开启
        "strict": true,
        // 是否移除注释
        "removeComments": true,
        // 是否对js文件进行编译，默认false
        "allowJs": true,
        // 不允许隐式的any类型
        "noImplicitAny": true
    }