typescript

typescript

定义

type类型+ES6

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 = "I love China"

数组

let arr1:number[] = [1,3,5]

let arr2:Array<string> = ["I","love"];

let arr3:any = [123,"abc"]

对象

Object

let obj :Object= {name:"mumu",age:18}

任意

any

let notSure:any ="I am";

没有返回 void

function fun():void{}

null类型只能是null

let n:null = null;

undefined没有定义

let u:undefined = undefined ;

面向对象OOP

封装

继承

多态

接口

接口

接口

定义

interface Person {

name:string,

age:number

}

实现接口

let user:Person = {

  name:"mumu",

  age:18

}

使用

function func(p:Person){

  console.log(p);

}

func(user);

可选接口

interface Person {

name?:string,

age?:number

}

只读接口

interface Point{

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 时候被调用

实例化访问设置属性

let c = new Cat("mumu",18);

c.age ;//  get age方法被调用

c.age=19;// set 方法被调用

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

推荐阅读更多精彩内容