본문 바로가기

Languages/TypeScript

[TypeScript] 타입스크립트의 기본 타입

728x90

 

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

 

1. String (문자열)
2. Number (숫자)
3. Boolean
4. Object
5. Array
6. Tuple
7. Enum
8. any
9. void
10. never
11. Undefined
12. null

 

 


 

 

 (1) String 

 

자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언

let str: string = 'hi';

// 위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 함

 

 


 

 

 (2)  Number 

 

타입이 숫자이면 아래와 같이 선언

let num: number = 10;

 

 




 (3) Boolean 

 

타입이 진위 값인 경우에는 아래와 같이 선언

let show: boolean = true;
let isLoggedIn: boolean = false;

 

 


 

 

 (4) Object 

 

타입이 객체인 경우 간단하게 아래와 같이 선언

let obj: object = {};
let person: object = {
  name: "capt",
  age: 100 
};
// 객체를 구체적으로 정의하는 법
let person: { name: string; age: number } = {
  name: "capt",
  age: 100,
};

 

 


 

 

 (5) Array 

 

타입이 배열인 경우 간단하게 아래와 같이 선언 (배열 리터럴 방식)

let arr: number[] = [1,2,3];

 

제네릭 사용할 수도 있다.

let arr: Array<number> = [1,2,3];
let heroes: Array<string> = ["Capt", "Thor", "Hulk"]

 


 

 

 (6) Tuple 

 

튜플: 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
(배열의 모든 index에 type이 정의돼있다)

let arr: [string, number] = ['hi', 10];

 

만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 남

arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

 

 


 

 

 (7) Enum 

 

이넘: 특정 값(상수)들의 집합

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

 

이넘은 인덱스 번호로도 접근할 수 있다.

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];

 

이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다.

enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

 

숫자형 이넘 

enum Shoes {
  Nike, // 0
  Adidas, // 1 
}

let myShoes = Shoes.Nike;
console.log(myShoes);  // 0   -> 이넘을 쓸 때, 별도의 값을 지정하지않으면 전부 다 숫자형 이넘으로 취급함

 

문자형 이넘 

enum Shoes {
  Nike = "나이키", 
  Adidas = "아디다스", 
}

let myShoes = Shoes.Nike;
console.log(myShoes);  // "나이키"

 

이넘 활용 예제

enum Answer {
  Yes ="Y",
  No ="N",
}

function askQuestion (answer: Answer){
 if (answer === Answer.Yes){
  console.log("정답입니다")
 }
 if (answer === Answer.No){
  console.log("오답입니다")
 }
}

askQuestion(Answer.Yes);

 

 


 

 

 (8) any 

 

any: 모든 타입에 대해서 허용한다

- 자바스크립트의 key 같은 것
- 실행하는 시점에 타입을 구분해서 타입을 할당해줌
- 자바스크립트 프로젝트에 타입스크립트를 적용해서 변환한다고하면, any라는 타입을 먼저 다 지정하고 차근차근 타입을 구체적으로 지정해나가는 것이 정석 방법임
(기존에 자바스크립트로 구현되어 있는 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입)

 

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

 

 


 

 

 (9) void 

 

void: 반환 값이 없는 함수의 반환 타입 (반환값이 없다고 명시적으로 지정해주는 것)

 

< 반환 타입을 void로 지정하는 경우 >
- return이 없을 때 
- return이 있더라도 반환하는 값이 없을 때 

function printSomething(): void {  // return이 없을 때
  console.log('sth');
}

function returnNothing(): void {  // return이 있더라도 반환하는 값이 없을 때
  return;
}

 

 


 

 

 (10) Never  

 

Never: 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

 

 

728x90