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 方法被调用