ts学习(一)

故心故心故心故心小故冲啊

---

---

1.ts认识

TypeScript 是一种由微软开发的自由开源的编程语言，他是JavaScript的一个超集，扩展了JavaScript的语法，主要提供了类型系统和对 ES6 的支持

2.ts优势

TypeScript 的优势
强大的IDE支持：体现在三个特性上，1.类型检查，在TS中允许你为变量指定类型。2.语法提示。3.重构。
Angular2、vue3的开发语言

3.TypeScript 的知识面

有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端开发可能不是很熟悉的知识点

接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性
类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

4.ts的安装

TypeScript 的命令行工具安装方法
npm install -g typescript
查看版本
tsc -v
编译一个 TypeScript 文件
tsc xxx.ts

5.ts用法–类型定义+接口定义使用

window.onload = function () {
    //ts用法
    let num: number = 3;
    let str: string = '123';
    let flag: boolean = false;
    let a: null = null;
    let b: undefined = undefined;

    //类型定义后，不允许类型改变
    // num = '123';   //error

    //任意值(any) 用来表示允许赋 值为任意类型
    let gx: any = 'hhaha';
    gx = 123;
    gx = false;

    //变量如果在声明的时候，未指定其类型，会被识别为任意值
    var gx1;  //未指定其类型，会被识别为任意值
    gx1 = 123;
    gx1 = 'xixix';
    gx1 = false;

    //可以声明联合类型   可以为多种类型中的一种
    let gx2: number | string;
    gx2 = '123';
    gx2 = 123;
    // gx2 = false; //error 不可以赋值其他类型


    //数组  有多种定义方式
    //最简单的方式 类型+方括号 来表示数组
    let arr: number[] = [1, 2, 3, 4, 5];  //声明数值型数组,数组中只可以存放数字
    let arr2: string[] = ['1', '2', '3'];
    let arr3: any[] = [1, '2', false, null, [1, 2]]; //任意类型数组,可以存放任意类型\


    //对象的类型  —— 接口
    //接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
    //规范
    //接口首字母大写
    interface Person {
        name: string,
        age: number
    }

    //对象受到接口的约束
    let gx3: Person = {
        name: 'gx',
        age: 18
    }

    //定义的变量比接口少了属性是否允许  ——不允许
    // let gx4:Person = {  //error
    //     name:'gx',

    // }

    //定义的变量比接口多了属性是否允许  ——不允许
    // let gx5:Person = { //error
    //     name:'gx',
    //     age:18,
    //     sex:'man'
    // }

    //可选属性  希望接口中有可选属性 (添加?)
    interface Person2 {
        name: string,
        age?: number
    }
    let gx6: Person2 = {
        name: 'gx',
    }
    let gx7: Person2 = {
        name: 'gx',
        age: 18
    }

    //可选属性只针对于当前设置的属性，仍然不能添加其它属性
    // let gx8: Person2 = { //error
    //     name: 'gx',
    //     age: 18,
    //     sex: 'man'
    // }

    //任意属性   接口中添加一个任意的属性
    interface Person3 {
        name: string,
        age: number,
        [propName: string]: any  //添加一个字符串型的任意属性
    }
    //注意：写入了任意属性[propName: string]  那么确定属性和可选属性必须是它的子属性
    let gx8: Person3 = {
        name: 'gx',
        age: 18,
        sex: 'man'
    }

    //函数类型   输入和输出的约束
    //函数声明
    function f1(x: number, y: number): number {   //(x: number,y: number) 输入约束  : number 输出的约束
        return x + y
    }
    f1(1, 1);
    //函数表达式
    var f2 = function (x: number, y: number): number {
        return x + y
    };
    //能否允许传多、少参数--不允许
    function f3(x: number, y: number): number {
        return x + y
    }
    //f3(1,1,5);
    //f3(1);

    //参数默认值
    function f4(x: number = 5, y: number): number {
        return x + y
    };
    //参数可选 
    //注意！！！ 可选参数必须接在必需参数后面
    //换句话说：可选 参数后面不允许再出现必需参数
    function f5(x: number = 5, y?: number): number {
        if (y) {
            return x + y;
        } else {
            return x;
        }
    };
    f5(10);
    //f5(10,10); //OK
}

编译成js

window.onload = function () {
    //ts用法
    var num = 3;
    var str = '123';
    var flag = false;
    var a = null;
    var b = undefined;
    //类型定义后，不允许类型改变
    // num = '123';   //error
    //任意值(any) 用来表示允许赋 值为任意类型
    var gx = 'hhaha';
    gx = 123;
    gx = false;
    //变量如果在声明的时候，未指定其类型，会被识别为任意值
    var gx1; //未指定其类型，会被识别为任意值
    gx1 = 123;
    gx1 = 'xixix';
    gx1 = false;
    //可以声明联合类型   可以为多种类型中的一种
    var gx2;
    gx2 = '123';
    gx2 = 123;
    // gx2 = false; //error 不可以赋值其他类型
    //数组  有多种定义方式
    //最简单的方式 类型+方括号 来表示数组
    var arr = [1, 2, 3, 4, 5]; //声明数值型数组,数组中只可以存放数字
    var arr2 = ['1', '2', '3'];
    var arr3 = [1, '2', false, null, [1, 2]]; //任意类型数组,可以存放任意类型\
    //对象受到接口的约束
    var gx3 = {
        name: 'gx',
        age: 18
    };
    var gx6 = {
        name: 'gx'
    };
    var gx7 = {
        name: 'gx',
        age: 18
    };
    //注意：写入了任意属性[propName: string]  那么确定属性和可选属性必须是它的子属性
    var gx8 = {
        name: 'gx',
        age: 18,
        sex: 'man'
    };
    //函数类型   输入和输出的约束
    //函数声明
    function f1(x, y) {
        return x + y;
    }
    f1(1, 1);
    //函数表达式
    var f2 = function (x, y) {
        return x + y;
    };
    //能否允许传多、少参数--不允许
    function f3(x, y) {
        return x + y;
    }
    //f3(1,1,5);
    //f3(1);
    //参数默认值
    function f4(x, y) {
        if (x === void 0) { x = 5; }
        return x + y;
    }
    ;
    //参数可选 
    //注意！！！ 可选参数必须接在必需参数后面
    //换句话说：可选 参数后面不允许再出现必需参数
    function f5(x, y) {
        if (x === void 0) { x = 5; }
        if (y) {
            return x + y;
        }
        else {
            return x;
        }
    }
    ;
    f5(10);
    //f5(10,10); //OK
};