Skip to content

Instantly share code, notes, and snippets.

@NerOcrO

NerOcrO/a_typescript.md

Last active June 22, 2024 14:08
Show Gist options
  • Save NerOcrO/206fb0d78eee2c51428ed27f94ef3946 to your computer and use it in GitHub Desktop.
Save NerOcrO/206fb0d78eee2c51428ed27f94ef3946 to your computer and use it in GitHub Desktop.
Download ZIP
javascript js typescript
Raw
a_typescript.md

Performance

  • transpileonly : permet de ne pas effectuer le type checking
    • TS_NODE_TRANSPILE_ONLY=true node --loader ts-node/esm ...
    • ts-node --transpileOnly ...
  • swc : permet d'utiliser le transpiler SWC à la place de node
    • ts-node --swc ... (plus besoin de transpileOnly)

Transpilation

  • La compilation consiste à transformer un code source écrit avec un langage de programmation, en un programme exécutable ;
  • La transpilation permet de traduire le code source d’un programme écrit avec un premier langage, en un programme équivalent écrit dans un second langage ayant le même niveau d’abstraction ;
  • On peut choisir la version de JavaScript à avoir en sortie via tsconfig.json
  • Quelques options pour la transpilation.

Generic type

function identity<Type>(arg: Type): Type {
  return arg;
}

Readonly

type point = {
  readonly x: number
  readonly y: number
  readonly troisD: [
    {
      readonly e: number
    }
  ]
}
// équivaut à
export type point = Readonly<{
  x: number
  y: number
  troisD: ReadonlyArray<{
    e: number
  }>
}>

const exempleDePoint: point = {
  x: 2,
  y: 3
}
// Ce qui rend impossible d'affecter un nouvel attribut (même principe qu'un attribut privé dans une classe) 
exempleDePoint.z = 4 // Erreur typescript

Enum vs type union

type MyUnion = 'red' | 'green' | 'refacor'
const myUnion: MyUnion = 'wait' // erreur

enum MyEnum = {
  Zero = 0,
  One = 1,
}
const myEnum: MyEnum = 2 // pas d'erreur
  • Par contre, pour affecter une constante et éviter d'avoir plusieurs fois la même valeur dans le code, c'est mieux d'avoir une enum
Raw
javascript.md

Définitions

DefinitelyTyped

  • @types/enzyme pas besoin
  • @types/jest pas besoin
  • @types/prop-types ne m'apporte rien alors que j'en ai besoin
  • @types/react pas besoin
  • @types/react-dom pas besoin
  • @types/react-redux pas besoin
  • @types/react-router-dom pas besoin
  • @types/redux n'existe pas et pas besoin

Esbuild

!!

  • Cela signifie que c'est falsy : soit null, undefined, false ou 0 ;
  • Est-ce toujours vraiment le cas ? Non et j'espère que non car ça sous entend un problème de design ;
  • Si c'est le cas, il faut 4 tests ;
  • Préférer une égalité ce qui décomplexifie le code surtout pour un nouveau.
!!undefined // false
!!false // false
!!null // false
!!0 // false
!!'' // false
!!"" // false
!!`` // false
!!TOUT_LE_RESTE // true

RxJS

  • Grâce au switchMap, quand tu cliques plusieurs fois sur une validation de formulaire alors les autres appels sont "cancelled"

Pourquoi ne pas faire d'export default ?

  • Quand tu importes un export default, tu peux l'appeler comme tu veux
    • Tu ne le retrouves pas via une recherche si tu l'as appelé différemment
    • Le renommage ne fonctionne pas si tu l'as appelé différemment
  • Quand tu ajoutes une nouvelle fonction, tu dois l'enlever
  • Il y a plus de code à écrire : default et tu répètes le composant

Spread syntax

Permet d'éviter d'utiliser Object.assign().

const profile = {
  name: 'John Doe',
  age: 25
}

const job = {
  profession: 'IT Engineer'
}
const user = { ...profile, ...job }
// Résultat
{
  age: 25,
  name: 'John Doe',
  profession: 'IT Engineer',
}

Comment clarifier un très grand nombre ?

10000000 => 10_000_000

Comment tester les dimensions d'une image via une URL ?

Comment tester les dimensions d'une image via un upload ?

Implémentation

const isOfPoorQuality = async file => {
  const { height, width } = await createImageBitmap(file)
  return height < MIN_IMAGE_HEIGHT || width < MIN_IMAGE_WIDTH
}

Factory dans un fichier de test

global.createImageBitmap = () => Promise.resolve({})

const createImageFile = ({
  name = 'example.png',
  type = 'image/png',
  sizeInMB = 1,
  width = MIN_IMAGE_WIDTH,
  height = MIN_IMAGE_HEIGHT,
} = {}) => {
  const file = createFile({ name, type, sizeInMB })
  jest.spyOn(global, 'createImageBitmap').mockResolvedValue({ width, height })
  return file
}

const createFile = ({ name = 'example.json', type = 'application/json', sizeInMB = 1 } = {}) => {
  const oneMB = 1024 * 1024
  const file = new File([''], name, { type })
  Object.defineProperty(file, 'size', { value: oneMB * sizeInMB })
  return file
}

Autre solution

Typer sans faire de TypeScrit

async / await

  • Asynchrone : action qui se lance maintenant, mais qui se termine plus tard (ie: setTimeout)
  • à partir du moment où tu mets async devant une fonction alors elle retourne une promesse
  • si une fonction fait un return Promise(...) alors elle retourne une promesse
  • on ne peut pas await en dehors d'une fonction
  • Promise.all lance les promesses de manière concurrencielle donc gain de performance
const func2 = async (): Promise<string> => {
  return 'test'
}

console.log(func2()); // => Promise { 'test' }

// func2().then((text: string): string => console.log(text)); // => test
// identique à
(async (): Promise<void> => {
  console.log(await func2())
})() // => test

const func4 = <T>(): Promise<T> => {
  return new Promise((_resolve, _reject) => {})
}

console.log(func4()) // => Promise { <pending> }

const func5 = (): Promise<string> => {
  return new Promise((resolve, _reject) => {
    resolve('test')
  })
}

console.log(func5()) // => Promise { 'test' }

const func6 = async (): Promise<string> => {
  return func5().then((data) => data)
}

console.log(func6()) // => Promise { <pending> }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment