Typescript

typescript

定义

• type类型+ES6
• javascript 的超级
  包含ES6
• 静态类型语言
  类型检查，接口，oop非常完善
• 可以编译成JavaScript 在浏览器运行

安装

npm i typescript -g

tsc常用命令

tsc --init   //初始化项目
tsc ./src/xxx.ts  //编译某个文件
tsc -w  //检测变化并编译

tsconfig.json

{"complierOptions":{
    "outDir": "./dist",         //输出文件夹            
    "rootDir": "./src",         //源文件夹            
}}

ts 常见类型

1. boolean布尔
   let b:boolean = true;
2. number 数字
   let num:number = 18;
3. string 字符串
   let str:string = "I love you";
4. 数组

let arr:number[]=[1,3,5,7,9];
let arr2:Array = ["I","love","typescript"];
let arr3:any[] = ["123","456",789];

5. 对象 Object
   let obj:Object = {name:"yy",age:18}
6. 任意 any
   let notSure:any = "yapan";
7. 没有返回 void
   function fun():void{ }
8. null 类型只能是null
   let n:null = null;
9. undefined 没有定义
   let u:undefined = undefined;

面向对象OOP

• 封装
• 继承
• 多态
• 接口

接口

接口

• 定义

 interface Person{
    name:string,
    age:number
}

• 实现接口

let user:Person = {
    name:"yaya",
    age:18,
}

• 使用

function fun(p:Person){
    console.log(p);
}
fun(user)

可选接口

interface SquareConfig{
    color?:string,
    width?:number
}

只读接口

interface Point {
    readonly x:number,
    readonly y:number,
}

函数

函数返回值

无返回值
function warnUser ():void{}
返回字符串类型
function fun():string{}
一旦定义了返回类型，在函数内部必须也要返回该类型

参数

参数指定类型
function add(x:number,y:number): number{}
参数可选
function add(x:number,y?:number): number{ }
参数默认
function add(x:number,y:number=20): number{ }

箭头函数

let add = (x:number,y:number):number =>x+y;

类

和ES6一致的

访问修饰符

修饰符既可以修饰属性，也可以修饰方法

class Animal{
    name:string;
    constructor(name:string){
        this.name =name;
}}

简写

class Animal{
    constructor(publicname:string){this.name =name; }
    private sayHi(){}
}

public：默认修饰符，代表公开的

• class内部可以访问
• 子类可以访问
• 实例也可以访问

private：私有的

• class内部可以访问
• 子类会继承，可以访问
• 实例不能访问

protected：保护的

• class内部可以访问
• 子类会继承，可以访问
• 实例不能访问

存储器

在设置或者访问对象某个属性时可以做一些额外操作实现的封装，私有变量的隐藏

步骤

• 01 定义私有变量 private_age:number;
• 02 设置set

set age(val:number){
       this._age=age;
        //可以写其他逻辑
}
//当去实例.age=xxx 时候会被调用这个方法

• 03 设置get

get age():number{
   return this._age;
  //...
}
//当执行 实例.age 时候被调用

• 实例化访问设置属性

let c = new Cat("花花",2);
c.age(); //get age 方法被调用
c.age=18; //set 方法被调用