typescript基础知识

定义

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

安装

npm i typescript -g

tsc常用命令

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

tsconfig.json修改

{
  "compilerOptions": {
     "outDir": "./dist",         // 输出目录
    "rootDir": "./src",         //源文件目录
}}

ts常见类型

• boolean布尔类型
  let b:boolean=true;
• number数字
  let num:number = 18;
• string字符串
  let str:string = "我爱中国";
• 数组
  let arr:number[] =[1,2,3,4];
let arr2:Array = ['我','喜','欢','你'];
let arr3:any[]=["abc",456];
• 对象object

let obj:Object={
    name:"安其拉",
    age:8
}
    

• 任意any
  let notSure:any[]=["123","abc",456];
• 没有返回void
  function fun():void{};
• null类型只能是null
  let n:null = null
• undefined没有定义
  let u:undefined =undefined

接口

• 1.接口
  定义：

interface Person{
name:string,
age:number
}

实现接口:

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

使用:

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

• 2.可选接口
  定义：

interface Person{
name?:string,
age?:number
}

• 3.只读接口
  定义：

interface Person{
readonle x:number,
readonle y:number
}

函数

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

• 参数
  参数指定类型
  function add(a:number,b:number):number{xxxxx}
  参数可选
  function add(a:number,b?:number):number{xxxxx}
  参数默认值
  function add(a:number,b:number=10):number{xxxxx}
  箭头函数
  let add(a:number,b:number):number=>a+b

类--和ES6一致

• 访问修饰关键词
  1.修饰词既可以修饰属性，也可以修饰方法

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

1.简写

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

3.public默认修饰符，代表公开的
①class内部可以访问
②子类可以访问
③实例也可以访问

4.private私有的
①class内部可以访问
②子类不会继承（不能访问）
③实例不能访问

5.protected保护的
①class内部可以访问
②子类会继承，也可以访问
③实例不能访问

6.存储器
[在设置或者访问对象某个属性时，可以做一些额外操作
实现的封装，私有变量的隐藏]
步骤
①定义私有变量
private _age:number;
② 设置set
set age(val:number){ this._age = val; //可以写其他逻辑 }
当去实例age=xxx时候会被调用这个方法
③获取get

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

④实例化访问设置属性

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