2022.01.08(Sat.) <TypeScript의 기초>

똑같은 놈들입니다. 일단 한번 츄라이 츄라이

1. 문제의 발단

취업을 위해 이곳저곳 이력서를 쓰고 여기 보고 저기보고 하고 있는데 다들 'TypeScript' 이야기를 엄청 하는 것 같다. 얼마나 좋은 기술이면 이렇게들 사용하려고 할까? 나도 한번 써보자. 발버둥 쳐보자!

2. TypeScript?

• JavaScript를 이용한 프로그래밍 언어이다. 컴파일 한 후에 JavaScript 코드로 바꿔준다.
• JavaScript는 숫자나 문자간의 계산 같은 경우, 런타임에서 알아서 계산해서 올바른 답을 준다. 하지만 이러한 결과는 간단한 프로젝트의 경우 편리할 수 있지만, 크기가 크면 클수록 디버깅이 너무 어려워진다. 그래서 이런 경우, 에러 메시지를 준다.
• 심지어 위의 경우처럼 타입을 잘 못 쓴경우나, 오타까지도 잡아준다!

3. 어떻게 사용할까요?

• npm install -g typescript
• 당근 node.js 필수
• .tsconfig.json 파일을 생성해서 안에 초기 설정을 넣는다. ts 파일을 js 파일로 컴파일할 때 사용할 설정이다.

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

• ts 파일 자체는 브라우저가 올바르게 읽을 수 없다. 그래서 컴파일 해야한다. tsc -w를 터미널에 입력하면 자동으로 변환된다.

4. 간단한 문법

let name :string = 'hendrix';
name = 111;
// 위의 경우 에러 발생. name은 string 타입으로 설정 되어 있기 때문에 다른 타입은 올 수 없음

let list : string[] = ['a', 'b', 'c'];
list = ['a', 'b', 1]
// 위의 경우 에러 발생. list 안의 요소의 타입은 항상 string 이기 때문!

let name :{ name? : string } = { name: 'hendrix' };
// 위의 경우 ? 로 어떤 타입이 들어갈지 모른다! 라는 것을 표시하였기 때문에 에러는 나지 않는다.
// 마찬가지로 | 연산자나 &도 사용가능하다.

type MyType = string | number;
let hello :MyType = 'world';
// 위 처럼 type을 이용해서 타입 자체를 변수에 할당할 수 도 있다. 대문자로 선언하자.

function func(el: number) :number {
	return el + 1;
}
// 위의 함수처럼 함수의 인자의 타입과 결과물의 타입을 설정할 수 도 있다.

type SetType = [string, string, boolean]
// arr 형태로 각 요소의 순서에 따라도 타입을 설정 할 수 있다.

type ListType = {
	[ket: string] : string
}
// 글자로 된 모든 object 속성 타입은 string

5. create-react-app으로 만든 리액트 앱에 TypeScript 적용하기

• npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom
• . js 파일들을 .tsx로 바꿔준다. (JSX 문법을 이용하는 react는 tsx로 확장자를 변경하는 것이 옳다. 그냥 자바스크립트라면 .ts다)
• 이미 진행된 프로젝트라면 TypeScript에 뜨는 에러들을 문법에 맞게 고쳐준다.
• 당근 컴파일도 해준다.