타입스크립트 기본 타입

타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다.

 

✔ 타입 표기(Type Annotation)

• : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식

 

✔ String

// 기본 JS 선언
const str = 'hello';

// TS 문자열 선언
const str: string = 'hello';

 

✔ Number

let num: number = 10;

 

✔ Array

let arr: Array<number> = [1,2,3];
let heroes: Array<string> = ['captin','thor','hulk'] // 숫자를 넣으면 에러
let items : number[] = [1,2,3];

 

✔ Tuple

• 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식 입니다.

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

 

✔ Object

let obj: object = {};

let person: object = {
    name: 'capt',
    age: 100
};

let person: {name: string, age: number} = {
    name : 'thor',
    age : 1000
};

// object로 이루어진 배열
let todoItems: Todo[];

 

예시

function fetchTodoItems(): object[] { // object로 이루어진 배열
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

// 위의 코드를 아래와 같이 가능 (자세히 지정)
function fetchTodoItems(): { id: number; title: string; done: boolean }[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

 

✔ Boolean

let show: boolean = true;

 

✔ Any

• 단어 의미 그대로 모든 타입에 대해서 허용 합니다.

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

 

✔ Void

• 반환값이 없습니다. ( 리턴값들이 없는 경우 )

function deleteTodo(index: number): void {
   todoItems.splice(index, 1);
}

function log(): void {  
   console.log(todoItems);  
}

 

참고

• 인프런
• 캡틴판교