TS_JS.md

TypeScript & JavaScript

Declaration, Initialization & Assignment

Function

• Use the return type void for callbacks whose value will be ignored

Reason: prevents accidentally using the return value in an unchecked way

// 👎 non-compliant
function fn(x: () => any) {
  x().doOtherThing(); // runtime error
}

// 👍 preference
function fn(x: () => void) {
  x().doOtherThing(); // compile error
}

• Define a type alias to encapsulate callback type [TS]

// 👉 given
var numCallback = (result: number) : void => alert(result.toString());

// 👎 non-compliant
class User {
  save(callback: (n: number) => void) : void {
    callback(42);
  }
}

// 👍 preference
type NumberCallback = (n: number) => void;

class User {
  save(callback: NumberCallback) : void {
    callback(42);
  }
}

Expressions

• Equality operator == => Strict equality operator === [TS]

Type

• Object property value shorthand [ES6]

// 👉 given
let name = 'User 1';
let age = 18;

// 👎 longhand
var user = {
  name: name,
  age: age,
}

// 👍 shorthand
let user = {name, age}

• Enum => Union types [Reference) [TS]]

String

• String to number [ES]

// 👎 longhand
const num1 = parseInt("100");
const num2 =  parseFloat("100.01");

// 👍 shorthand
const num1 = +"100";
const num2 =  +"100.01";

Number

• Exponent power

// 👎 longhand
const power = Math.pow(4, 3);

// 👍 shorthand
const power = 4**3;

• Floor rounding

// 👎 longhand
const floor = Math.floor(6.8);

// 👍 shorthand
const floor = ~~6.8;

• Decimal base exponents

// 👎 longhand
10000000

// 👍 shorthand
1e7

Collection

• Spread operator ... [ES6]

To join arrays:

// 👎 longhand
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// 👍 shorthand
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];

To clone array:

// 👎 longhand
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

// 👍 shorthand
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

Module

• Barrel

// 👉 given
// 📄 user/WindowsUser.ts
export class WindowsUser {}

// 📄 user/LinuxUser.ts
export class LinuxUser {}

// 📄 user/AndroidUser.ts
export class AndroidUser {}

Import w/o a barrel:

// 👎 non-compliant
// 📄 app.ts
import { WindowsUser } from 'user/WindowsUser';
import { LinuxUser } from 'user/LinuxUser';
import { AndroidUser } from 'user/AndroidUser';

Import w/ a barrel:

// 👍 preference
// 📄 user/index.ts
export * from './WindowsUser';
export * from './LinuxUser';
export * from './AndroidUser';

// 📄 app.ts
import { WindowsUser, LinuxUser, AndroidUser } from 'user'; // user/index.ts is implied

• Default export => simple export

Pro: import name will update if rename the export entity

// 👎 non-compliant
export default User
import User from './user'

// 👍 preference
export class User {}
import { User } from './user'