En tant qu'ingénieur logiciel, vous avez entendu ou expérimenté le concept d'odeur de code. Une odeur de code est toute caractéristique du code source d'un programme qui peut indiquer un problème plus profond.

En termes simples, les odeurs de code ne sont généralement pas des bogues, elles ne sont pas techniquement incorrectes. Mais ils indiquent des faiblesses dans la conception qui peuvent ralentir le développement ou augmenter le risque de bugs. Notre objectif est d'écrire des logiciels lisibles, réutilisables et refactorisables.

Dans cet article, je vais parler de 7 mauvaises odeurs de code dans Typescript.

1. Utilisez des noms consultables

Nous lisons toujours plus de code que nous n'en écrivons. Il est important que le code que nous écrivons soit lisible et consultable.

Mauvaise pratique :

// What is 36000000 for?
setTimeout(restart, 36000000);

// Declare them as capitalized named constants.
const MILLISECONDS_PER_HOUR = 60 * 60 * 1000; // 36000000

setTimeout(restart, MILLISECONDS_PER_HOUR);

Si votre nom de classe/type/objet vous dit quelque chose, ne le répétez pas dans votre nom de variable.

Mauvaise pratique :

type User = {
  userName: string;
  userLastName: string;
  userAge: number;
}

function print(user: User): void {
  console.log(`${user.userName} ${user.userLastName} (${user.userAge})`);
}

type User = {
  name: string;
  lastName: string;
  age: number;
}

function print(user: User): void {
  console.log(`${user.name} ${user.lastName} (${user.age})`);
}

Si nos fonctions ont plus de deux arguments, elles essaient d'en faire trop. Un ou deux arguments sont idéaux et faciles à tester, et trois doivent être évités si possible.

Mauvaise pratique :

type UserStatus = 'online' | 'offline';
function createUser(name: string, lastName: string, age: number, status: UserStatus) {
  // ...
}

createUser('Gapur', 'Kassym', 29, 'online');

type UserStatus = 'online' | 'offline';
type User = { name: string, lastName: string, age: number, status: UserStatus };

function createUser(user: User) {
  // ...
}

createUser({
  name: 'Gapur',
  lastName: 'Kassym',
  age: 29,
  status: 'online'
});

Il s'agit d'(ab)utiliser l'évaluation des courts-circuits. Mais il est difficile de déboguer et, dans de nombreux cas, difficile de trouver ce qui le fait réellement :

myVariable && myFunction();

if (myVariable) {
    myFunction()
}

const renderHeader = () => {
  return (
    <div>
      <span>User:</span>
      {user.name && user.lastName && renderUserInfo()}
    </div>
  );
}

const renderUserInfo = () => {
  return <span>{`${user.name} ${user.lastName}`}</span>;
};

const renderHeader = () => {
  return (
    <div>
      <span>User:</span>
      {renderUserInfo()}
    </div>
  );
}

const renderUserInfo = () => {
  if (user.name && user.lastName) {
    return <span>{`${user.name} ${user.lastName}`}</span>;
  }
  return null;
};

Mauvaise pratique :

type User = {
  name: string | undefined,
  lastName: string | undefined,
  age: number | undefined,
};

function createUser(user: User) {
  user.name = user.name || 'User';
  user.lastName = user.lastName || '';
  user.age = user.age || 18;
  // ...
}

createUser({ name: 'Gapur' });

type User = {
  name: string,
  lastName: string,
  age: number,
};

function createUser(user: User) {
  const user = {
    name: 'User',
    lastName: '',
    age: 18,
    ...user,
  };
  // ...
}

createUser({ name: 'Gapur' });

Le but est d'éviter les erreurs courantes comme le partage d'état entre des objets sans aucune structure, en utilisant des types de données mutables qui peuvent être écrits par n'importe qui.

Mauvaise pratique :

// Global variable referenced by following function.
let name = 'Robert C. Martin';

function toBase64() {
  name = btoa(name);
}

toBase64();
// If we had another function that used this name, now it'd be a Base64 value

console.log(name); // expected to print 'Robert C. Martin' but instead 'Um9iZXJ0IEMuIE1hcnRpbg=='

const name = 'Robert C. Martin';

function toBase64(text: string): string {
  return btoa(text);
}

const encodedName = toBase64(name);
console.log(name);

Mauvaise pratique :

type UserStatus = 'online' | 'offline';

function isUserNotOnline(status: UserStatus): boolean {
  // ...
}

if (isUserNotOnline(status)) {
  // ...
}

type UserStatus = 'online' | 'offline';

function isUserOnline(status: UserStatus): boolean {
  // ...
}

if (!isUserOnline(status)) {
  // ...
}

Merci d'avoir lu, j'espère que vous avez trouvé cet article utile. Bon codage !

Ressources