typescript 使用教程详解(二)
上一篇:typescript 使用教程详解(一)
七、typescript中泛型
function getData1(value:string):string {
return value;
}
function getData2<T>(value:T):T{
return value
}
getData2<number>(123);
class MinClass<T>{
public list:T[]=[];
add(num:T[]):void{
this.list = num
}
min():T{
var minNum = this.list[0];
for(var i=0;i<this.list.length;i++){
if(minNum>this.list[i]){
minNum = this.list[i];
}
}
return minNum
}
}
var m = new MinClass<number>()
m.add([1,2,3])
console.log(m.min())
class MysqlDb<T>{
add(user:T):boolean{
return true
}
}
class User{
userName:string|undefined;
pasword:string| undefined;
}
var us = new User()
us.userName = 'zhangsan'
us.pasword = '1234'
var Db = new MysqlDb<User>()
Db.add(us)
class Artcle {
title:string|undefined;
desc:string|undefined;
constructor(params:{
title:string|undefined,
desc:string|undefined
}){
this.title = params.title
this.desc = params.desc
}
}
var art = new Artcle({
title:'分类',
desc:'111'
})
var Dbs = new MysqlDb<Artcle>()
Dbs.add(art)
interface TconfigFn{
<T>(value:T):T;
}
var getData:TconfigFn = function<T>(value:T):T{
return value
}
getData<number>(123)
interface TconfigFn2<T>{
(value:T):T;
}
function getData4<T>(value:T):T{
return value
}
var myGetData:TconfigFn2<string> = getData4;
myGetData('20')
八、typescript的装饰器
function logClass(params:any){
console.log(params)
params.prototype.apiUrl = '动态扩展的属性',
params.prototype.run = function(){
console.log(run)
}
}
@logClass
class HttpClient{
constructor(){
}
getData(){
}
}
var http :any = new HttpClient();
console.log(http.apiUrl)
function logClass1(params:string){
return function(target:any){
console.log(target)
target.prototype.apiUrl = params
console.log(params)
}
}
@logClass1('传入参数')
class HttpClient1{
constructor(){
}
getData(){
}
}
var http1 :any = new HttpClient1();
console.log(http1.apiUrl)
function logClass2(params:any){
return class extends params{
apiUrl:any='我是修改后的数据';
getData(){
this.apiUrl = this.apiUrl+'---'
console.log(this.apiUrl)
}
}
}
@logClass2
class HttpClient2{
public apiUrl:string | undefined
constructor(){
this.apiUrl = '我是构造函数里面的apiUrl'
}
getData(){
console.log(this.apiUrl)
}
}
var http2 :any = new HttpClient2();
console.log(http1.apiUrl)
function logPropty(params:any){
return function(target:any,attr:any){
console.log(target,'类的原型对象')
console.log(attr,'成员属性名')
target[attr]=params
}
}
class HttpClient3{
@logPropty('http//:www/baidu.com')
public apiUrl:string | undefined;
constructor(){
}
getData(){
console.log(this.apiUrl)
}
}
var http3 :any = new HttpClient3();
http3.getData()
function logMethod(params:any){
return function(target:any,methodName:any,desc:any){
var oMethod = desc.value;
desc.value = function(...args:any[]){
args = args.map((value)=>{
return String(value);
})
oMethod.apply(this.args);
console.log(args)
}
}
}
class HttpClient4{
public apiUrl:string | undefined;
constructor(){
}
@logMethod('http//:www/baidu.com')
getData(...args:any[]){
console.log('我是内部方法')
}
}
var http4 :any = new HttpClient4();
http4.getData(123,'xxxx')
function logParams(params:any){
return function (target:any,methodName:any,index:any){
target.apiUrl = params
}
}
class HttpClient5{
constructor(){
}
getData(@logParams('http//:www/baidu.com')params:any){
console.log(params)
}
}
var http5 :any = new HttpClient5();
http5.getData(11111)
console.log(http5.apiUrl)
function A (params:any){
return function (target:any){
console.log ('类装饰器1')
}
}
function B (params:any){
return function (target:any){
console.log ('类装饰器2')
}
}
function C1(params:any){
return function (target:any,attr:any){
console.log ('属性装饰器1')
}
}
function C2 (params:any){
return function (target:any,attr:any){
console.log ('属性装饰器2')
}
}
function D (params:any){
return function (target:any,methodName:any,desc:any){
console.log ('方法装饰器1')
}
}
function E (params:any){
return function (target:any,methodName:any,desc:any){
console.log ('方法装饰器2')
}
}
function F (params?:any){
return function (target:any,methodName:any,index:any){
console.log ('方法参数装饰器1')
}
}
function G (params?:any){
return function (target:any,methodName:any,index:any){
console.log ('方法参数装饰器2')
}
}
@A('a')
@B('b')
class HttpClient6{
@C1('C1')
public params1: any
@C2('c2')
public params2: any
constructor(){
}
@D('d')
getData(@F()params:any,@G()params2:any){
}
@E('e')
setData(){
}
}
var http6 = new HttpClient6()
九、typescript中的模块和命名空间
namespace A{
interface Anima{
name: string;
eat(str:string):void;
}
export class Pig implements Anima{
name:string;
constructor(name:string){
this.name = name;
}
eat(str:string){
console.log(this.name+str)
}
}
}
namespace B{
interface Anima{
name: string;
eat(str:string):void;
}
export class Pig implements Anima{
name:string;
constructor(name:string){
this.name = name;
}
eat(str:string){
console.log(this.name+str)
}
}
}
var pig = new A.Pig('小猪')
pig.eat('粮食')
块就可以使用模块里面暴露的数据(变量,函数,类)
*/
namespace A{
interface Anima{
name: string;
eat(str:string):void;
}
export class Pig implements Anima{
name:string;
constructor(name:string){
this.name = name;
}
eat(str:string){
console.log(this.name+str)
}
}
}
namespace B{
interface Anima{
name: string;
eat(str:string):void;
}
export class Pig implements Anima{
name:string;
constructor(name:string){
this.name = name;
}
eat(str:string){
console.log(this.name+str)
}
}
}
var pig = new A.Pig('小猪')
pig.eat('粮食')