Typescript 란? (2024.05.29)

타입스크립트란?

• 자바스크립트의 슈퍼셋으로, 자바스크립트에 타입을 부여한 언어입니다.
• 타입스크립트를 사용하면 코드 작성 시 타입 오류를 미리 잡아낼 수 있어 안전성과 유지보수성이 높아집니다.

왜 타입스크립트를 사용하는가?

• 자바스크립트만 사용하면 발생할 수 있는 타입 관련 오류를 방지하기 위해 타입스크립트를 사용합니다.
• 예시: 글쓰기 권한이 5개인 서비스에서 도배가 발생한 원인이 글쓰기 카운트를 배열로 잘못 처리한 경우가 있었다. 타입스크립트를 사용하면 이런 오류를 미리 방지할 수 있습니다.

기본 사용법

 

 

변수 선언

let aaa: string = "안녕하세요"; // 타입을 지정하여 선언
// aaa = 3; // 오류 발생: '3'은 'string' 타입에 할당할 수 없습니다.

 

타입 추론

• 타입스크립트는 변수를 선언할 때 초기값을 기준으로 타입을 추론합니다.

let bbb = "Hello"; // bbb는 string 타입으로 추론됨
// bbb = 3; // 오류 발생

 

유니온 타입

• 변수에 여러 타입을 지정할 수 있습니다.

let ccc: number | string = 1000;
ccc = "1000원";

 

객체 타입

인터페이스 사용

• 인터페이스를 사용하여 객체의 타입을 정의합니다.

interface IProfile {
    name: string;
    age: number | string;
    school: string;
    hobby?: string; // 선택적 프로퍼티
}

const profile: IProfile = {
    name: "철수",
    age: 8,
    school: "초등학교"
};

profile.name = "훈이";
profile.age = "8살";
profile.hobby = "수영";

 

함수 타입

• 함수의 매개변수와 반환값에 타입을 지정합니다.
• 함수는 타입 추론이 되지 않기 때문에 반드시 타입을 지정해야 합니다.

function add(num1: number, num2: number, unit: string): string {
    return num1 + num2 + unit;
}

add(1000, 2000, "원");

 

 

tsconfig.json

• 타입스크립트 설정 파일입니다.
• 주요 설정:
  • target: 타입스크립트를 컴파일할 때 어떤 버전의 자바스크립트로 변환할지 지정합니다.
  • skipLibCheck: 내가 작성한 코드 외에 다른 사람의 코드(라이브러리 등)의 타입 검사를 건너뛸지 여부를 설정합니다.

{
  "compilerOptions": {
    "target": "ES6", // ES6 버전으로 컴파일
    "skipLibCheck": true // 라이브러리 타입 검사 건너뜀
  }
}

 

 

요약

• 타입스크립트는 자바스크립트에 타입을 강제하여 코드의 안전성과 유지보수성을 높이는 언어입니다.
• 변수, 객체, 함수 등에 타입을 지정하여 사용하는 것이 기본이며, 이를 통해 개발 시 타입 오류를 미리 방지할 수 있습니다.
• 타입스크립트 설정은 tsconfig.json 파일을 통해 관리합니다.