[TypeScript] 변수와 타입, 함수 생성

서론

TypeScript는 JS에서 발생하는 에러를 대비하기 위해 만들어진 언어이다. 자바스크립트에서는 개발자를 위한 에러를 내지 않는다. 계산 식이 잘못 되었더라도 어떻게든 수행한다. 하지만 그로인한 결과값은 원하는 값이 아닌 경우가 많다.

 

예를 들어 JS에서는 [1, 2,3 ,4] + true 를 실행하면 오류없이 실행이 된다.

 

console.log([1,2,3,4] + true)

// result
1,2,3,4true

 

하지만 위 결과는 원하는 결과 값이 아니다. 위와 같은 수식은 옳은 수식이 아니므로 실행 전 개발자에게 알려주어야 한다. 다음은 또 다른 예시이다. 

function div(val1, val2) {
    return (val1 / val2)
}

console.log(div('안녕?'))

//result
NaN

위 수식에서 나오는 div 메서드는 두 수를 나누는 함수이다. 하지만 "안녕?" 이라는 문자열이 들어가도 에러가 나지 않는다. 에러가 나지 않으므로 오류메세지도 나오지 않는다. 따라서 디버깅 난이도를 올리는 원인이 될 수도 있다. 

 

이러한 이유로 코드를 실행하기 전 개발자에게 에러를 알려주는 타입 스크립트가 나오게 되었다고 한다. 

---

변수 선언

기본 타입

변수를 선언할 때에는 타입을 지정할 수 있다. 여기서 타입을 반드시 지정해야하는 것은 아니다. 타입을 지정하지 않으면 타입스크립트에서 스스로 타입을 결정한다. 

let a : number = 1			// number 타입
let b : string = "hello"		// string 타입
let c : boolan = true			// boolan 타입
let d : number[] = [1,2,3]		// number array 타입
let e : string[] = ["hello", "world"]	// string array 타입

 

옵션 타입

object 타입일 때 필수로 들어가는 변수와 필수가 아닌 변수가 있다고 한다면 아래와 같이 정의한다. 변수 명 뒤에 ? 를 붙히면 옵션값이 된다. 따라서 age를 지정하지 않아도 에러가 발생하지 않는다.

let player : {
	name : string,
    age? : number  // 옵션
}

 

타입 생성

위와 같은 본인이 만든 object 타입을 재사용할 수도 있다. 예를 들어 player 타입을 가진 인원이 많아진다면 위와 같은 내용을 여러번 써야 할 것이다. 따라서 타입을 지정해서 해당 타입을 불러오기만 하면 조금 더 쉽게 코드를 작성할 수 있다. 

type player = {
	name: string,
	age?: number
}

const jaehwi : player = {
	name : 'jaehwi',
    	age : 25
}

const nico : player = {
	name : 'nico'
}

 

함수

타입스크립트의 함수는 지정한 타입의 리턴만을 반환한다. 함수의 사용법은 다음과 같다. 

function makePlayer(name : string) : player {
	return {
    	name : name
    }
}

const jaehwi = makePlayer('jaehwi')
jaehwi.age = 25