TypeScript

오늘은 어제 배웠던 타입스크립트의 기본적인 문법들을 배워보자.

기본 타입

String

• 문자열
• 텍스트 데이터 타입을 String 타입이라고 한다.

Number

• 숫자
• 10진수, 16진수 (0x) 표현을 지원하고 ECMA Script 2015에서 2진수(0b), 8진수(0o) 표현이 추가가 되었는데 이 역시 TS에서 지원을 한다.

Boolean

• 참, 거짓 (true, false)

Array

• 배열
• TS 에서 배열을 나타내는 방법은 두가지 있다.

예시
1. 타입 뒤에 배열 요소를 나타내는 대괄호를 넣는 방법

let arr:number[] = [1,2,3]

2. 배열 요소를 나타내는 Array 뒤에 제네릭을 쓰는 방법 (제네릭은 이후 설명)

let arr: Array<number> = [1,2,3]

Tuple

• 요소의 타입과 갯수가 고정된 배열을 사용 할 수 있다.
• 단, 요소들의 타입이 모두 같을 필요는 없다.

예시

let x:[string, number];
x = ['hi', 1]
x = [1,'hi'] //error - x의 첫 번째 값은 string, 두 번째 값은 number 인데 그 값이 맞지 않아 오류가 난다.
x[2] = 'world' //error - x의 index는 1까지 있는데 index2 에 값을 넣기 때문에 오류가 난다.

any

• 모든 타입
• 자바스크립트에서 짰던 모든 변수들은 any
• 너무 any를 남발하면 타입스크립트를 쓰는 이유가 없어지지만.. 잘 모르겠다면 일단 써보는것도 방법인듯 하다.

Void

• 함수에서 리턴값이 없을 경우 반환되는 값
• Void는 변수의 타입으로는 활용하지 않음

예시

function exam():void{
  console.log("exam");
}

null, undefined

• 주로 유니온 타입을 활용 할 때 같이 사용이 된다. (유니온은 이후 설명)

예시

let a:null = null;
let b:undefined = undefined;

let unionType: number | null = 123

never

• 함수가 비정상적으로 종료되거나 함수가 끝까지 실행되지 않았을 경우의 타입

예시

function exam():never {
	while(true){}
}
function exam2():never{
	throw new Error("Error")
}

함수 타입

• TS 는 함수의 파라미터의 타입과 반환 타입을 선언해줄 수 있다.
• 단, 리턴값의 타입은 리턴문을 보고 그 타입을 파악할 수 있으므로 반환타입을 생략할 수 있다.

일반 함수 타입

예시 1

function examAdd1(n1:number, n2:number) :number {
	return n1+n2
}

const examAdd2 = (n1:number, n2:number) => {
	return n1+n2;
}

예시 2
위 함수를 사용한다고 가정했을 때!

const a = examAdd(1,2)
const b = examAdd('1',2) //error - 인자 갯수가 파라미터와 달라서 에러가 난다.
const c = examAdd(1,2,3) //error - 인자 갯수가 파라미터 갯수보다 많아 에러가 난다.
const d = examAdd(1) //error - 인자 갯수가 파라미터 갯수보다 적어 에러가 난다.

예시 3
리턴값이 void 인 경우의 함수

function printResult(num:number):void {
	console.log("Result" + num)
}
printResult(6);

옵셔널 파라미터 (Optional Parameter)

• 우리가 js에서 썼던 옵셔널체이닝처럼 원하는 파라미터를 없음말고 값으로 만들어준다.

예시1

function exam(n1:number, n2:number):number {
	if(!n2) return n1;
  	return n1+n2;
}
const a = exam(1,2)
const b = exam(1,2,3) //error - 인자 갯수가 파라미터 갯수보다 많아 에러가 난다.
const c = exam(1) //error - 인자 갯수가 파라미터보다 많지만 n2가 들어오지 않았을 때 n1만 return 시켜주었는데 에러가 난다!!

이런 상황에서는 옵셔널 파라미터를 사용하면 된다.

예시2

function exam(n1:number, n2?:number):number {
	if(!n2) return n1;
  	return n1+n2;
}
const a = exam(1,2)
const b = exam(1,2,3) //error - 인자 갯수가 파라미터 갯수보다 많아 에러가 난다.
const c = exam(1) // 위에서는 에러가 났지만 이제 에러가 나지 않는다.

한가지 유의할 점은 위 함수에서는 네임드 파라미터를 사용하지 않아 파라미터가 넣은 순서대로 들어간다.
예시2 const a = exam(1,2) 에서 인자를 1,2 순서로 주었기 때문에 파라미터도 1,2 순서대로 들어간다. (n1=1 , n2=2)
그렇기 때문에 옵셔널 파라미터가 require 파라미터 앞에 위치할 수 없다.

예시1

function exam(n1?:number, n2:number):number {
	if(!n2) return n1;
  	return n1+n2;
}
const a = exam(1,2)
const b = exam(1,2,3) //error - 인자 갯수가 파라미터 갯수보다 많아 에러가 난다.
const c = exam(1) //error - 인자를 첫 번째 파라미터에만 넣어주었지만 두 번째 파라미터가 필수값, 첫 번째 파라미터는 옵션값이기 때문에 에러가 난다.

디폴트 파라미터 (Default Parameter)

• 디폴트 파라미터는 TS 뿐 아니라 JS 에도 있는 기능이다.
• 파라미터를 변수를 선언할 때처럼 parameter = default 이런식으로 선언을 해주면 해당 파라미터에 아무것도 들어오지 않았을 때 선언된 값이 들어간다.

예시

function exam(n1:number, n2:number = 0) {
	if(!n1) return n1;
  	return n1+n2;
}
const a = exam(1,2) // return 3
const b = exam(1) // return 1

레스트 파라미터 (Rest Parameter)

• 레스트 파라미터도 TS 뿐 아니라 JS 에도 있는 기능이다.
• ES2015(ES6)에서 처음으로 도입됨
• 함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 만들어준다.
• 레스트 파라미터는 각각 파라미터를 대응시키고 남은 인수들을 배열로 만들어주기 때문에 처음이나 중간에는 올 수 없고 항상 마지막에만 올 수 있다.

예시

function exam(n1:number, ...nums:number[]) {
	for(key in nums){
    	totalOfNums += nums[key];
    }
  return n1 + totalOfNums
}
const a = exam(1,2) // return 3
const b= exam(1,2,3,4,5) // return 15

위에서 a의 nums는 [2] 이고, b의 nums는 [2,3,4,5] 이다.