Typescript

huni_·2022년 7월 5일

JavaScript typescript

JS

목록 보기

18/27

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

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

// 자바스크립트는 자료형에 연연하지 않고 할당이 가능합니다.
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로 네이밍해주는 것 이 관례입니다.

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

엄격한 타입스크립트 strict

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와 같습니다.

💡 이벤트 핸들러 함수의 파라미터(event) 타입 지정하기
→ 우리 프로젝트에서 onChange함수의 파라미터 타입을 지정해 줄 때 ChangeEvent를 사용해주었습니다. 아래에서 자세히 확인 해주세요.

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