TypeScript

☞点击进入官网

定义

• type类型+ES6

• javascript的超级

• 包含ES6

• 静态类型语言

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

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

tsc greeter.ts

安装

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 = [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;

接口

定义

interface Person {
name：string，
age：number
}

实现接口

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

使用

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

可选接口

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

只读接口

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