TypeScript를 쓰는 이유 & 필수 문법

출처: https://youtu.be/xkpcNolC270
코딩애플 - 타입스크립트 쓰는 이유 & 필수 문법 10분 정리

TypeScript란?

JavaScript 문법을 그대로 이용하면서, 타입 부분을 사용할 수 있는 JavaScript 업그레이드 버전 언어.
JavaScript는 Dynamic Typing이 가능해서 자유도가 높은데, 큰 프로젝트일수록 이와 같은 자유도는 에러를 발생시킬 가능성이 커진다. 이 때 TypeScript는 타입을 엄격히 검사해서 타입이 맞지 않으면 오류를 출력한다. 또한 JavaScript보다 에러 원인을 구체적으로 알려주고 때론 오타를 알려주기도 한다.

TypeScript 설치

1. nodejs 설치 (최신버전으로 설치하지 않으면 에러가 남)
2. 터미널에 npm install -g typescript 입력
3. 에디터로 프로젝트 폴더를 열고 ts 확장자 파일 생성
4. tsconfig.json 생성 후 아래 내용 작성.
   ts 파일에서 js 파일로 컴파일 시 옵션 설정이 가능하다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
  }
}

5. ts 확장자 파일은 브라우저가 읽지 못하기 때문에 js 파일로 변환해야 한다.
   프로젝트 경로에 터미널을 열고 tsc -w 명령어 입력.
   TypeScript 파일 저장할 때마다 자동으로 JavaScript 파일로 컴파일해준다.

TypeScript 필수 문법

기본 문법

변수 명 옆에 :type을 작성해준다.
type에는 string number boolean null undefined bigint [] {} 등이 들어갈 수 있다.

• string 타입

let newName :string = 'kim';

• array 타입
  [] 앞에 타입을 지정해줘야 한다.

let newName :string[] = ['kim', 'park'];
let newName :number[] = [1, 2];

• object 타입

let newName :{ name : string } = { name, 'kim'};

속성이 옵션값일 때는 속성 뒤어 ?를 붙여준다.

let newName :{ name? : string } = { name, 'kim'};

다양한 타입 (Union type)

| (or) 연산자를 사용한다.

let newName :string | number = 'kim';

타입을 변수에 담기

타입 변수의 첫 글자는 다른 변수와 구분하기 위해 대문자로 작성한다.

type Name = string | number;

let newName :Name = 'kim';
let newName :Name = 123;

함수에 타입 지정

parameter와 return 값의 타입을 지정할 수 있다.
parameter의 값은 (x :number)와 같이 지정해주고
return 값은 parameter 값 뒤에 (x :number) :number 와 같이 지정해준다.

function func(x :number) :number {
  return x * 2
}

array에 쓸 수 있는 tuple 타입

type Member = [number, boolean]; // 첫 번째 자료는 number, 두 번째 자료는 boolean 값이어야 함
let john :Member = [123, true];

object에 타입지정 해야 할 속성이 많을 때

type Member = {
  [key :string] : string, // 글자로 된 모든 object 속성의 타입은 string
}
let john :Member = { name: 'kim', age: '20' }

class 타입 지정

class User {
  name :string;
  constructor(name :string) {
    this.name = name;
  }
}