TypeScript란 무엇이고, 왜 사용해야 하는가

kwon·2024년 2월 18일

FRONTEND STUDY

목록 보기

7/22

이전에 TypeScript에 대해서 들은 적이 있었다.
명칭에서도 알 수 있듯이 Type이 있는 JavaScript였다.
그런데, 처음 내가 TypeScript를 접했을 때 생각은 "타입에 구애받지 않고 자유롭게 코드를 작성하도록 만들어줬더니 왜 귀찮게 타입을 작성하려고 하지?" 라는 생각을 했었다.

그러나, 프로젝트를 직접 만들어보면서 코드에서 발생하는 오류 중 대부분이 타입에 대한 오류였다.

코드가 길어지면 길어질수록 어떤 변수가 어떤 타입의 값을 받아와야 정상적으로 동작하는 지에 대한 설명이 너무 부족하기 때문에 한번씩 실수가 생기는 것이다.

그래서 자바스크립트로 "타입을 명시하지 않는 코드"를 작성한다는 것은 지뢰밭을 설치하는 것과 같이 느껴졌다.

물론 자바스크립트로도 충분한 부분도 많지만, 자바스크립트의 분명한 한계점을 타입스크립트가 어느정도 커버해주는 것 같다.

타입스크립트란?

타입스크립트란 자바스크립트의 타입을 강제시키는 언어이다.

기존의 자바스크립트에서는 아래와 같이 변수에 문자열을 할당했다가 이후에 숫자열을 재할당해도 문제가 되지 않는다.

// 자바스크립트는 자료형에 연연하지 않고 할당이 가능합니다.
let hello = "hello"
hello = 12345

하지만 타입스크립트에서는 변수의 자료형을 지정해주기 때문에 위와같이 재할당이 불가능합니다.

let hello:string = "hello" 
// 재할당이 문자열만 가능합니다.
hello = "12345"

❗️ 브라우저는 HTML,CSS,Javascript만 읽을 수 있는데 타입스크립트는 어떻게 읽을까?
→ 실행시에 자바스크립트로 변경되어 실행된다.
이렇게 변경되는 작업을 컴파일 또는 트랜스파일 이라고 하고,
이렇게 변경해주는 도구를 컴파일러 또는 트랜스파일러 라고 한다.

컴파일: 하나의 언어가 다른 언어로 변경되는 작업

트랜스파일: 하나의 언어가 같은 언어의 다른 버전으로 변경되는 작업

타입스크립트를 사용하는 이유와 사용방법

자바스크립트는 타입이 엄격하지 않다.

따라서, 변수나 상수를 만들면 처음에 문자를 넣었다가, 나중에 숫자를 넣는 등 자유자재로 변환이 가능하다.

이러한 점이 개발에는 굉장히 편리해 보이지만, 큰 서비스를 여러명이 개발하는 경우에는 문제가 될 수 있다.

❗️타입스크립트를 사용하지 않아 발생한 실제사례!
어떤 서비스에서 게시물을, 한 사람당 최대 5개까지 등록 가능하다는 조건을 걸어두었습니다.
그런데 한사람이 글을 5개 이상 작성한 것을 발견했고, 이유를 찾아보니 아래와 같았습니다.
자바스크립트에서 다음과 같은 실수를 범한 것 이었습니다.
⇒ '0'(문자열) + 1 + 1 + 1 + 1 + 1
(결과: '011111')
즉 문자열과 숫자열이 더해져서 위와같은 결과가 나온 것 입니다. 우리는 여기서 알 수 있 듯, 실무에서 타입을 강제하는 것이 얼마나 중요한 일인지 알 수 있습니다.

따라서, 타입스크립트는 숫자 변수에는 숫자만 넣고, 문자 변수에는 문자만 넣도록 하여 안정성을 높여준다.

타입스크립트 파일 확장자와 실습

타입스크립트를 사용하는 파일 중 return 을 포함하고 있다면 확장자를 ts로 두면 오류가 발생한다.

return 부분이 사실 html이 아니라 JSX 즉, 자바스크립트 XML 이기때문에 그런 것이다.

따라서 단순히 javascript 만 있는 .js 파일은 typescript의 .ts로 변경하고,

javascript에서 JSX(React의 HTML)를 return 하는 컴포넌트들은 typescript의 .tsx 로 변경합니다.

타입 추론

파일의 확장자를 ts 혹은 tsx로 변경하게 되면서 기존의 자바스크립트 작성 부분이 타입스크립트 영역으로 바뀌게 된다.
따라서 변수에 타입을 먼저 입히지 않고 할당을 하게되면 타입스크립트는 할당된 값의 자료형을 타입으로 추론 하게 된다.

타입스크립트 배열, 객체 실습

/* 배열타입 */
// 문자열만 있는 배열
let aaa:string[] = ["A","B","C"]

// 배열에 문자열과 숫자열을 같이 넣어두고 싶을 때
let fff:(string | number)[] = [1,2,3,"철수","영희"]

// 모두 숫자이거나 모두 문자인 배열
let hhh: string[] | nuber[] =[ "영희","철수" ]
hhh=[1,2,3]



/* 객체타입 */
interface Ipropfile {
		name : string
		age : number 
		school : string
	}
const profile:Ipropfile = {
		name : "Kwon"
		age : 24
		school : "A초등학교"
	} 

//age의 타입이 문자열이거나 숫자열일 때
interface Ipropfile{
		name : string
		age : string | number
		school : string
	}
const profile:Ipropfile = {
		name : "Kwon"
		age : 24 or "24살"
		school : "A초등학교"
	}

❗️ 타입 스크립트에서의 또는, 그리고
→ 타입스크립트에서의 또는과 그리고는 자바스크립트와 비슷하지만 조금 다르다.
또는 : |
그리고 : &
객체에서 해당 key에 value가 있으면 보내주고 싶다할 때!
→ ?(optional chaining)를 이용해주면 된다.
? 는 ‘있으면’ 이라는 뜻 이다.

❗️props의 타입 지정은 어떻게 할까?
→ props도 객체이다. 따라서 객체에 타입을 지정해주는 것과 같이 해주면 된다.

엄격한 타입스크립트 strict

tsconfig.json 파일의 typescript 세팅에서 strict를 true로 설정하면,
props쪽에서 빨간줄이 그이는 것을 볼 수 있다.

따라서 interface로 props의 타입을 지정해주어야 한다.

props에서는 주는 입장과 받는 입장이 있습니다. 타입스크립트는 받는 입장에서 타입을 지정해주어야 한다.

❗️ 함수의 타입 지정해주기
→ 파라미터의 타입또한 지정해줘야 한다.

// props를 주는 쪽 컴포넌트
// 파라미터의 타입을 지정해주셔야 합니다.
const add = (a: number, b: number)=>{
	return a+b
	}

return(
	//컴포넌트의 JSX부분
		<Component add={add}>
	)
}


// props를 받는 쪽 컴포넌트
// 함수의 타입 지정해주기
// 리턴되는 값의 타입을 적용해주면 됨. 만일 리턴되는 값이 없다면 void
interface Iprops{
	add : (a: number,b: number)=> number
	}

const Component2 = (props : IProps)=>{
		props.add(1,2)
		return(
			//컴포넌트의 JSX부분
		)
	}

타입으로 뭘 받아오는지 잘 모를때

외부와 통신해서 받아오는 api같은 데이터는 뭘 받아오는지 잘 모를 수 있다. 그럴때는 일단 타입에 any를 주고 넘어가면 된다.

타입스크립트에서의 any는 모든 타입을 말하고, 자바스크립트의 any와 같다.

❗️주의❗️
타입스크립트를 처음 배울 때에는 api를 통해 받아오는 데이터의 타입을 직접 지정해주는 것이 어려울 수 있다. 그래서 임시로 any를 지정하고 넘어가는 것이다. 이후 타입에 대해 조금 더 공부한 뒤에는 하나하나 지정하고 넘어가는 것을 목표로 해야한다.

이벤트 핸들러 함수의 파라미터(event) 타입 지정하기

게시판 프로젝트에서 onChange함수의 파라미터 타입을 지정해 줄 때 ChangeEvent를 사용했었다.

// HTML 태그는 이벤트 핸들러 함수가 적용되는 함수가 뭔지에 따라 다르게 쓰인다.
const onChangeMyWriter = (event: ChangeEvent<HTML inputelement>)=>{
			setMywriter(event.target.value)
	}