230530_TIL(TypeScript 기초 (1))

🌱오늘 한 것

• TypeScript의 기초에 대해 배웠다.
  • 환경 구성방법
  • TypeScript란?
  • TypeScript의 타입
  • TypeScript의 함수
  • TypeScript의 연산자 활용 타입

🌱기억해야할 것

• 타입스크립트의 등장 배경과 필요성을 자바스크립트의 한계와 엮어서 기억하자.

  • JavaScript로 웹 애플리케이션의 상호작용이 증가하면서, 웹 애플리케이션이 필요로 하는 JavaScript 코드의 양이 폭발적으로 늘어나게 되었고, 타입의 명시성이 부족하다는 단점이 드러나게 된다.
    예를들어, 매개변수로 x와 y를 받아서 x+y를 반환하는 함수가 있다고 했을때, 자바스크립트는 x=5 와 y= "1"을 받게 되면 6이 아닌 51을 출력한다. 이렇게 타입의 명시성이 부족할 경우, 예상치 못한 결과를 초래하게 되고 이 문제점을 해결하기 위해 Typescript가 등장하게 된 것이다.
    타입을 명시함으로써 코드의 의도 또한 명확해지기 때문에 다른 개발자가 코드를 이해하고 수정하기 쉬워지며, 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성 또한 높아진다.

• 배열 타입 작성 법: string[] 혹은, Array<string>

• 객체 리터럴은 명시한 프로퍼티만 지정할 수 있다. 추가 작성할 경우 에러발생.

• any와 unknown은 되도록이면 사용하지 않는 것이 좋다.

• 타입 추론 기능을 활용하지 않는다고 가정했을 때, 리턴 값이 없는 함수는 꼭 : void 작성해 주자!

• TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.

  • 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있다. (JS의 default parameter같은!)

  • 혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결가능

• 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용

• any 타입을 사용하면 타입을 추론할 수 없어, 자동완성 기능을 사용하기가 어렵다. 그러니까 되도록이면 유니온 타입 쓰자.

• in 연산자는 객체의 프로퍼티 이름과 함께 사용되며, 해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다. 이는 타입 가드 작성 시 사용된다.

🌱더 알아볼 것

• tsconfig.json 설정 파일의 세부 내용

프로젝트 루트 디렉토리에 작성한 tsconfig.json 설정 파일의 세부 내용은 아래와 같다.

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있다.
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

🌱한 줄 감상

드디어 처음 배워 본 타입 스크립트...! 아직 기초를 배우는 중이라 크게 어렵지는 않은데... 막상 잘 활용할 수 있을 정도로 익히려면 어색하더라도 계속 많이 쓰는 버릇을 들여야 할 거 같다...!