Javascript & typescript

Javascript

• javascript 33가지 concept https://github.com/yjs03057/33-js-concepts#2-%EC%9B%90%EC%8B%9C-%EC%9E%90%EB%A3%8C%ED%98%95

Typescript

• google angular에 채택
• tsc 를 통해 typescript를 target javascript 버전으로 변환
• Babel없이도 javascript 호환성 문제를 해결

Javascript 문제점

• global/function scope var 선언시 여러번 중복 선언 가능
  • let이 대안이됨 (ES6)
• settimeout(func() { console.log(i)}) 시에 i가 loop안에서 쓰이면 마지막 i를 참조하는 문제
  • IIFE를 써서 variable capturing하면 됨
• 혼란스러운 this
  • https://infoscis.github.io/2017/05/14/Understanding-javascript-function-invocation-and-this/
  • javascirpt에서 this는 호출자가 호출한 형태에 의해 결정
  • Unsugar한 최종 결과물은 call로 this를 지정
    • 함수 - fn.call(window, arg)
    • 메서드 - obj.fn.call(obj, arglist)
  • bind사용가면 this를 영구적으로 bind 가능

Typescript minor

• path.resolve
  • (a, b, c) 일때 c부터 b, a를 붙여 가면서 absolute path가 완성되면 return한다. 마지막까지 relative path이면 현재 directory를 앞에 붙인다.
• variable!: Type
  • variable이 절대 null이나 undefined가 될수 없다는 표시

Minor tip

• map으로 array 확장

  •     [...Array(50)].map((_, i) => ({
           selected: false,
           value: `Option ${i}`,
          type: 'default',
         })),
         ];
    

Record vs Dictionary

• record는 key가 known

extend('exist_pair', {
  params: ['other'],
  validate: (value, { other }: Record<string, any>) => {
    if (!Boolean(value) && Boolean(other)) {
      return false;
    }
    return true;
  },
  message: (_, values) => String(i18n.t('validations.exist_pair', values)),
});

• dictionary는 key가 unknown