Javascript vs Typescript

huni_·2022년 7월 1일

타입스크립트란?

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

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

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

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

let hello:string = "hello" 

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

레벨업!

💡 브라우저는 HTML,CSS,Javascript만 읽을 수 있는데 타입스크립트는 어떻게 읽을까요?
→ 실행시에 자바스크립트로 변경되어 실행됩니다.

이렇게 변경되는 작업을 컴파일 또는 트랜스파일 이라고 합니다.
이렇게 변경해주는 도구를 컴파일러 또는 트랜스파일러 라고 합니다.

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

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

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

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

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

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

💡 타입스크립트를 사용하지 않아 발생한 실제사례!

어떤 서비스에서 게시물을, 한 사람당 최대 5개까지 등록 가능하다는 조건을 걸어두었습니다.
그런데 한 사람이 글을 5개 이상 작성한 것을 발견했고, 이유를 찾아보니 아래와 같았습니다.

자바스크립트에서 다음과 같은 실수를 범한 것 이었습니다. ⇒ '0'(문자열) + 1 + 1 + 1 + 1 + 1 
`(결과: '011111')`
이건 아주 약과입니다!!!!!!

즉 문자열과 숫자열이 더해져서 위와 같은 결과가 나온 것 입니다. 우리는 여기서 알 수 있듯, 실무에서 타입을 강제하는 것이 얼마나 중요한 일인지 알 수 있습니다.

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

간단한 사이트이면 타입스크립트는 필요 없습니다.

하지만 스케일이 클수록 타입스크립트가 필수입니다.

타입을 지정하지 않는 경우 프로젝트가 클수록 스케일이 커집니다.

타입스크립트 사용 방법

// 변수에 타입을 지정해주시면 됩니다.
let aaa : string = "안녕하세요"
let bbb : number = 123

객체 타입을 만들어줄때 네이밍에는 관례가 있습니다.

interface의 I와 변수명을 합쳐주는 것 입니다. 예를 들어 객체를 담은 변수 이름이 Profile이라면 타입을 지정하는 객체는 IProfile로 네이밍해주는 것 이 관례입니다.

이렇게 타입스크립트를 이용해 각 변수에 타입을 지정해주시고 나면, 타입에 맞지 않는 값을 할당시 에러가 나게 됩니다.

타입스크립트 파일 확장자

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

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

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

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

💡 파일명
1. JSX 를 return 하는 컴포넌트 : tsx
2. 자바스크립트만사용하는 컴포넌트 : ts

타입스크립트를 사용할 땐 위의 확장자를 잘 구분해서 사용하셔야 합니다.

타입 추론

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

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

/* 배열타입 */
// 문자열만 있는 배열
let aaa:string[] = ["원두","은정","혜원"]

// 배열에 문자열과 숫자열을 같이 넣어두고 싶을 때
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 : "원두"
		age : 8
		school : "코캠 초등학교"
	} 

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