clean-code-typescript

Table of Contents

Introduction

Variables

変数

Use meaningful variable names

意味のある変数名を使う

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;}

Use pronounceable variable names

発音可能な変数名を使う

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

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

Use the same vocabulary for the same type of variable

同じ型の変数には同じ単語を割り当てる。

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

functiongetUser():User;

Use searchable names

検索可能な名前を使う

// What the heck is 86400000 for?// 一体何が86400000なのか？setTimeout(restart,86400000);

// Declare them as capitalized named constants.// 定数の名前は大文字で宣言してください。constMILLISECONDS_IN_A_DAY=24*60*60*1000;setTimeout(restart,MILLISECONDS_IN_A_DAY);

Use explanatory variables

説明変数を使う

declareconstusers:Map<string,User>;for(constkeyValueofusers){// iterate through users map// user map を反復処理する}

declareconstusers:Map<string,User>;for(const[id,user]ofusers){// iterate through users map// user map を反復処理する}

Avoid Mental Mapping

メンタルマップを避ける

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

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

Don't add unneeded context

不要な文脈を追加しない

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})`);}

Use default arguments instead of short circuiting or conditionals

短絡評価や条件式の代わりにデフォルト引数を使用する

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

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

Use enum to document the intent

目的を明文化するために列挙型(enum)を使用する

constGENRE={ROMANTIC:'romantic',DRAMA:'drama',COMEDY:'comedy',DOCUMENTARY:'documentary',}projector.configureFilm(GENRE.COMEDY);classProjector{// delactation of Projector// 映写機を楽しむconfigureFilm(genre){switch(genre){caseGENRE.ROMANTIC:// some logic to be executed// 実行されるいくつかのロジック}}}

enumGENRE{ROMANTIC,DRAMA,COMEDY,DOCUMENTARY,}projector.configureFilm(GENRE.COMEDY);classProjector{// delactation of Projector// 映写機を楽しむconfigureFilm(genre){switch(genre){caseGENRE.ROMANTIC:// some logic to be executed// 実行されるいくつかのロジック}}}

Functions

関数

Function arguments (2 or fewer ideally)

関数の引数 (理想は２つ以下)

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});

Functions should do one thing

関数は１つのことだけを行うべきです

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

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

Function names should say what they do

関数名は何をするべきか宣言するべきです。

functionaddToDate(date:Date,month:number):Date{// ...}constdate=newDate();// It's hard to tell from the function name what is added// 何が追加されたかを、関数名から予測することができません。addToDate(date,1);

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

Functions should only be one level of abstraction

関数は一つの抽象化に留めること。

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;}

Remove duplicate code

重複したコードは消す

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);});}

Set default objects with Object.assign or destructuring

Object.assign や 分割代入を使ってデフォルトオブジェクトを設定する

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'});

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

Don't use flags as function parameters

関数の引数にフラグは渡さない

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);}

Avoid Side Effects (part 1)

副作用を避ける（その１）

// Global variable referenced by following function.// 以下の関数で利用されるグローバル変数letname='Robert C. Martin';functiontoBase64(){name=btoa(name);}toBase64();// If we had another function that used this name, now it'd be a Base64 value// 変数 name を使用した別の関数がある場合は、その中身はBase64になります。console.log(name);// expected to print 'Robert C. Martin' but instead 'Um9iZXJ0IEMuIE1hcnRpbg=='// 'Robert C. Martin' と表示されるはずが、'Um9iZXJ0IEMuIE1hcnRpbg=='と表示されてしまう

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

Avoid Side Effects (part 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()}];};

Don't write to global functions

グローバル関数には書き込まない

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));};}

Favor functional programming over imperative programming

命令形プログラミングより関数型プログラミングを好む

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);

Encapsulate conditionals

条件をカプセル化する

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

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

Avoid negative conditionals

否定的な条件を避ける

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

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

Avoid conditionals

条件を避ける

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();}}

Avoid type checking

型チェックを避ける

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'));}

Don't over-optimize

行き過ぎた最適化を避ける

// On old browsers, each iteration with uncached `list.length` would be costly// because of `list.length` recomputation. In modern browsers, this is optimized.// 古いブラウザは、キャッシュされていない `list.length` を使った繰り返しはコストがかかるでしょう// なぜなら、呼ばれるたびに  `list.length`  が再計算されるから。 モダンブラウザは最適化されているfor(leti=0,len=list.length;i<len;i++){// ...}

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

使っていないコードは削除する

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');

Use iterators and generators

イテレーターとジェネレーターを使う

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));}// Print first 10 Fibonacci numbers.// フィボナッチ数の最初の10個をprintするprint(10);

// Generates an infinite stream of Fibonacci numbers.// The generator doesn't keep the array of all numbers.// フィボナッチ数の無限のストリームを生成します// ジェネレータは全数の配列を保持しませんfunction*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);}}// Print first 10 Fibonacci numbers.// フィボナッチ数の最初の10個をprintするprint(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));

Objects and Data Structures

オブジェクトとデータ構造

Use getters and setters

getter と setter を使う

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;}// ...}// Now `BankAccount` encapsulates the validation logic.// If one day the specifications change, and we need extra validation rule,// we would have to alter only the `setter` implementation,// leaving all dependent code unchanged.// これで `BankAccount` はバリデーション処理をカプセル化しました。// ある日仕様が変更されて、追加のバリデーションが必要になった場合にも// `setter`の実装だけを変更すればよく// すべての依存したコードを変更する必要はありません。constaccount=newBankAccount();account.balance=100;

Make objects have private/protected members

オブジェクトにprivate/protectedメンバーをもたせる

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;}}

Prefer immutability

不変性を好む

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

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

constarray:number[]=[1,3,5];array=[];// errorarray.push(100);// array will updated

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

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

constconfig={hello:'world'};config.hello='world';// value is changedconstarray=[1,3,5];array[0]=10;// value is changed// writable objects is returnedfunctionreadonlyData(value:number){return{ value};}constresult=readonlyData(100);result.value=200;// value is changed

// read-only objectconstconfig={hello:'world'}asconst;config.hello='world';// error// read-only arrayconstarray=[1,3,5]asconst;array[0]=10;// error// You can return read-only objectsfunctionreadonlyData(value:number){return{ value}asconst;}constresult=readonlyData(100);result.value=200;// error

type vs. interface

タイプ VS インタフェース

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

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

Classes

Classes should be small

クラスは小さくあるべき

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{/* ... */}}// split the responsibilities by moving the remaining methods to other classes// 他のクラスにメソッドを移動して責任を分割する// ...

High cohesion and low coupling

高凝集度と疎結合性

classUserManager{// Bad: each private variable is used by one or another group of methods.// It makes clear evidence that the class is holding more than a single responsibility.// If I need only to create the service to get the transactions for a user,// I'm still forced to pass and instance of `emailSender`.// 悪い: 各プライベート変数は、メソッドの1つまたは別のグループによって使用されます。// それは、クラスが1つ以上の責任を保持しているという明確な証拠を表しています。// ユーザーのトランザクションを取得するためだけにサービスを作成する必要がある場合は、// `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>{// ...}}

Prefer composition over inheritance

インヘリタンス(継承)よりコンポジション(合成集約)を好む

classEmployee{constructor(privatereadonlyname:string,privatereadonlyemail:string){}// ...}// Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee// よくない。なぜなら、従業員(Employee)は税情報を持っている。しかし、従業員税情報(EmployeeTaxData)は従業員ではないclassEmployeeTaxDataextendsEmployee{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){}// ...}

Use method chaining

メソッドチェーンを利用すること

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();

SOLID

Single Responsibility Principle (SRP)

単一責任の原則 (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()){// ...}}}

Open/Closed Principle (OCP)

オープン・クローズドの原則 (OCP)

classAjaxAdapterextendsAdapter{constructor(){super();}// ...}classNodeAdapterextendsAdapter{constructor(){super();}// ...}classHttpRequester{constructor(privatereadonlyadapter:Adapter){}asyncfetch<T>(url:string):Promise<T>{if(this.adapterinstanceofAjaxAdapter){constresponse=awaitmakeAjaxCall<T>(url);// transform response and return}elseif(this.adapterinstanceofNodeAdapter){constresponse=awaitmakeHttpCall<T>(url);// transform response and return}}}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>;// code shared to subclasses ...}classAjaxAdapterextendsAdapter{constructor(){super();}asyncrequest<T>(url:string):Promise<T>{// request and return promise}// ...}classNodeAdapterextendsAdapter{constructor(){super();}asyncrequest<T>(url:string):Promise<T>{// request and return promise}// ...}classHttpRequester{constructor(privatereadonlyadapter:Adapter){}asyncfetch<T>(url:string):Promise<T>{constresponse=awaitthis.adapter.request<T>(url);// transform response and return}}

Liskov Substitution Principle (LSP)

リスコフの置換原則 (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);

Interface Segregation Principle (ISP)

インタフェース分離の原則 (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(){// ...}}

Dependency Inversion Principle (DIP)

依存関係逆転の原則 (DIP)

import{readFileasreadFileCb}from'fs';import{promisify}from'util';constreadFile=promisify(readFileCb);typeReportData={// ..}classXmlFormatter{parse<T>(content:string):T{// Converts an XML string to an object T// XML文字列をTオブジェクトに変換します。}}classReportReader{// BAD: We have created a dependency on a specific request implementation.// We should just have ReportReader depend on a parse method: `parse`// 悪い：特定のリクエストに依存する実装を作りました。// ReportReaderを parseメソッドに依存させています：`parse`privatereadonlyformatter=newXmlFormatter();asyncread(path:string):Promise<ReportData>{consttext=awaitreadFile(path,'UTF8');returnthis.formatter.parse<ReportData>(text);}}// ...constreader=newReportReader();awaitreport=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{// Converts an XML string to an object T// XML文字列をTオブジェクトに変換します。}}classJsonFormatterimplementsFormatter{parse<T>(content:string):T{// Converts a JSON string to an object T// json文字列をTオブジェクトに変換します。}}classReportReader{constructor(privatereadonlyformatter:Formatter){}asyncread(path:string):Promise<ReportData>{consttext=awaitreadFile(path,'UTF8');returnthis.formatter.parse<ReportData>(text);}}// ...constreader=newReportReader(newXmlFormatter());awaitreport=awaitreader.read('report.xml');// or if we had to read a json report// JSONレポートを読む場合constreader=newReportReader(newJsonFormatter());awaitreport=awaitreader.read('report.json');

Testing

テスト

The three laws of TDD

TDD３つの法則

F.I.R.S.T. rules

F.I.R.S.T. の規則

Single concept per test

テスト毎に単純なコンセプトを持つ

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));});});

The name of the test should reveal its intention

テストの名前は何をしてるか、理解しやすくしましょう。

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

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

Concurrency

並行性

Prefer promises vs callbacks

コールバックではなく Promise を使う

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 are even cleaner than Promises

Async/Await はPromisesよりも更に綺麗です

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,saveTo:string):Promise<string>{constresponse=awaitget(url);awaitwrite(saveTo,response);returnresponse;}// somewhere in an async functiontry{constcontent=awaitdownloadPage('https://en.wikipedia.org/wiki/Robert_Cecil_Martin','article.html');console.log(content);}catch(error){console.error(error);}

Error Handling

エラー処理

Always use Error for throwing or rejecting

ThrowやRejectの時にErrorを使う

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.'));}// or equivalent to: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};}

Don't ignore caught errors

例外を握りつぶさない

try{functionThatMightThrow();}catch(error){console.log(error);}// or even worsetry{functionThatMightThrow();}catch(error){// ignore error}

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

Don't ignore rejected promises

reject された promise を無視しない

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);});// or using the async/await syntax:// もしくは async/await 構文を使うtry{constuser=awaitgetUser();awaitsendEmail(user.email,'Welcome!');}catch(error){logger.log(error);}

Formatting

フォーマット

Use consistent capitalization

一貫性を持った大文字を使用すること

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'];functioneraseDatabase(){}functionrestoreDatabase(){}typeAnimal={/* ... */}typeContainer={/* ... */}