typescript STUDY

TS与JS的区别：
1、TypeScript 引入了 JavaScript 中没有的“类”概念
2、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
3、js没有重载概念，ts有可以重载
4、ts增加了接口interface、泛型、类、类的多态、继承等
5、ts对比js基础类型上，增加了 void/never/any/元组/枚举/以及一些高级类型
js有的类型：boolean类型、number类型、string类型、array类型、undefined、null
ts新增的类型：tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）

变量申明

// 先声明后赋值

let a: number;
a = 1;
// a = "a"; 不能将类型“string”分配给类型“number”。

// 声明的同时赋值 可以省略 : 类型名
let b = 2;
b = 3;

// 声明函数  函数声明返回值类型后就必须要返回值 反之定义为void
function sum(n1 : number, n2 = 0) :number {
    return n1 + n2;
}

console.log(sum(1,2));

字面量和unknown

// 字面量类型 （有点像全局变量）

let a2: "男";

// a2 = "n"; 不能将类型“"n"”分配给类型“"男"”
let b2 : "男" | "女";
b2 = "女";

// any 任意类型
let c2 : any ;
// let c2; //变量 "c2" 隐式具有 "any" 类型，但可以从用法中推断出更好的类型。
c2 = 1;
c2 = "1";
c2 = true;

// unknown 未知类型 （能用unknown就不用any）
let d2 :unknown;
d2 = 2;
d2 = "2";


// any 类型的变量可以赋值给任何人 unknown类型与之相反 不能直接赋值给别人 但是可以通过as 变量名 来赋值
let str2  = "你好" ; // string 类型
c2 = 123;
// str2 = d2; 不能将类型“unknown”分配给类型“string”。
// 类型断言 
/**
 * 语法有两种
 * b2 as string
 *  b2
 */
// str2 = d2 as string; 
str2 = <string>d2; 


// 定义一个没有返回值或者为undefined的函数
function fn2 ():void{
    
}
// // 定义一个不能有任何返回值的函数 
// function fn3():never{
//     console.log("456");
// }

数组和对象

//  定义数组
let arr1: string[];
arr1 = ["1", "2"];

let arr2 = [1, 2, 3];
// arr2.push("2"); 类型“string”的参数不能赋给类型“number”的参数。

let arr3: Array<number>;
arr3 = [1, 2, 3, 4];

// 定义一个有固定属性的对象 ?为可选参数
let obj: {
    name: string,
    age: number,
    gender?:string
}

obj = {
    name:"小明",
    age:18,
    gender:"男"
}

// [propName:string]:any 表示 任意变量 如 a:any b:any c:any
let obj2 : {name:string,[propName:string]:any};

obj2 = {
    name:"小红",
    age:17,
    gender:"女"
}

// 设置函数的类型声明
let fun1 : (a:number,b:number) => number

fun1 = (a,b):number =>{
    return a + b;
}

元组和枚举

// 元组 就是固定长度的数组
// 语法 [类型，类型，类型...]
let yz: [number, string, boolean];
yz = [1, "2", false];

// 枚举类型 定义一个性别的枚举类型
enum MYENUM {
    male = 0,
    female = 1
}

let obj4: { name: string, gender: MYENUM }
obj4 = {
    name:"小明",
    gender:0
}

泛型

// 在定义函数或者类时 如果遇到类型不明确的时候就可以使用泛型
function fn1<t>(a:t):t{
    return this;
}

// 调用
console.log(fn1(5)); //ts自动识别是number类型
console.log(fn1<string>("你好")); //指定类型

interface int1 {
    length:number;
}

function fn2<t extends int1>(a:t):number{
    return a.length;
}

fn2("123");
// fn2(1); //报错 类型“number”的参数不能赋给类型“int1”的参数。 因为1是数字没有length

接口

// 接口
// interface 

// 接口中的所有属性都不能有实际的值
// 接口只定义对象的结构，而不考虑实际的值
// 接口中的所有方法都是抽象方法

// 定义接口
interface myInter{
    name:string;
    sayHello():void;
}

/**
 * 定义类时，可以使类去实现一个接口
 * 实现接口就是使类满足接口的要求
 */
class MyClass implements myInter{
    name: string;
    sayHello(): void {
        throw new Error("Method not implemented.");
    }
    
}

类的修饰符和存储器

class Pepor {
    private name: string;
    public gender: string;  //公共属性 能在任意位置使用
    private age: number; //私有属性 只能在类里使用
    // protected 受保护的属性 只能在类和继承的之类中使用
    constructor(name: string, gender: string, age: number) {
        this.name = name;
        this.gender = gender;
        this.age = age;
    }
    // get 与 set 存储器
    getName() {
        return this.name;
    }
    setName(value: string) {
        this.name = value;
    }
    setAge(vale: number) {
        // 在用户设置时就行判断 年龄不能小于18岁
        if (vale > 18) {
            this.age = vale;
        }
    }
}

let xiaoming = new Pepor("小明", "男", 18);
// console.log(xiaoming.age); //属性“age”为私有属性，只能在类“Pepor”中访问
console.log(xiaoming.getName());
xiaoming.setAge(21);
console.log(xiaoming)

// 以上的升级

class Bclass {
    public _name: string; private _age: number; public _gender: string;
    constructor(name:string,age:number,gender:string) {
        this._name = name;
        this._age = age;
        this._gender = gender;
    }

    get age():number {
        console.log("get方法执行了");
        return this._age;
    }

    set age(vale:number){
         // 在用户设置时就行判断 年龄不能小于18岁
        console.log("设置方法执行了");
         if (vale > 17) {
            this._age = vale;
        }
    }
}

let xiaohong = new Bclass("小红",18,"女");
xiaohong.age = 20;
console.log(xiaohong.age)

tsconfig.json 配置文件

{
    //用来指定哪些文件需要被自动编译 *表示任意文件 **表示任意文件
    "include": ["./src/**/*"],
    //用来指定不需要被自动编译的文件 *表示任意文件 **表示任意文件
    // 可以不写有默认值 ["node_modules","bower_components","jspm_packages"]
    // "exclude": []
    "compilerOptions": {
        "target": "ES2015" ,// 编译成ES的版本
        "module": "ES2015",//要使用模块化的规范
        // "lib": ["WebWorker"],//指定要使用的库 一般不用动他有默认值
        "outDir": "./dist/js",//编译好的js文件的输出目录
        // "outFile": "./dist/js/app1.js",//将所有作用域内的ts代码合并成一个js文件 执行此设定module必须的 'amd' 或者 'system'
        "allowJs": false, //是否对指定编译目录下的js文件进行编译 默认为false
        "checkJs": false, //检查js代码语法 默认为false
        "removeComments": false, //是否取消注释 默认false     
        "noEmit": false , //不生产编译后的文件 默认false  
        "noEmitOnError": false , //当有错误的时候不进行编译 默认false
        "strict": false, //所有严格检查的总开关 默认false
        "alwaysStrict": true, //编译后的文件是否启用严格模式 默认false
        "noImplicitAny": true, //不允许隐式转换成any类型 默认false
        "noImplicitThis": false,//不允许不明确类型的this 默认false
    },
}