typescript入门学习，小白不迷路

typescript学习

typescript简介

1. TypeScript 是 JavaScript 的一个超集，主要提供了 类型系统 和对 ES6 的支持，由 Microsoft 开发。

2. 应用：vue3.0，angular2.0，vscode…

3. 编译型语言：编译为 js 后运行，单独无法运行;

4. JavaScript是弱类型语言, 而typescript是强类型语言
   强类型语言 强制给变量一个固定类型，这样我们的变量才能够应用

安装及使用typescript

1. 安装typescript
   npm install typescript -g
2. 查看ts版本
   tsc -v
3. typescript的扩展名为ts
4. 网页不支持ts类型， 所以需要将ts转换到js目录下
   tsc ./ts/a.ts //直接在控制台执行是转换到ts目录下，此时我们需要修改tsconfig.json文件
5. 初始化
   tsc --init //产生tsconfig.json配置文件
6. 配置tsconfig.json文件

   • "target" : "es5" //转换目标是es5

   • "module" : "amd" //模块方式 commonjs : node使用的 amd : 网页用的模块 （由于选择es6之后还要进行转换，所以这里选择es5的amd模块方式）

   • "outDir" : "./js/" 输出的目录

   • 其他配制占时不进行处理

   • 再执行 tsc ./ts/a.ts 完成代码转换

   • 监视 同步转换
     tsc -watch 或tsc -w

   • 使用AMD就需要使用require.js文件 自行下载

ts基础类型

var a : number=1; //数值型变量

var a : Number=1; //数值对象型变量

var b : string="abc";//字符类型

var c : boolean = true; //布尔类型

var d : number[] = [1,2,3,4];//定义数组 数值型数组 数组在ts中不是一种类型

var e : Array<string> = ["a","b","c","d"]//定义数组的第二种方式 字符型数组（推荐写法） 在使用数组时一定要注意数据中数据保证类型相同

var f : [string,number,boolean] = ["abc",1,true]//元组类型 前后类型对应

enum Color {Red = "red", Green = ""green}// enum定义 枚举类型 使用方法 var g : Color.Red;
var g :any = 1 //any类型， 任意类型（尽量不要使用any类型）

var h : void = undefined //不指定类型

var i : null = null //null类型

var j : undefined //undefined类型

:never //never类型 永不存在的类型

var obj : object = {a:1,b:2}//对象型

var k : number|undefined //或者类型
(a as number)=10//强制断言为数值类型

ts函数部分

定义参数时，参数必须给定数据类型 在函数后设置类型，表示函数返回当前类型，所以函数内部必须返回指定设置的类型，否则会报错 void 函数不返回任何值

    function fn(a:number, b:string="a"):number{
        a++;
        return a;
    }

ts中的类

导入导出

    //与ES6类似
    //导出
    export default class Box{

    }
    //导入  这里不需要加扩展名
    import Box from "./Box";
    //定义实例化时必须写明类型
    var b : Box = new Box();

继承

    import Box from "./ Box";
    export default class Ball extends Box{

    }

继承后在声明类型时可以按照父类或者接口声明类型

    import Box from "./ Box";
    import Ball from "./Ball";
    var b : Box = new Ball();
    // 这里b也可以改换门庭直接使用父类声明
    b = new Box();

声明变量

在类中声明变量时可以使用 a?:number

• 相当于 ：a : number|undefined

私有类型 private类型，当实例化调用时是不可以调用的，可以在当前类进行调用，不暴露给外面

• private a?:number

受保护类型 protected 类型，实例对象也不可以调用，也不可以被外部调用，可以在当前类中调用 当继承时protect类型可以调用，而private类型不可以被调用

• protect a?:number

共有类型 public类型， 暴露在外的类型，允许调用的类型

• public a?:number

在函数声明时也可以这样声明

    protect function fn (a : number) : void{
        
    }

只读属性 只能读取不能修改

`readonly GAP :number =10;`

• 只读属性的调用 使用类方法 + GAP Box.GAP

接口(自定义接口命名时一般用大写字母I开头 IA.ts)

定义接口（interface）

    export default interface IA{
        // 定义接口时只形容属性和方法名，不给定其描述类型
        // 接口只是证明有number这个属性 和run()这个方法，具体的实现不在接口文件中实现
        num : number;
        run():vold;
    }

继承接口（implements）

• 继承接口， 接口中的方法和属性必须全部出现在这个类中
• 所有接口的属性和方法必须使用public 不能使用private和protect

    // 继承IA接口
    import IA from "./IA";
    export default class As implements IA{
        // 继承接口， 接口中的方法和属性必须全部出现在这个类中
        // 所有接口的属性和方法必须使用public 不能使用private和protect
        public num : number = 3;
        public run():void{
            console.log("aa");
        }
    }

接口可以同时继承

• 同时继承时，必须包含所有的属性和方法

    import IA from "./IA";
    import IB from "./IB";
    export default class As implements IA,IB{
        public num : number = 3;
        public run():void{
            console.log("aa");
        }
    }

强制继承接口,强制c具有IB这个接口 ， 所有就具有了play这个方法

    (c as IB).play();