clean-code-typescript

Tabla de contenidos

Introducción

Variables

Usa nombres de variables que tengan sentido

functionbetween<T>(a1:T,a2:T,a3:T):boolean{returna2<=a1&&a1<=a3;}

functionbetween<T>(value:T,left:T,right:T):boolean{returnleft<=value&&value<=right;}

Usa nombres de variables que sean pronunciables

typeDtaRcrd102={genymdhms:Date;modymdhms:Date;pszqint:number;};

typeCustomer={generationTimestamp:Date;modificationTimestamp:Date;recordId:number;};

Usa el mismo vocabulario para el mismo tipo de variable

functiongetUserInfo():User;functiongetUserDetails():User;functiongetUserData():User;

functiongetUser():User;

Usa nombres fáciles de encontrar

// Que significa este numero 86400000?setTimeout(restart,86400000);

// Decláralas como constantes con nombre en mayúsculas.constMILLISECONDS_IN_A_DAY=24*60*60*1000;setTimeout(restart,MILLISECONDS_IN_A_DAY);

Usa nombres de variables explicativas

declareconstusers:Map<string,User>;for(constkeyValueofusers){// iterar el mapa de usuarios}

declareconstusers:Map<string,User>;for(const[id,user]ofusers){// iterar el mapa de usuarios}

Evita el mapeo mental

constu=getUser();consts=getSubscription();constt=charge(u,s);

constuser=getUser();constsubscription=getSubscription();consttransaction=charge(user,subscription);

No agregar contexto innecesario

typeCar={carMake:string;carModel:string;carColor:string;};functionprint(car:Car):void{console.log(`${car.carMake}${car.carModel} (${car.carColor})`);}

typeCar={make:string;model:string;color:string;};functionprint(car:Car):void{console.log(`${car.make}${car.model} (${car.color})`);}

Usa argumentos por defecto en lugar de condicionales

functionloadPages(count?:number){constloadCount=count!==undefined ?count :10;// ...}

functionloadPages(count:number=10){// ...}

Utilizar enumeraciones (enum) para darle sentido al código

constGENRE={ROMANTIC:'romantic',DRAMA:'drama',COMEDY:'comedy',DOCUMENTARY:'documentary',};projector.configureFilm(GENRE.COMEDY);classProjector{// declaracion del proyectorconfigureFilm(genre){switch(genre){caseGENRE.ROMANTIC:// alguna logica a ser ejecutada}}}

enumGENRE{ROMANTIC,DRAMA,COMEDY,DOCUMENTARY,}projector.configureFilm(GENRE.COMEDY);classProjector{// declaration of ProjectorconfigureFilm(genre){switch(genre){caseGENRE.ROMANTIC:// alguna logica a ser ejecutada}}}

Funciones

Argumentos de las funciones (2 o menos idealmente)

functioncreateMenu(title:string,body:string,buttonText:string,cancellable:boolean,){// ...}createMenu('Foo','Bar','Baz',true);

functioncreateMenu(options:{title:string;body:string;buttonText:string;cancellable:boolean;}){// ...}createMenu({title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true,});

typeMenuOptions={title:string;body:string;buttonText:string;cancellable:boolean;};functioncreateMenu(options:MenuOptions){// ...}createMenu({title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true,});

Las funciones deben realizar solo una cosa

functionemailActiveClients(clients:Client[]){clients.forEach((client)=>{constclientRecord=database.lookup(client);if(clientRecord.isActive()){email(client);}});}

functionemailActiveClients(clients:Client[]){clients.filter(isActiveClient).forEach(email);}functionisActiveClient(client:Client){constclientRecord=database.lookup(client);returnclientRecord.isActive();}

Los nombres de las funciones deben expresar qué accion ejercen

functionaddToDate(date:Date,month:number):Date{// ...}constdate=newDate();// It's hard to tell from the function name what is addedaddToDate(date,1);

functionaddMonthToDate(date:Date,month:number):Date{// ...}constdate=newDate();addMonthToDate(date,1);

Las funciones deben ser de solo un nivel de abstracción

functionparseCode(code:string){constREGEXES=[/* ... */];conststatements=code.split(' ');consttokens=[];REGEXES.forEach((regex)=>{statements.forEach((statement)=>{// ...});});constast=[];tokens.forEach((token)=>{// lex...});ast.forEach((node)=>{// parse...});}

constREGEXES=[/* ... */];functionparseCode(code:string){consttokens=tokenize(code);constsyntaxTree=parse(tokens);syntaxTree.forEach((node)=>{// parse...});}functiontokenize(code:string):Token[]{conststatements=code.split(' ');consttokens:Token[]=[];REGEXES.forEach((regex)=>{statements.forEach((statement)=>{tokens.push(/* ... */);});});returntokens;}functionparse(tokens:Token[]):SyntaxTree{constsyntaxTree:SyntaxTree[]=[];tokens.forEach((token)=>{syntaxTree.push(/* ... */);});returnsyntaxTree;}

Elimina código que esté duplicado

functionshowDeveloperList(developers:Developer[]){developers.forEach((developer)=>{constexpectedSalary=developer.calculateExpectedSalary();constexperience=developer.getExperience();constgithubLink=developer.getGithubLink();constdata={      expectedSalary,      experience,      githubLink,};render(data);});}functionshowManagerList(managers:Manager[]){managers.forEach((manager)=>{constexpectedSalary=manager.calculateExpectedSalary();constexperience=manager.getExperience();constportfolio=manager.getMBAProjects();constdata={      expectedSalary,      experience,      portfolio,};render(data);});}

classDeveloper{// ...getExtraDetails(){return{githubLink:this.githubLink,};}}classManager{// ...getExtraDetails(){return{portfolio:this.portfolio,};}}functionshowEmployeeList(employee:Developer|Manager){employee.forEach((employee)=>{constexpectedSalary=employee.calculateExpectedSalary();constexperience=employee.getExperience();constextra=employee.getExtraDetails();constdata={      expectedSalary,      experience,      extra,};render(data);});}

classDeveloper{// ...}classManager{// ...}typeEmployee=Developer|ManagerfunctionshowEmployeeList(employee:Employee[]){// ...});}

Establece objetos predeterminados con "Object.assign" o destructurando

typeMenuConfig={title?:string;body?:string;buttonText?:string;cancellable?:boolean;};functioncreateMenu(config:MenuConfig){config.title=config.title||'Foo';config.body=config.body||'Bar';config.buttonText=config.buttonText||'Baz';config.cancellable=config.cancellable!==undefined ?config.cancellable :true;// ...}createMenu({body:'Bar'});

typeMenuConfig={title?:string;body?:string;buttonText?:string;cancellable?:boolean;};functioncreateMenu(config:MenuConfig){constmenuConfig=Object.assign({title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true,},config,);// ...}createMenu({body:'Bar'});

functioncreateMenu(config:MenuConfig){constmenuConfig={title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true,    ...config,};// ...}

typeMenuConfig={title?:string;body?:string;buttonText?:string;cancellable?:boolean;};functioncreateMenu({  title='Foo',  body='Bar',  buttonText='Baz',  cancellable=true,}:MenuConfig){// ...}createMenu({body:'Bar'});

No uses indicadores como parámetros de funciones

functioncreateFile(name:string,temp:boolean){if(temp){fs.create(`./temp/${name}`);}else{fs.create(name);}}

functioncreateTempFile(name:string){createFile(`./temp/${name}`);}functioncreateFile(name:string){fs.create(name);}

Evita efectos secundarios (parte 1)

// Variable global referenciada por la siguiente función.letname='Robert C. Martin';functiontoBase64(){name=btoa(name);}toBase64();// Si tuviéramos otra función que utilizara este nombre, ahora sería un valor en Base64console.log(name);// espera imprimir 'Robert C. Martin' pero en su lugar imprime 'Um9iZXJ0IEMuIE1hcnRpbg=='

constname='Robert C. Martin';functiontoBase64(text:string):string{returnbtoa(text);}constencodedName=toBase64(name);console.log(name);

Evita efectos secundarios (parte 2)

functionaddItemToCart(cart:CartItem[],item:Item):void{cart.push({ item,date:Date.now()});}

functionaddItemToCart(cart:CartItem[],item:Item):CartItem[]{return[...cart,{ item,date:Date.now()}];}

No escribas a funciones globales

declare global{interfaceArray<T>{diff(other:T[]):Array<T>;}}if(!Array.prototype.diff){Array.prototype.diff=function<T>(other:T[]):T[]{consthash=newSet(other);returnthis.filter((elem)=>!hash.has(elem));};}

classMyArray<T>extendsArray<T>{diff(other:T[]):T[]{consthash=newSet(other);returnthis.filter((elem)=>!hash.has(elem));}}

Favorece a la programación funcional sobre la programación imperativa

constcontributions=[{name:'Uncle Bobby',linesOfCode:500,},{name:'Suzie Q',linesOfCode:1500,},{name:'Jimmy Gosling',linesOfCode:150,},{name:'Gracie Hopper',linesOfCode:1000,},];lettotalOutput=0;for(leti=0;i<contributions.length;i++){totalOutput+=contributions[i].linesOfCode;}

constcontributions=[{name:'Uncle Bobby',linesOfCode:500,},{name:'Suzie Q',linesOfCode:1500,},{name:'Jimmy Gosling',linesOfCode:150,},{name:'Gracie Hopper',linesOfCode:1000,},];consttotalOutput=contributions.reduce((totalLines,output)=>totalLines+output.linesOfCode,0,);

Encapsula condicionales

if(subscription.isTrial||account.balance>0){// ...}

functioncanActivateService(subscription:Subscription,account:Account){returnsubscription.isTrial||account.balance>0;}if(canActivateService(subscription,account)){// ...}

Evita condicionales negativas

functionisEmailNotUsed(email:string):boolean{// ...}if(isEmailNotUsed(email)){// ...}

functionisEmailUsed(email:string):boolean{// ...}if(!isEmailUsed(node)){// ...}

Evita las condicionales

classAirplane{privatetype:string;// ...getCruisingAltitude(){switch(this.type){case'777':returnthis.getMaxAltitude()-this.getPassengerCount();case'Air Force One':returnthis.getMaxAltitude();case'Cessna':returnthis.getMaxAltitude()-this.getFuelExpenditure();default:thrownewError('Unknown airplane type.');}}privategetMaxAltitude():number{// ...}}

abstractclassAirplane{protectedgetMaxAltitude():number{// shared logic with subclasses ...}// ...}classBoeing777extendsAirplane{// ...getCruisingAltitude(){returnthis.getMaxAltitude()-this.getPassengerCount();}}classAirForceOneextendsAirplane{// ...getCruisingAltitude(){returnthis.getMaxAltitude();}}classCessnaextendsAirplane{// ...getCruisingAltitude(){returnthis.getMaxAltitude()-this.getFuelExpenditure();}}

Evita la comprobación del tipo de letra

functiontravelToTexas(vehicle:Bicycle|Car){if(vehicleinstanceofBicycle){vehicle.pedal(currentLocation,newLocation('texas'));}elseif(vehicleinstanceofCar){vehicle.drive(currentLocation,newLocation('texas'));}}

typeVehicle=Bicycle|Car;functiontravelToTexas(vehicle:Vehicle){vehicle.move(currentLocation,newLocation('texas'));}

No sobre-optimices

// On old browsers, each iteration with uncached `list.length` would be costly// because of `list.length` recomputation. In modern browsers, this is optimized.for(leti=0,len=list.length;i<len;i++){// ...}

for(leti=0;i<list.length;i++){// ...}

Elimina código que no se use

functionoldRequestModule(url:string){// ...}functionrequestModule(url:string){// ...}constreq=requestModule;inventoryTracker('apples',req,'www.inventory-awesome.io');

functionrequestModule(url:string){// ...}constreq=requestModule;inventoryTracker('apples',req,'www.inventory-awesome.io');

Usa iteradores y generadores

functionfibonacci(n:number):number[]{if(n===1)return[0];if(n===2)return[0,1];constitems:number[]=[0,1];while(items.length<n){items.push(items[items.length-2]+items[items.length-1]);}returnitems;}functionprint(n:number){fibonacci(n).forEach((fib)=>console.log(fib));}// Imprime los 10 primeros numeros Fibbonaciprint(10);

// Genera un flujo infinito de números Fibonacci// El generador no guarda la matriz de todos los númerosfunction*fibonacci():IterableIterator<number>{let[a,b]=[0,1];while(true){yielda;[a,b]=[b,a+b];}}functionprint(n:number){leti=0;for(constfiboffibonacci()){if(i++===n)break;console.log(fib);}}// Imprime los 10 primeros numeros Fibbonaciprint(10);

importitiririfrom'itiriri';function*fibonacci():IterableIterator<number>{let[a,b]=[0,1];while(true){yielda;[a,b]=[b,a+b];}}itiriri(fibonacci()).take(10).forEach((fib)=>console.log(fib));

Objetos y estructura de datos

Usa "getters" y "setters"

typeBankAccount={balance:number;// ...};constvalue=100;constaccount:BankAccount={balance:0,// ...};if(value<0){thrownewError('Cannot set negative balance.');}account.balance=value;

classBankAccount{privateaccountBalance:number=0;getbalance():number{returnthis.accountBalance;}setbalance(value:number){if(value<0){thrownewError('Cannot set negative balance.');}this.accountBalance=value;}// ...}// Ahora `BankAccount` encapsula la lógica de validación.// Si un día las especificaciones cambian, y necesitamos una regla de validación extra,// tendríamos que alterar sólo la implementación de `setter`,// dejando todo el código dependiente sin cambios.constaccount=newBankAccount();account.balance=100;

Haz que los objetos tengan miembros privados o protegidos

classCircle{radius:number;constructor(radius:number){this.radius=radius;}perimeter(){return2*Math.PI*this.radius;}surface(){returnMath.PI*this.radius*this.radius;}}

classCircle{constructor(privatereadonlyradius:number){}perimeter(){return2*Math.PI*this.radius;}surface(){returnMath.PI*this.radius*this.radius;}}

Es preferible la inmutabilidad

interfaceConfig{host:string;port:string;db:string;}

interfaceConfig{readonlyhost:string;readonlyport:string;readonlydb:string;}

constarray:number[]=[1,3,5];array=[];// errorarray.push(100);// el arreglo cambiara

constarray:ReadonlyArray<number>=[1,3,5];array=[];// errorarray.push(100);// error

functionhoge(args:readonlystring[]){args.push(1);// error}

constconfig={hello:'world',};config.hello='world';// valor cambiadoconstarray=[1,3,5];array[0]=10;// value is changed// se devuelven los objetos con permisos de escriturafunctionreadonlyData(value:number){return{ value};}constresult=readonlyData(100);result.value=200;// valor cambiado

// objeto de solo lecturaconstconfig={hello:'world',}asconst;config.hello='world';// error// read-only arrayconstarray=[1,3,5]asconst;array[0]=10;// error// Puede devolver objetos de solo lecturafunctionreadonlyData(value:number){return{ value}asconst;}constresult=readonlyData(100);result.value=200;// error

Tipo vs. interfaz

interfaceEmailConfig{// ...}interfaceDbConfig{// ...}interfaceConfig{// ...}//...typeShape={// ...};

typeEmailConfig={// ...};typeDbConfig={// ...};typeConfig=EmailConfig|DbConfig;// ...interfaceShape{// ...}classCircleimplementsShape{// ...}classSquareimplementsShape{// ...}

Clases

Las clases deberían ser pequeñas

classDashboard{getLanguage():string{/* ... */}setLanguage(language:string):void{/* ... */}showProgress():void{/* ... */}hideProgress():void{/* ... */}isDirty():boolean{/* ... */}disable():void{/* ... */}enable():void{/* ... */}addSubscription(subscription:Subscription):void{/* ... */}removeSubscription(subscription:Subscription):void{/* ... */}addUser(user:User):void{/* ... */}removeUser(user:User):void{/* ... */}goToHomePage():void{/* ... */}updateProfile(details:UserDetails):void{/* ... */}getVersion():string{/* ... */}// ...}

classDashboard{disable():void{/* ... */}enable():void{/* ... */}getVersion():string{/* ... */}}// dividir las responsabilidades trasladando los métodos restantes a otras clases// ...

Alta cohesión y bajo acoplamiento

classUserManager{// Malo: cada variable privada es utilizada por uno u otro grupo de métodos.// Evidencia claramente que la clase tiene más de una responsabilidad.// Si sólo necesito crear el servicio para obtener las transacciones de un usuario,// todavía estoy obligado a pasar una instancia de `emailSender`.constructor(privatereadonlydb:Database,privatereadonlyemailSender:EmailSender,){}asyncgetUser(id:number):Promise<User>{returnawaitdb.users.findOne({ id});}asyncgetTransactions(userId:number):Promise<Transaction[]>{returnawaitdb.transactions.find({ userId});}asyncsendGreeting():Promise<void>{awaitemailSender.send('Welcome!');}asyncsendNotification(text:string):Promise<void>{awaitemailSender.send(text);}asyncsendNewsletter():Promise<void>{// ...}}

classUserService{constructor(privatereadonlydb:Database){}asyncgetUser(id:number):Promise<User>{returnawaitthis.db.users.findOne({ id});}asyncgetTransactions(userId:number):Promise<Transaction[]>{returnawaitthis.db.transactions.find({ userId});}}classUserNotifier{constructor(privatereadonlyemailSender:EmailSender){}asyncsendGreeting():Promise<void>{awaitthis.emailSender.send('Welcome!');}asyncsendNotification(text:string):Promise<void>{awaitthis.emailSender.send(text);}asyncsendNewsletter():Promise<void>{// ...}}

Es más preferible la composición que la herencia

classEmployee{constructor(privatereadonlyname:string,privatereadonlyemail:string){}// ...}// Malo porque los Empleados "tienen" datos fiscales. EmployeeTaxData no es un tipo de EmpleadoclassEmployeeTaxDataextendsEmployee{constructor(name:string,email:string,privatereadonlyssn:string,privatereadonlysalary:number,){super(name,email);}// ...}

classEmployee{privatetaxData:EmployeeTaxData;constructor(privatereadonlyname:string,privatereadonlyemail:string){}setTaxData(ssn:string,salary:number):Employee{this.taxData=newEmployeeTaxData(ssn,salary);returnthis;}// ...}classEmployeeTaxData{constructor(publicreadonlyssn:string,publicreadonlysalary:number){}// ...}

Usa el método de encadenamiento

classQueryBuilder{privatecollection:string;privatepageNumber:number=1;privateitemsPerPage:number=100;privateorderByFields:string[]=[];from(collection:string):void{this.collection=collection;}page(number:number,itemsPerPage:number=100):void{this.pageNumber=number;this.itemsPerPage=itemsPerPage;}orderBy(...fields:string[]):void{this.orderByFields=fields;}build():Query{// ...}}// ...constqueryBuilder=newQueryBuilder();queryBuilder.from('users');queryBuilder.page(1,100);queryBuilder.orderBy('firstName','lastName');constquery=queryBuilder.build();

classQueryBuilder{privatecollection:string;privatepageNumber:number=1;privateitemsPerPage:number=100;privateorderByFields:string[]=[];from(collection:string): this{this.collection=collection;returnthis;}page(number:number,itemsPerPage:number=100): this{this.pageNumber=number;this.itemsPerPage=itemsPerPage;returnthis;}orderBy(...fields:string[]): this{this.orderByFields=fields;returnthis;}build():Query{// ...}}// ...constquery=newQueryBuilder().from('users').page(1,100).orderBy('firstName','lastName').build();

Principios SOLID

Principio de responsabilidad único (Single Responsibility Principle (SRP))

classUserSettings{constructor(privatereadonlyuser:User){}changeSettings(settings:UserSettings){if(this.verifyCredentials()){// ...}}verifyCredentials(){// ...}}

classUserAuth{constructor(privatereadonlyuser:User){}verifyCredentials(){// ...}}classUserSettings{privatereadonlyauth:UserAuth;constructor(privatereadonlyuser:User){this.auth=newUserAuth(user);}changeSettings(settings:UserSettings){if(this.auth.verifyCredentials()){// ...}}}

Principio abierto/cerrado (Open/Closed Principle (OCP))

classAjaxAdapterextendsAdapter{constructor(){super();}// ...}classNodeAdapterextendsAdapter{constructor(){super();}// ...}classHttpRequester{constructor(privatereadonlyadapter:Adapter){}asyncfetch<T>(url:string):Promise<T>{if(this.adapterinstanceofAjaxAdapter){constresponse=awaitmakeAjaxCall<T>(url);// transforma la respuesta y la retorna}elseif(this.adapterinstanceofNodeAdapter){constresponse=awaitmakeHttpCall<T>(url);// transforma la respuesta y la retorna}}}functionmakeAjaxCall<T>(url:string):Promise<T>{// request and return promise}functionmakeHttpCall<T>(url:string):Promise<T>{// request and return promise}

abstractclassAdapter{abstractasyncrequest<T>(url:string):Promise<T>;// codigo compartido a las subclases...}classAjaxAdapterextendsAdapter{constructor(){super();}asyncrequest<T>(url:string):Promise<T>{// solicita y retorna la promesa}// ...}classNodeAdapterextendsAdapter{constructor(){super();}asyncrequest<T>(url:string):Promise<T>{// solicita y retorna la promesa}// ...}classHttpRequester{constructor(privatereadonlyadapter:Adapter){}asyncfetch<T>(url:string):Promise<T>{constresponse=awaitthis.adapter.request<T>(url);// transforma la respuesta y la retorna}}

Principio de sustitución Liskov (Liskov Substitution Principle (LSP))

classRectangle{constructor(protectedwidth:number=0,protectedheight:number=0){}setColor(color:string): this{// ...}render(area:number){// ...}setWidth(width:number): this{this.width=width;returnthis;}setHeight(height:number): this{this.height=height;returnthis;}getArea():number{returnthis.width*this.height;}}classSquareextendsRectangle{setWidth(width:number): this{this.width=width;this.height=width;returnthis;}setHeight(height:number): this{this.width=height;this.height=height;returnthis;}}functionrenderLargeRectangles(rectangles:Rectangle[]){rectangles.forEach((rectangle)=>{constarea=rectangle.setWidth(4).setHeight(5).getArea();// BAD: Returns 25 for Square. Should be 20.rectangle.render(area);});}constrectangles=[newRectangle(),newRectangle(),newSquare()];renderLargeRectangles(rectangles);

abstractclassShape{setColor(color:string): this{// ...}render(area:number){// ...}abstractgetArea():number;}classRectangleextendsShape{constructor(privatereadonlywidth=0,privatereadonlyheight=0){super();}getArea():number{returnthis.width*this.height;}}classSquareextendsShape{constructor(privatereadonlylength:number){super();}getArea():number{returnthis.length*this.length;}}functionrenderLargeShapes(shapes:Shape[]){shapes.forEach((shape)=>{constarea=shape.getArea();shape.render(area);});}constshapes=[newRectangle(4,5),newRectangle(4,5),newSquare(5)];renderLargeShapes(shapes);

Principio de segregación de interfaz (Interface Segregation Principle (ISP))

interfaceSmartPrinter{print();fax();scan();}classAllInOnePrinterimplementsSmartPrinter{print(){// ...}fax(){// ...}scan(){// ...}}classEconomicPrinterimplementsSmartPrinter{print(){// ...}fax(){thrownewError('Fax not supported.');}scan(){thrownewError('Scan not supported.');}}

interfacePrinter{print();}interfaceFax{fax();}interfaceScanner{scan();}classAllInOnePrinterimplementsPrinter,Fax,Scanner{print(){// ...}fax(){// ...}scan(){// ...}}classEconomicPrinterimplementsPrinter{print(){// ...}}

Principio de inversión dependiente (Dependency Inversion Principle (DIP))

import{readFileasreadFileCb}from'fs';import{promisify}from'util';constreadFile=promisify(readFileCb);typeReportData={// ..};classXmlFormatter{parse<T>(content:string):T{// Convierte una cadena XML a un objeto de tipo T}}classReportReader{// MAL: Hemos creado una dependencia en una implementación de petición específica.// Deberíamos hacer que ReportReader dependa de un método parse: `parse`.privatereadonlyformatter=newXmlFormatter();asyncread(path:string):Promise<ReportData>{consttext=awaitreadFile(path,'UTF8');returnthis.formatter.parse<ReportData>(text);}}// ...constreader=newReportReader();constreport=awaitreader.read('report.xml');

import{readFileasreadFileCb}from'fs';import{promisify}from'util';constreadFile=promisify(readFileCb);typeReportData={// ..};interfaceFormatter{parse<T>(content:string):T;}classXmlFormatterimplementsFormatter{parse<T>(content:string):T{// Convierte una cadena XML a un objeto de tipo T}}classJsonFormatterimplementsFormatter{parse<T>(content:string):T{// Convierte una cadena XML a un objeto de tipo T}}classReportReader{constructor(privatereadonlyformatter:Formatter){}asyncread(path:string):Promise<ReportData>{consttext=awaitreadFile(path,'UTF8');returnthis.formatter.parse<ReportData>(text);}}// ...constreader=newReportReader(newXmlFormatter());constreport=awaitreader.read('report.xml');// or if we had to read a json reportconstreader=newReportReader(newJsonFormatter());constreport=awaitreader.read('report.json');

Pruebas

Las tres leyes del TDD

Reglas F.I.R.S.T. (R.I.R.A.O en español)

Un solo concepto por prueba

import{assert}from'chai';describe('AwesomeDate',()=>{it('handles date boundaries',()=>{letdate:AwesomeDate;date=newAwesomeDate('1/1/2015');assert.equal('1/31/2015',date.addDays(30));date=newAwesomeDate('2/1/2016');assert.equal('2/29/2016',date.addDays(28));date=newAwesomeDate('2/1/2015');assert.equal('3/1/2015',date.addDays(28));});});

import{assert}from'chai';describe('AwesomeDate',()=>{it('handles 30-day months',()=>{constdate=newAwesomeDate('1/1/2015');assert.equal('1/31/2015',date.addDays(30));});it('handles leap year',()=>{constdate=newAwesomeDate('2/1/2016');assert.equal('2/29/2016',date.addDays(28));});it('handles non-leap year',()=>{constdate=newAwesomeDate('2/1/2015');assert.equal('3/1/2015',date.addDays(28));});});

El nombre de la prueba debe revelar cual es su intención

describe('Calendar',()=>{it('2/29/2020',()=>{// ...});it('throws',()=>{// ...});});

describe('Calendar',()=>{it('should handle leap year',()=>{// ...});it('should throw when format is invalid',()=>{// ...});});

Concurrencia

Son preferibles las promesas a las "callbacks"

import{get}from'request';import{writeFile}from'fs';functiondownloadPage(url:string,saveTo:string,callback:(error:Error,content?:string)=>void,){get(url,(error,response)=>{if(error){callback(error);}else{writeFile(saveTo,response.body,(error)=>{if(error){callback(error);}else{callback(null,response.body);}});}});}downloadPage('https://en.wikipedia.org/wiki/Robert_Cecil_Martin','article.html',(error,content)=>{if(error){console.error(error);}else{console.log(content);}},);

import{get}from'request';import{writeFile}from'fs';import{promisify}from'util';constwrite=promisify(writeFile);functiondownloadPage(url:string,saveTo:string):Promise<string>{returnget(url).then((response)=>write(saveTo,response));}downloadPage('https://en.wikipedia.org/wiki/Robert_Cecil_Martin','article.html',).then((content)=>console.log(content)).catch((error)=>console.error(error));

Async/Await son aún más limpios que las promesas

import{get}from'request';import{writeFile}from'fs';import{promisify}from'util';constwrite=util.promisify(writeFile);functiondownloadPage(url:string,saveTo:string):Promise<string>{returnget(url).then((response)=>write(saveTo,response));}downloadPage('https://en.wikipedia.org/wiki/Robert_Cecil_Martin','article.html',).then((content)=>console.log(content)).catch((error)=>console.error(error));

import{get}from'request';import{writeFile}from'fs';import{promisify}from'util';constwrite=promisify(writeFile);asyncfunctiondownloadPage(url:string):Promise<string>{constresponse=awaitget(url);returnresponse;}// somewhere in an async functiontry{constcontent=awaitdownloadPage('https://en.wikipedia.org/wiki/Robert_Cecil_Martin',);awaitwrite('article.html',content);console.log(content);}catch(error){console.error(error);}

Manejo de errores

Siempre utiliza Error para el lanzamiento o el rechazamiento

functioncalculateTotal(items:Item[]):number{throw'Not implemented.';}functionget():Promise<Item[]>{returnPromise.reject('Not implemented.');}

functioncalculateTotal(items:Item[]):number{thrownewError('Not implemented.');}functionget():Promise<Item[]>{returnPromise.reject(newError('Not implemented.'));}// o equivalente a:asyncfunctionget():Promise<Item[]>{thrownewError('Not implemented.');}

typeResult<R>={isError:false;value:R};typeFailure<E>={isError:true;error:E};typeFailable<R,E>=Result<R>|Failure<E>;functioncalculateTotal(items:Item[]):Failable<number,'empty'>{if(items.length===0){return{isError:true,error:'empty'};}// ...return{isError:false,value:42};}

No ignores errores avistados

try{functionThatMightThrow();}catch(error){console.log(error);}// o peor auntry{functionThatMightThrow();}catch(error){// ignorar error}

import{logger}from'./logging';try{functionThatMightThrow();}catch(error){logger.log(error);}

No ignores promesas rechazadas

getUser().then((user:User)=>{returnsendEmail(user.email,'Welcome!');}).catch((error)=>{console.log(error);});

import{logger}from'./logging';getUser().then((user:User)=>{returnsendEmail(user.email,'Welcome!');}).catch((error)=>{logger.log(error);});// o usa la sintaxis de async/await:try{constuser=awaitgetUser();awaitsendEmail(user.email,'Welcome!');}catch(error){logger.log(error);}

Formato

Migrando de TSLint a ESLint

Utiliza capitalización consistente

constDAYS_IN_WEEK=7;constdaysInMonth=30;constsongs=['Back In Black','Stairway to Heaven','Hey Jude'];constArtists=['ACDC','Led Zeppelin','The Beatles'];functioneraseDatabase(){}functionrestore_database(){}typeanimal={/* ... */};typeContainer={/* ... */};

constDAYS_IN_WEEK=7;constDAYS_IN_MONTH=30;constSONGS=['Back In Black','Stairway to Heaven','Hey Jude'];constARTISTS=['ACDC','Led Zeppelin','The Beatles'];constdiscography=getArtistDiscography('ACDC');constbeatlesSongs=SONGS.filter((song)=>isBeatlesSong(song));functioneraseDatabase(){}functionrestoreDatabase(){}typeAnimal={/* ... */};typeContainer={/* ... */};

Las funciones que llaman y las que son llamadas deben estar cerca unas de la otras

classPerformanceReview{constructor(privatereadonlyemployee:Employee){}privatelookupPeers(){returndb.lookup(this.employee.id,'peers');}privatelookupManager(){returndb.lookup(this.employee,'manager');}privategetPeerReviews(){constpeers=this.lookupPeers();// ...}review(){this.getPeerReviews();this.getManagerReview();this.getSelfReview();// ...}privategetManagerReview(){constmanager=this.lookupManager();}privategetSelfReview(){// ...}}constreview=newPerformanceReview(employee);review.review();

classPerformanceReview{constructor(privatereadonlyemployee:Employee){}review(){this.getPeerReviews();this.getManagerReview();this.getSelfReview();// ...}privategetPeerReviews(){constpeers=this.lookupPeers();// ...}privatelookupPeers(){returndb.lookup(this.employee.id,'peers');}privategetManagerReview(){constmanager=this.lookupManager();}privatelookupManager(){returndb.lookup(this.employee,'manager');}privategetSelfReview(){// ...}}constreview=newPerformanceReview(employee);review.review();