Google JavaScript Style Guide: Takeaways for TypeScript Developers

  • Angular uses TypeScript, not JavaScript
  • Angular already has a style guide
  • TypeScript is transpiled into perfect JavaScript

Formatting

if (person.type === ‘Jedi’) { 
person.name += ‘Jedi Master’;
}
// This is the only exception: if (person == null) return; NOT:
if (person.type === ‘Jedi’) person.name += ‘Jedi Master’;
OR:
if (person.type === ‘Jedi’)
person.name += ‘Jedi Master’;
try { 
this.doSomething();
} catch(err) {
this.handleError(err);
}
NOT:
try {
this.doSomething();
}
catch(err) {
this.handleError(err);
}
  1. Between consecutive methods in a class or object literal
helloWorld( 
argumentNumber1,
argumentNumber2,
argumentNumber3,
argumentNumber4)
{ let x = 1;
}
function helloWorld() { 
const x = 1;
const y = 2;
}
NOT:
function helloWorld() {
const x = 1, y = 2;
}
const titleArray = [ 
‘Jedi’,
‘Sith’,
];
OR:
const obj = {
title,
name,
};
NOT:
const titleArray = [
‘Jedi’,
‘Sith’
];
  • For those wondering why this is done, Google gives no guidance but it really is for source control changes — you only want one line shown as changed instead of two (if you have to add a comma).
  • To be honest, I don’t like the looks of it coming from a C# background where it is not valid to add a trailing comma. But in JavaScript, this is valid.
const [a, b, c, …rest] = [5, 10, 15, 20, 25, 30, 35, 40];console.log(`a = ${a}, b = ${b}, c = ${c}, rest = ${rest}`);
  • This outputs: “a = 5, b = 10, c = 15, rest = 20,25,30,35,40”
const array1 = [‘Hello’, ‘World’]; 
const array2 = [‘JavaScript’, ‘Style’, ‘Guide’];
const spreadArray1 = […array1];
const spreadArrayBoth = […array1, …array2];
console.log(`spreadArray1: ${spreadArray1} — spreadArrayBoth: ${spreadArrayBoth}`);
  • This outputs: spreadArray1: Hello,World — spreadArrayBoth: Hello,World,JavaScript,Style,Guide
  • For this one, I didn’t realize it was best to use the spread operator to concatenate two arrays
const obj = { 
hello: ‘blah’,
world: ‘yep’,
};
const obj = {
hello: ‘blah’,
‘world’: ‘nope’,
};
const foo = 1; 
const bar = 2;
const obj = {
foo,
bar,
method() { return this.foo + this.bar; },
};
assertEquals(3, obj.method());
helloWorld = () => { 
console.log(this.name);
};
  • Always throw Error objects or subclasses, not string literals, etc.
  • Always use ‘new’ when constructing an Error
  • Use custom exceptions to convey more info
  • Rarely use empty catch blocks but if you do, add a comment as to why

Naming

  • Only ASCII letters and digits (of course Angular devs use $ for observables and it is noted as an exception)
  • Use descriptive names, not worrying about length
  • Don’t abbreviate unless it is well known like ‘num’
  • Don’t use Hungarian notation
  • Use lowerCamelCase
  • Private method names end with a trailing underscore
  • Use verb or verb phrases like doSomething or run
  • Name of enum in UpperCamelCase
  • Should be singular nouns
  • Items within the enums use CONSTANT_CASE
  • Use all upper case letters
  • Separate words with underscore
  • Nouns or noun phrases
  1. Convert the phrase to plain ASCII and remove any apostrophes. For example, Müller’s algorithm might become Muellers algorithm.
  2. Divide this result into words, splitting on spaces and any remaining punctuation (typically hyphens).
  • Recommended: if any word already has a conventional camel case appearance in common usage, split this into its constituent parts (e.g., AdWords becomes ad words). Note that a word such as iOS is not really in camel case per se; it defies any convention, so this recommendation does not apply.
  • … each word, to yield upper camel case, or
  • … each word except the first, to yield lower camel case

Conclusion

--

--

--

A leading software development consulting firm with a unique blend of consulting, training, and mentoring.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript in Leetcode 01–03 | Coding Interview Quesitons

make a white-black grid with css

white-black grid

React Hooks from npm packags

Arduino physical interface & Final project proposal

How We Built: the VIP Support Custom Page

Migrate Travis CI to GitHub Actions for Node.js

GitHub Actions Pull Request “All checks have passed”

6 Little Secrets of JavaScript To Help You Shine at Job Interviews

Battery handle small w/halogen lamp for F/O

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Intertech, Inc.

Intertech, Inc.

A leading software development consulting firm with a unique blend of consulting, training, and mentoring.

More from Medium

The Pros and Cons of Angular vs React JS

Generate TypeScript Declaration Files for JavaScript Files

The JavaScript logo with an arrow pointing towards the TypeScript logo

Framework wars: React vs Angular

JS-13— JavaScript for Programmers, Chapter9, Part3