[TIL] 240507 - TypeScript

TypeScript

---

타입스크립트는 자바스크립트에 타입 시스템을 적용해 에러를 체크할 수 있음

JavaScript

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

console.log(add(2, 4))

TypeScript

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

console.log(add(2, 4));

Install

node 설치 후

npm install g- typescript

• tsc [file name] : 컴파일 실행

• tsc --init : tsconfig file 생성

• tsc -w [file name] : 파일을 계속해서 감시하다가 변경되면 자동으로 컴파일

타입 추론(Type Inference)

타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있음
→ 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론

let name = 'kim';
name = 1;

→ javascript는 에러가 나지 않지만 typescript는 에러 발생

데이터 타입

데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있음

기본 데이터 타입

number : 숫자 타입(정수, 실수)

string : 문자열 타입

boolean : true, false를 나타내는 불리언 타입

null : 값이 없음을 나타내는 타입

undefined : 값이 할당되지 않는 변수의 기본값인 타입

객체 타입

object : 객체를 나타내는 타입

array : 동일한 타입의 요소를 가진 배열을 나타내는 타입

tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입

특수 타입

any : 어떠한 타입이든 할당될 수 있는 타입

unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

타입 명시

변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정

let x : string = "string";

함수

리턴값이 없을 때

function add(a : number, b : number) : void{
  console.log(a + b);
}

숫자 리턴

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

interface

인터페이스는 데이터 타입으로 사용 가능

선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여줌

메소드도 인터페이스 내에서 선언 가능 → 상속 받는 클래스는 반드시 메소드 오버라이딩을 해줘야함

인터페이스를 클래스에 상속할 수 있음 → extends가 아닌 implements

interface Student{
  stdId : number;
  stdName : string;
  age? : number;  // 선택적 프로퍼티
  gender : string;
}

function getInfo(id : number) : Student{
  return {
    stdId : id,
    stdName : 'lee',
    age : 20,
    gender : 'female',
  }
}

console.log(getInfo(2));