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 常见类型
- boolean布尔
let b:boolean = true; - number 数字
let num:number = 18; - string 字符串
let str:string = "I love you"; - 数组
let arr:number[]=[1,3,5,7,9];
let arr2:Array = ["I","love","typescript"];
let arr3:any[] = ["123","456",789];
- 对象 Object
let obj:Object = {name:"yy",age:18} - 任意 any
let notSure:any = "yapan"; - 没有返回 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:"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 方法被调用