TypeScript- Basic types

이희제·2020년 12월 5일
6

오늘은 타입스크립트의 기본적인 타입에 대해서 알아보겠습니다. 인프런에 있는 캡틴 판교님의 강좌를 보면서 정리한 내용입니다.

TypeScript

  • tsc => typescript 파일을 javascript 로 변환.

타입스크립트 기본 타입


  • Boolean
  • Number
  • String
  • Object
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null
  • Undefined
  • Never

example)

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

// 숫자
const num: number = 10;

// 배열
const arr: Array<string> = ["heeje", "hi"];     /// <= 꺽쇠 안에는 타입이 들어간다. 
arr.push('hi');

// 배열 - 리터럴 적용
const items: string[] = [];  // <= 리터럴을 쓰고 앞에 타입을 붙여주면 된다. 
// items.push(10);

// 튜플  => 특정 인덱스의 타입을 지정해준다.  
const address: [string, number] = ['판교', 40];

// 객체
const obj: object = {};
// obj.a = 10;

// 타입 객체
const person: { age: number; name: string } = { age: 100, name: 'Capt' };
person.age = 101;

// 진위값
let isLogin: boolean = false;



함수


함수의 선언 예시

// 타입스크립트 함수 선언 - 함수의 반환 타입
function add(a: number, b: number): number {
  return a + b;
}

//or
//with arrow function
const sum = (a: number, b: number): number => {
    return a + b;
};

함수에서의 옵셔널

// 두 번째 파라미터는 옵셔널로 있어도 되고 없어도 된다. 
function printText(text: string, type?: string) {
    console.log(text);
}
printText("hi");

타입의 별칭

type Todo = { id: number; title: string; done: boolean };

let todoItems: Todo[];

// api
function fetchTodoItems(): Todo[] {
    const todos = [
        { id: 1, title: "안녕", done: false },
        { id: 2, title: "타입", done: false },
        { id: 3, title: "스크립트", done: false },
    ];
    return todos;
}

Interface => 코드의 간결화

interface Todo {
    id: number;
    title: string;
    done: boolean;
}

let todoItems: Todo[];

// api
function fetchTodoItems(): Todo[] {
    const todos = [
        { id: 1, title: "안녕", done: false },
        { id: 2, title: "타입", done: false },
        { id: 3, title: "스크립트", done: false },
    ];
    return todos;
}



profile
남는 것을 좋아하는 프론트엔드 개발자입니다.

0개의 댓글