타입 명시 (Type Annotations)

soohyunee·2023년 4월 12일
0

TypeScript

목록 보기
4/20
post-thumbnail

1. 타입 명시

  • 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정
  • let x : string → 변수이름 : 변수의 데이터 타입

2. 변수의 타입 명시

let studentID: number = 12345;
let studentName: string = 'Jenny';
let age: number = 21;
let gender: string = 'female';
let subject: string = 'Javascript';
let courseCompleted: boolean = false;

let numArr1:number[] = [1, 2, 3];
let numArr2:Array<number> = [1, 2, 3];

let week1:string[] = ['mon', 'tue', 'wed'];
let week2:Array<string> = ['mon', 'tue', 'wed'];

let a: null = null;
let b: undefined = undefined;
  • 컴파일 에러 : 코드를 작성할 때 문법을 잘못 작성하여서 컴파일 시에 일으키게 되는 오류
  • 타입이 명시된 변수는 항상 그 타입의 값을 가져야 함

3. 함수의 타입 명시

function getStudentDetails(studentID: number): void {
	console.log('hello');	
}

function getStudentDetails(studentID: number): object {} // 에러

function getStudentDetails(studentID: number): object {
	return null;
}

function showError(): never {
	throw new Error();
}

function infLoop(): never {
	while (true) {
		// do something
	}
}
  • 함수의 파라미터(매개변수)도 타입 명시 가능
  • 함수의 결과값에도 타입 명시 가능, 파라미터가 들어가는 괄호 뒤에 콜론 찍고 함수의 값의 타입 선언
  • void : 이 함수는 아무 값도 반환하지 않음, 함수가 아무 값도 반환하지 않으면 void 타입 명시 가능
  • 함수가 어떠한 특정 값을 반환하는 함수라면 void 대신 반환되는 타입을 명시
  • void나 any 타입이 아닌 경우에 타입이 명시된 함수는 반드시 값이 반환되어야 함
  • never : 항상 에러를 반환하거나, 영원히 끝나지 않는 함수의 타입으로 사용

4. 객체의 구조로 타입 명시하기

function getStudentDetails(studentID: number): {
	studentID: number;
	studentName: string;
	age: number;
	gender: string;
	subject: string;
	courseCompleted: boolean;
} {
	return null;
}
  • 타입스크립트에서의 일반적인 규칙은 타입에 관한 더 많은 정보를 제공될 수록 코드를 깔끔하고 효과적이고 유지보수하기 쉽게 도와줌
  • 단순히 함수의 반환값을 객체라고 지정하는 것보다는 더 세부적이고 자세하게 타입을 명시하는 것이 좋음
  • 실제로 반환하는 객체의 구조를 타입으로 명시 가능
  • object 타입 대신 중괄호를 넣어주고, 중괄호 내에 프로퍼티와 타입을 지정

5. 튜플 (Tuple)

let b: [string, number];

b = ['z', 1];
b = [1, 'z']; // 에러 발생

b[0].toLowerCase();
b[1].toLowerCase(); // 에러 발생
  • 배열과 비슷한 모양, 인덱스 별로 타입이 다를 때 사용
  • 대괄호 안에 타입을 작성

참고 : 땅콩코딩, 코딩앙마

profile
FrontEnd Developer

0개의 댓글