Frontend/Typescript
-
[Typescript] Type GuardFrontend/Typescript 2023. 3. 12. 16:31
Type Guard란? 변수의 타입을 특정 영역으로 제한 → 타입을 더 한정되게 좁혀 나가는 과정 공식문서에 따르면, 타입가드는 특정 스코프 내에서 사용되는 타입을 런타임에 체크하는 일종의 표현입니다. Type Guard 사용해야 하는 상황 Union type을 사용할 시 발생하는 오류 유니온 타입을 사용해 코드를 작성하면 타입스크립트 컴파일러는 “타입체크”를 수행할 수 없다. //JS코드 function add(a, b) { return a + b; } // 실행결과가 예상과 다를 순 있어도, 컴파일도중에 오류가 발생하진 않는다. //TS코드 function add(a: number | string, b: number | string): number | string { return a + b; } //..
-
[Typescript] EnumFrontend/Typescript 2023. 3. 12. 16:17
enum이란 enum은 Typescript가 자체적으로 구현하는 기능입니다. enum은 여러 값들에 미리 이름을 정의하여 열거해 사용하는 타입입니다. enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } 필요성과 존재 이유 1. 분야별 종류를 정의하여 명확하게 사용하기 위해 예를 들어, 사용자 권한을 관리자 = 0, 회원 = 1, 게스트 = 2로 관리할 경우, 개발자는 관리자 === 0 이라는 점을 기억하고 코딩해야 합니다. // 관리자 여부를 숫자로 체크한다. if (userType !== 0) { alert("관리자 권한이 없습니다"); } // 만약 회원 타입이 20종류가 넘어간다면??? // 관리..
-
[Typescript] type과 InterfaceFrontend/Typescript 2023. 3. 12. 16:13
TypeScript에서 타입(Type)과 인터페이스(Interface)는 유사한 점이 매우 많고, 여러 경우에 자유롭게 혼용되어 사용 가능합니다. interface AnimalInterface { species: string height: number weight: number } const tiger: AnimalInterface = { species: 'tiger', height: 200, weight: 300 } type AnimalType = { species: string, height: number, weight: number } const lion: AnimalType = { species: 'lion', height: 180, weight: 400 } 하지만 둘의 차이와 한계를 이해하고 표..
-
[TypeScript] 잘 사용하기Frontend/Typescript 2023. 2. 19. 23:19
정확한 타입 지정하기 (any 사용 피하기) any 변수의 데이터 유형을 알고 있는 경우 any를 사용하지 마세요. 새 변수를 선언할 때마다 데이터 유형을 정의하는 것이 좋습니다. strict 모드 사용하기 ES5에서 use strict 기능이 추가됐습니다. tsconfig.js 파일에서 strict 환경설정을 찾을 수 있습니다. 이는 선언되지 않은 변수를 사용하거나 타입 지정을 하지 않거나 예약어를 변수이름으로 사용하려고 시도하는 등의 실수를 제한합니다. 변수는 let, 상수는 const 사용하기 변수 var는 똑같은 변수명으로 다시 선언해도 오류가 발생하지 않습니다. 타입스크립트는 어떠한 오류를 보여주지 않지만 예상치 못한 결과로 끝나게 됩니다. 이를 막기 위해 let, const을 사용해야 합니다...
-
[TypeScript] 동작 원리, 장점과 단점Frontend/Typescript 2023. 2. 19. 21:09
- 동작원리 텍스트를 컴파일러 프로그램이 파싱해 AST라는 자료 구조로 변환 AST(Abstract Syntax Tree) : 추상 문법 트리 컴파일러 프로그램이 AST를 바이트 코드로 변환 런타임 프로그램에 바이트 코드를 입력해 평가받은 결과 출력 - 장점 정적 타입 지원 TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착 할 수 있다. (tsc라는 명령어로 타입 스크립트 파일 컴퍼일 → 자바스크립트로 출력 → 문법 에러 catch) 또한, tsconfig.js 파일에 명시된 ECMA 버전으로 자동 변환 가능. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술 할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다. function sum..