typescript

一.定义

1.type类型+ES6

2.javascript的超级

3.包含ES6

4.静态类型语言

5.类型检查,接口,oop非常完善

6.可以编译成javascript在浏览器运行

二.tsc greeter.ts

  • 安装
    npm i typescript -g

  • tsc常用命令
    1.tsc --init 初始化项目

2.tsc ./src/xxx.ts 编译某个文件

3.tsc -w 检测变化并编译

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

三.ts常见类型

  • boolean 布尔

    let b:boolean = true;
    
  • number 数字

    let num:number = 18;
    
  • string 字符串

    let str:string = "i love China"
    
  • 数组

    let arr1:number[] = [1,3,5]
    let arr2:Array<String>=["i","love"];
    let arr3:any = [1,2,3,"abc"];
    
  • 对象 Object

    let obj:Object = {name:"abc",age:18}
    
  • 任意 any

    let notSure:any = "i am abc";
    
  • 没有返回 void

    function fun():void{}
    
  • null类型只能是null

    let n:null = null;
    
  • undefined 没有定义

    let u:undefined = undefined;
    

四.接口

1.定义

 interface Person {
  name:string,
  age:number
}

2.实现接口

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

3.使用

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

4.可选接口

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

5.只读接口

interface Ponit{
readonly x:number,
readonly y:number

}

.五函数

  • 函数返回值

    function fun():void{}
    // 无返回值
    function fun():string{}
    

    // 返回字符串类型
    一旦定义了返回类型,在函数内部必须也要返回该类型

六.参数

  • 参数指定类型

    function add(a:number,b:number):number{...}
    
  • 参数可选

    function add(a:number,b?:number):number{...}
    
  • 参数默认值

    function add(a:number,b:number=15):number{...}
    
  • 箭头函数

    let add = (a:number,b:number):number=>a+b;
    
  • 类(和ES6一致)
    访问修饰关键词
    修饰词既可以修饰属性,也可以修饰方法

class Animal{
  public 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 = val;
// 可以写其他逻辑
}
当实例 .age = xxx 时候会被调用这个方法

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

04.实例化访问设置属性

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • typescript 定义 type类型+ES6 javascript的超级 包含ES6 静态类型语言 类型检查,...
    char1阅读 202评论 0 0
  • 定义 JavaScript的超级类型,包含ES6; 静态类型语言,类型检查,接口、oop非常完善; 可以编译成Ja...
    含含要暴怒阅读 376评论 0 1
  • 为什么要使用TS? 获得更好的开发体验,解决JS中一些难以解决的问题 JS存在的问题: 使用了不存在的变量函数或者...
    小丹子1o1阅读 735评论 0 0
  • 基础类型 布尔 let is:boolean = false 数字 let n:number = 6 let n:...
    泡沫的快乐阅读 1,288评论 0 0
  • 原始数据类型 boolean、number、string、null、undefined 、 Symbol//空值的...
    墨尘_7阅读 680评论 0 0