타입스크립트의 기본타입과 함수

안녕하세요. 기깔나는 사람들에서 프론트엔드를 맡고있는 황인찬입니다.

이전 블로그에서 타입스크립트의 정의와 자바스크립트와의 차이점을 간략하게 소개했었는데요.

오늘은 타입스크립트에서의 기본타입들에 대해 알아 보겠습니다.

 

 

---

기본 타입

타입스크립트는 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다.

기본타입에는 12가지가 있습니다.

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

// String
let str: string = 'hi';
// Number
let num: number = 10;
// Boolean
let bool: boolean = true;
// Any
let str: any = 'hi'; let num: any=10; let arr: any = ['a',1,false];

변수들에 자주 사용 하는 타입들이 String, Number, Boolean 그리고 자바스크립트처럼 모든 타입을 허용한다는 의미인 Any 타입의 사용 예시 

// Array
let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];
// Tuple
let arr: [string, number] = ['기깔',10];

배열의 경우 배열의 요소들의 타입을 위와 같이 간단하게 선언할 수 있으며, 추후에 상세히 다뤄볼 내용인 제네릭'<>'을 사용 할 수 있습니다.

Tuple은 길이가 고정되고 타입이 지정되어있는 배열 형식을 의미 하는데 위와 같이 사용할 수 있습니다.

// Enum
enum Role {BE,FE}
let developer: Role = Role.BE;
let developer: Role = Role[0];

Enum은 상수들의 집합을 의미합니다.

첫 라인에 enum 을 선언한 후 상수 혹은 인덱스 번호로 사용 할 수 있습니다.

// Void
let Null: void = undefined;
function notuse(): void {
	console.log('notuse 호출');
}
//Never
function neverEnd(): never {
	while(true){
    
    }
}

Void는 변수에서 사용시 null과 undefined만 할당하고 함수에서는 리턴값이 없는 타입입니다.

Never는 무한루프를 의미합니다.

---

타입스크립트에서의 함수

함수에서 사용할 때는 파라미터와 리턴값의 타입을 정의할 수 있습니다.

function sum(a: number, b: number): number{
	return a+b;
 
}
//리턴값이 없음
function sum2(a: number, b: number): void{
	console.log(a+b);
}

sum(10,20); // 30

 

타입 뿐만이 아니라 파라미터의 갯수도 한정하여

아래와 같이 호출 할 경우 컴파일 에러가 나게됩니다.

sum(10,'20'); // error
sum(10,20,30,40); //error

옵셔널 파라미터 라는 기능이 있습니다.

log를 찍는 함수를 만들었다고 가정해봅시다.

log('hello world');
log('hello ts', 'abc');

위와 같이 파라미터를 1개 혹은 2개로 받을 수 있는 함수를 작성 하고자 할 때 ':'대신 '?:'를 붙여 사용 할 수 있습니다.

function log(a: string, b?: string){
	
}

---

마치며

오늘은 타입스크립트에서의 기본적인 타입들을 소개하는 시간을 가져보았습니다.

다음에는 타입스크립트의 인터페이스에 대해서 알아 보겠습니다 감사합니다.

---

💡 참고 사항
본 내용은 인프런의 타입스크립트 입문 - 기초부터 실전까지<장기효>의 강의와 공식문서를 토대로 작성되었습니다.

참고자료

🔗 - (인프런) 타입스크립트 입문 - 기초부터 실전까지<장기효>  https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8#

📖 - (타입스크립트 공식문서)

https://www.typescriptlang.org/ko/