타입스크립트 핵 기초 - 변수와 함수에 타입 지정해주는 방법

boyeonJ·2023년 6월 26일
0

TypeScript

목록 보기
2/12
post-thumbnail

변수에 타입을 정의하는 방법

타입스크립트에 타입을 선언하고 싶으면 :타입이름 으로 선언해주면 됩니다. 이를 타입 표기라고 합니다.

타입의 종류는 아래와 같습니다.

string
number
boolean
object
Array
tuple
any
null
undefined

string, number, boolean

각각 문자열, 숫자, 진위여부 타입을 의미합니다.

object

객체 타입을 의미합니다. 하지만 타입스크립트의 장점을 극대화 시키려면 단순히 object로 타입 표기를 해주는것은 좋지 않습니다. 어떤 속성이 있고, 무슨 타입을 의미하는지 까지 표기해주어야 합니다.

let hero : object = {name: 'captain', age:100};
//좀 더 구체화하기!
let hero2 : {name: 'boyeon', age: 28};

Array

타입 스크립트에서 Array는 다른 타입들과 달리 두가지 방법으로 선언할 수 있습니다.

Array<배열의 타입>
배열의 데이터 타입[]

let cards : Array[number] = [2,2,3,13];
let names : string[] = ['boyeon', 'captain'];

tuple

특정 형태를 갖는 배열을 의미합니다.
1. 배열의 길이가 고정
2. 각 요소 타입이 정의 되어 있음

let items: [string, number] = ['hi', 11];

any

아무 데이터나 취급하겠다는 의미입니다. 자바스크립트의 유연함을 취하려고 할때 사용되는 타입입니다.

null과 undefined

자바스크립트에서 null은 의도적인 빈값, undefined는 초깃값입니다.(var 변수 선언시)
이 타입은 타입스크립트 설정 파일의 strict 옵션에 따라서 사용 여부가 결정됩니다.


함수에 타입을 지정하는 방법

함수의 파라미터와 리턴값에 타입을 지정해줄수 있습니다.

//함수 이름 옆에 리턴값의 타입 지정
//파라미터 옆 각 파라미터의 타입 지정
function sayWord(word: string) : string {
	return word;
}

타입스크립트에서 함수 인자의 갯수

자바스크립트에서 만약 정의된 파라미터보다 더 많은 인자를 넘기면 에러가 발생하지 않습니다. 반면 타입스크립트에서는 인수의 갯수가 다르면 에러가 발생합니다.

그런데 이때 매개변수를 넘기고 싶지 않을때가 있다면 어떻게 해야 할까요? 바로 옵셔널 파라미터를 사용해주면 됩니다.

function sayMyName(firstName: string, lastName?: string): string{
	return `my name is ${firstName} ${lastName}`;
}

log(sayMyName('Jeong','boyeon')); //my name is Jeong boyeon
log(sayMyName('Jeong')); //my name is Jeong

0개의 댓글