typescript

ts基础

vscode配置自动编译ts

tsc --init  //生成tsconfig.json文件
//在tsconfig.json文件 改 "outDir": "./js"
在导航栏找到  任务--> 监视 tsconfig.json

hbuild配置自动编译ts

1. 在最上面菜单栏，点击工具——插件安装。
2. 点击下方浏览Eclipse插件市场，搜索typescript插件进行安装
3. 安装完后重启编译器，点击菜单栏工具——选项，选择编译ts文件
4. 在你的项目上右键点击——配置——Enable TypeScript Builder，之后你再保存
5. .ts文件时会自动保存在当前目录编译出对应的.js文件

数据类型

布尔类型(boolean)

数字类型(number)

字符串类型(string)

var str:string = 'hello';

数组类型(array)

var arr:Array<number> = [11,22,33];  //全是数字的数组
var arr:number[] = [11,22,33];

元组类型(tuple)

//元组类型属于数组类型用于给数组中每个位置指定类型
let arr:[number,string] = [123,'this is ts'];

枚举类型(enum)

enum 枚举名{
	标识符[=整型常数]，
	标识符[=整型常数]，
	...
	标识符[=整型常数]，
};
enum Flag { success=1,error=2 };
let s:Flag = Flag.success;
console.log(s);   //1
//如果标识符没有赋值，它的值就是下标。

任意类型(any)

null 和 undefined

void类型

//一般用于定义方法没有返回值
function run():void{
	console.log('ksdkl');
}

never类型

• never类型是其他类型（包括null和undefined）的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。

函数定义

function run():string{
	//必须返回string类型的值
}
//匿名函数
let fun2 = function():number{
	//返回数字类型的值
}

es5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数。（加个 ? )

function getInfo(name:string,age?:number):string{
	if(age){
		return `${name} --- ${age}`;
	}else{
		return `${name} --- 年龄保密`
	}
}
alert(getInfo('zhangsan'));   //zhangsan --- 年龄保密

ts的重载

• java中的方法的重载，重载指的是两个或两个以上同名函数，但他们的参数不一样，这时会出现函数重载的情况。

function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{
	if(typeof str === 'string'){
		return "我叫：" + str;
	}else{
		return "我的年龄是" + str;
	}
}

对象继承

//es5的类
function Person(){
	this.name = '张三';
	this.age = 20;
	this.run = function(){
		alert(this.name);  
	}
}
Person.prototype.sex = '男';
Person.prototype.work = function(){
	alert(this.name);
}
//web类继承Person类 原型链 + 对象冒充的组合继承模式
function Web(){
	Person.call(this);  //对象冒充实现继承
}
let w = new Web();
w.run();  //对象冒充可以继承构造函数里面的属性和方法
w.work();   //报错，对象冒充不可以继承原型链上的属性和方法

function Web(){}
Web.prototype = new Person();  //原型链实现继承
let w = new Web();
//原型链实现继承：可以继承构造函数里面的属性和方法，也可以继承原型链上的属性和方法。

//es6的类
class Person{
	name:string;  //属性 前面省略了public关键字
	constructor(a:string){ 
		this.name = n;
	}
	run():void{
		alert(this.name);
	}
}
let p = new Person('张三');
p.run();

ts接口

• 接口的作用：在面向对象编程中，接口是一种规范的定义，它定义了行为和动作的规范

//封装请求的接口
interface Config{
	type:string;
	url: string;
	data?: string;
	dataType: string;
}
function ajax(config:Config){
	let xml = new XMLHttpResquest();
	xhr.open(config.type,config.url,true);   //true表示异步请求
	xhr.send(config.data);
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			console.log('success');
			if(config.dataType == 'json'){
				JSON.parse(xhr.responseText);
			}else{
				console.log(xhr.responseText);
			}
		}
	}
}

ajax({
	type: 'get',
	data: 'name=zhangsan',
	url: 'http://a.itying.com/api/productlist',
	dataType: 'json'
})

函数类型接口

• 对方法传入的参数以及返回值进行约束。

//加密的函数类型接口
interface encrypt{
	(key:string,value:string):string;
}
let md5:encrypt = function(key:string,value:string):string{
	return key + value;
}
console.log(md5('name','zhangsan'));

ts的实现和继承

interface Animal{
	eat():void;
}
interface Person extends Animal{
	work():void;
}
class Web implements Person{
	public name:string;
	constructor(name:string){
		this.name = name;
	}
	eat(){}
	work(){}
}

//web继承programmer，实现person
class Programmer{
	public name:string;
	constructor(name:string){
		this.name = name;
	}
	coding(code:string){}
}
class Web extends Programmer implements Person{
	constructor(name:string){}
	eat(){}
	work(){}
}

ts泛型

• 泛型：在软件工程中，我们不仅要创建一致的良好的API，也要考虑其可重用性，组件不仅能够支持大哥钱的数据类型，同时也能能支持未来的数据类型，这在创建大型系统时为你提供灵活的功能。
• 在像C#和java这样的语言中，可以使用泛型来创建可重用地组件，一个组件支持多种类型的数据，这样用户就可以以自己的数据来使用组件。
• 泛型就是解决类 接口 方法的复用性，以及对不特定数据类型的支持。

//使用any相当于放弃了数据类型检查
function getData(value:any):any{
	return value;
}
//T表示泛型，具体什么类型是调用这个方法时决定的，可支持不特定类型的数据类型。可支持传入参数与返回参数的类型一致。
function getData<T>(value:T):T{
	return value;
}
getDate<number>(123);

//操作数据库的泛型类
class Mysql<T>{
	add(info:T):boolean{
		return true;
	}
}
class ArticleCate{
	title: string|undefined;
	desc: string|undefined;
	status: number|undefined;
	constructor(params:{
		title: string|undefined;
		desc: string|undefined;
		status?: number|undefined;
	}){
		this.title = params.title
		this.deac = params.desc;
		this.status = params.status;
	}
}
var a = new ArticleCate({
	title: '分类',
	desc: '111',
	status: 1
})
//类当作参数的泛型类
var Db = new MySqlDb<ArticleCate>();
Db.add(a);