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

---

 

간단한 자바스크립트 코드에 타입을 선언하는 방법입니다.

 

var name = 'say'

자바스크립트에서 name 변수에 say라는 문자열을 할당한 자바스크립트 코드입니다.

 

name 변수에 타입을 선언할 때, 아래와 같이 변수 뒤에 ': 타입이름'을 추가하여 사용합니다.

var name: string = 'say';

변수 이름 뒤에 콜론을 붙여 해당 변수의 타입을 정의할 수 있습니다.

콜론(:)을 타입표기(type annotation) 이라고 부릅니다. 타입표기는 변수 뿐만 아니라 함수에도 사용할 수 있습니다.

 

---

 

변수나 함수의 타입을 정의할 때 사용할 수 있는 타입 종류들 중 주요 데이터 타입들을 알아보겠습니다.

 

1. string // 문자

2. number // 숫자

3. boolean // 진위

4. object // 객체

• object 타입에 어떤 속성이 있고, 해당 속성이 무슨 타입을 갖는지 명시되어 있지 않습니다.
  object를 구체적으로 명시하는 방법은 인터페이스에서 알아볼 예정입니다.

5. array 

• 배열 타입은 두가지 방법으로 선언할 수 있습니다.
  1. Array<배열의 데이터 타입> : 제네릭을 의미합니다.
  2. 배열의 데이터 타입[]

// 문자열 배열
var array1: Array<String> = ['a','b','c'];
var array1: String[] = ['a','b','c'];
// 숫자 배열
var array2: Array<number> = [1,2,3];
var array2: number[] = [1,2,3];

 

6. tuple

• 튜플은 특정 형태를 갖는 배열을 의미합니다. 배열 길이가 고정되고 각 요소 타입이 정의된 배열을 튜플이라고 합니다.
  
  아래의 

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

7. any

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

아래 코드예제에서 myName 변수에 any 타입을 지정하고 'saaay'라는 문자열을 선언해습니다.
이 변수는 any 타입으로 지정되었기 때문에 초기에 문자열을 갖고 있지만 다른 데이터 타입의 값으로 변경할 수 있습니다.

var myName: any = 'saaay';
myName = 100;
var age: any = 21;

8. null

9. undefined

• null은 의도적으로 빈 값을 의미합니다.
• undefined는 변수를 선언할 때 값을 할당하지 않으면 기본적으로 할당되는 초기값입니다.

var empty: null = null;
var nothingAssigned = undefined;

 

null과 unedefined 타입은 타입스크립트 설정 파일의 strict 옵션에 따라서 사용 여부가 결정됩니다.

 

---

함수는 function이라는 예약어와 함수 이름으로 함수를 선언할 수 있고, 함수 본문에 return 값을 추가해서 값을 반환하거나 함수 실행을 종료할 수 있습니다.

 

1. 파라미터와 반환값

함수의 타입을 정의할 때는 먼저 입력 값과 출력 값에 대한 타입을 정의합니다.

 

함수의 반환값 타입은 함수 이름 오른쪽에 ': 타입이름'으로 지정할 수 있습니다.

파라미터의 오른쪽에 ': 타입이름'을 넣으면 파라미터의 타입이 정의됩니다.

function sayWord(word: string): string{
	return word;
}

 

---

타입스크립트 함수의 인자 특징

 

자바스크립트 함수에서는 파라미터와 인자의 개수가 일치하지 않아도 프로그래밍상 문제가 없었지만,

타입스크립트에서는 에러가 발생하게 됩니다.

부가적인 함수 정보가 표시되기 때문에 함수를 정의된 스펙에 맞게 올바르게 사용할 수 있습니다.

 

(비주얼 스튜디오 코드의 인텔리센스 기능 때문에 사용할 수 있는것임. 비주얼 스튜디오 코드의 내부에 타입스크립트 서버가 돌고 있기 때문..!)

 

---

옵셔널 파라미터(optional parameter)

 

파라미터의 개수만큼 인자를 넘기지 않고 싶을 경우에는(함수의 파라미터를 선태적으로 사용하고 싶을 때) 옵셔널 파라미터를 사용합니다.

옵셔널 파라미터는 ?로 표기합니다. 선택적으로 사용하고 싶은 파라미터의 오른쪽에 '?'를 붙이면 됩니다.

function sayTheName(groupName: string, name?: string): string{
	return "sayTheName " + groupName + ' ' + name;
}