프론트엔드/TypeScript

TypeScript 사용 이유와 기본 타입

alswlfl 2023. 1. 3. 13:54

타입스크립트: js+type 문법(엄격한 타입 체크)

→ 자바스크립트 업그레이드 언어(문법은 유사함)

[장점]

  • 엄격한 타입 체크로 자바스크립트의 문제점 해결
  • 에러 메시지가 명확함(어디서 오류가 생겼는지, 오타교정)
function sum(a: number, b: number) {
  return a + b;
}

[특징]

  • 우리가 사용하는 브라우저들은 TS를 이해하지 못하기 때문에, TS를 JS로 변환해야 함
  • JS(동적언어): 런타임에 타입 결정/오류 발견
  • TS(정적언어): 컴파일 타임에 타입 결정/오류발견
  • 도저히 무슨 타입인지 모르는 경우에는 any를 사용하지만, 가급적이면 사용하지 않는 것을 권장
  • 타입명시방법: 변수:타입

기본 타입

  • 배열 사용 시
function showItem(arr:number[]){
  arr.forEach((item)=>{
    console.log(item);
  });
}

showItem([1,2,3])
  • 기본 자료형
let age:number=30;
let isAudlt:boolean=true;
let a:number[]=[1,2,3]
let a2:Array<number>=[1,2,3];

let week1:string[]=['mon','tue','wed'];
let week2:Array<String>=['mon','tue','wed'];
  • 튜플
let b:[string, number];

b=['z',1]. 
// b=[1,'z'];  오류

b[0].toLowerCase();
// b[1].toLowerCase(); 오류
  • void, never
function sayHello():void{
  console.log('hello');
}
//void는 함수에서 아무것도 반환하지 않는 경우 사용

function showError():never{
  throw new Error();
}

function inFloop():never{
  while(true){
    //do something...
  }
}
// never는 에러를 반환하거나 영원히 끝나지 않는 함수에서 사용
  • enum
// 비슷한 값들끼리 묶어줌, 자바스크립트에는 없는 타입
enum Os{
  Window,  
  Ios,
  Android
}
//enum에 수동으로 값을 주지 않는 경우, 자동으로 0부터 할당
//enum에 숫자 입력하면 양방향 컴파일 가능
//enum에 문자형을 입력하면 단방향으로만 컴파일 가능
//특정 값만 입력할 수 있도록 강조하고 싶을 경우 사용
  • null, undefined
let a:null=null;
let b:undefined=undefined;