[TypeScript] 변수와 함수 기본 타입 정의

 

타입스크립트 기본 타입

• Boolean: 타입이 진위 값인 경우
• Number: 타입이 숫자인 경우
• String: 변수의 타입이 문자열인 경우
• Object
• Array: 타입이 배열인 경우
• Tuple: 배열의 길이가 고정되고, 각 요소의 타입이 지정되어 있는 배열 형식을 의미
• Enum: 특정 값(상수)들의 집합을 의미. 인덱스 번호로 접근 가능
• Any: 모든 타입에 대해서 허용한다는 의미. 기존 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하기 좋은 타입
• Void
• Null
• Undefined
• Never: 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타

타입 스크립트의 기본 타입에는 크게 12가지가 있다.

 

 

 

타입스크립트에서 변수 선언 및 타입 정의하기

타입스크립트에서는 콜론(:)을 사용하여 타입을 정의한다.

 

 

< 자바스크립트에서 문자열 선언 >

const str = 'hello';

위 코드는 자바스크립트에서 문자열을 선언하는 방법이었다.

 

 

< 타입스크립트에서 문자열 선언 >

const str: string = 'hello';

반면 타입스크립트에서는 변수명 뒤에 콜론(:)을 사용하여 타입을 지정할 수 있다.

해당 예시는 string 타입으로 변수를 정의한 예시이다.

 

 

< number 선언 >

let num: number = 10;

 

 

< 배열 선언 >

let arr: Array<number> = [1, 2, 3];
let names: Array<string> = ['A', 'B', 'C'];
let items: number[] = [1, 2, 3];

 

 

< 튜플 >

배열의 특정 인덱스에서 그 인덱스의 타입까지 정의할 수 있는 경우 튜플로 선언할 수 있다.

즉, 모든 인덱스에 타입이 정의되어 있는 경우이다.

let address: [string, string, number] = ['gangnam', 'pangyo', 10];

 

 

< 객체 >

간단한 객체는 object를 이용해 선언할 수 있다.

하지만, 객체를 구체적으로 정의하고 싶은 경우가 존재할 것이다.

이때는 :object를 사용하는 것이 아닌, 콜론(:) 이후 중괄호{ ... }를 이용해 객체를 열어주고, 내부에 속성의 타입을 지정해주면 된다.

let obj: object = {};
// let person: object = {
//   name: "capt",
//   age: 100,
// };
let person: {name: string, age: number } = {
    name: 'guswjd',
    age: 24
}

 

 

< 진위값 >

let show: boolean = true;

 

 

 

함수 타입

< 함수의 파라미터에 타입을 정의하는 방식 >

function sum(a: number, b: number){
    return a + b;
}

sum(10, 20);

 

 

< 함수의 반환 값에 타입을 정의하는 방식 >

function sum(): number{
    return 10;
}

함수의 반환 값에 타입을 정의하는 경우 반환 값(return)이 무조건 해당 타입으로 정의되어 있어야 한다.

아니면 오류가 발생할 것이다.

 

 

< 함수에 타입을 정의하는 방식 >

function sum(a: number, b: number): number{
    return a + b;
}

 

 

함수 타입 - 파라미터를 제한하는 특성

 

자바스크립트의 경우 함수에 있는 파라미터의 갯수보다 더 많은 인자가 들어올 경우 문제가 되지 않는다.

function sum(a, b){
  return a + b;
}

sum(10, 20, 30, 40, 50);

 

하지만 타입스크립트는 아니다.

타입스크립트에서는 파라미터의 갯수보다 더 많은 인자가 들어올 경우, 불필요한 인자가 들어와 있다고 오류를 발생시킨다.

즉, 타입스크립트는 자바스크립트보다 특정 함수 사용에 있어서 더 엄격하게 체크를 해준다.

 

 

 

함수 타입 - optional 파라미터(선택적 파라미터)

앞서 타입을 정의하면 무조건 해당 함수의 파라미터와 인자의 개수가 일치해야만 들어올 수 있었다.

하지만 때때로 우리는 파라미터의 개수만큼 인자를 넘기지 않을 상황이 생길 것이다.

특정 파라미터를 선택적으로 사용해야 할 상황이 발생할 것이다.

이때 물음표(?)를 추가하여 이 상황을 해결할 수 있다.

 

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

}

log('gus', 'wjd');
log('gus');

위 코드처럼 콜론(:) 앞에 물음표(?)를 사용하면 정의된 매개변수 b는 꼭 인자로 넘기지 않아도 되는 것을 의미한다.

따라서 인자를 한 개만 넘겨줘도 오류가 발생하지 않을 것이다.