TypeScript 실무 개발 가이드 (2025)이 문서 하나만 보면 TypeScript를 제대로 사용할 수 있도록 핵심만 정리한 실용적인 가이드입니다.📋 목차환경 설정핵심 타입 시스템인터페이스와 타입 정의제네릭 활용타입 가드와 안전성유틸리티 타입고급 타입 패턴React와 함께 사용하기실무 베스트 프랙티스2025년 최신 기능🔧 환경 설정프로젝트 시작하기# 새 프로젝트 생성npm init -ynpm install typescript @types/nodenpx tsc --init# 글로벌 설치 (IDE 지원용)npm install -g typescript필수 tsconfig.json 설정{ "compilerOptions": { "target": "ES2020", "module": "ESNex..
React Native에서 Cheerio 사용하기: TypeScript 타입 선언 완벽 가이드React Native 프로젝트에서 HTML 파싱을 위해 react-native-cheerio를 사용하다 보면, TypeScript 컴파일 오류가 발생하는 경우가 있습니다. 이는 해당 패키지에 타입 선언이 없기 때문인데, 이 문제를 해결하는 방법을 상세히 알아보겠습니다.문제 상황react-native-cheerio 패키지는 JavaScript로만 작성되어 있어서:TypeScript 타입 선언이 없음@types/react-native-cheerio도 존재하지 않음따라서 TypeScript에서 사용 시 컴파일 오류 발생해결 방법: 직접 타입 선언 파일 생성1. 타입 선언 파일 생성프로젝트 루트에 types/react..
자료형으로서의 타입 -변수에 저장할 수 있는 값의 종류는 프로그래밍 언어마다 다르다. 최신 ECMAScript 표준을 따르는 자바스크립트는 7가지 데이터 타입 (자료형)을 정의한다.undefined, null, Boolean, String, Symbol, Numeric (Number/BigInt), Object 타입을 확인하는 방법타입스크립트에서 typeof, instanceof 그리고 타입 단언을 사용해서 타입을 확인할 수 있다.typeof 는 연산하기 전에 피연산자의 데이터 타입을 나타내는 문자열을 반환한다.typeof 연산자가 반환하는 값은 자바스크립트 7가지 기본 데이터 타입(Boolean, null, undefined, Number, BigInt, String, Symbol) 과Function ..
타입스크립트에서 구조적 타이핑으로 인해 유니온 타입의 논리가 조금 이상한데 이유가 뭘까요? 다음 예시를 보면 오류를 내지 않고 있어요. 그래서 유사한 구조의 타입들을 구분하기 위해서는 Discriminated Unions 를 사용하라고 하는데요. 애초에 유니온을 만들때 부터 정확한 논리구조로 만들 수는 없는 것이었을까요? 구조적 타이핑, 덕 타아핑의 한계로 인해 어쩔 수 없는 것인가요? 다음의 예시에서 data 는 a, b, c, d 속성을 모두 가지고 있음에도 에러를 내지 않는다. type A = { a: string; b: string;}type B = { a: string; b: string; c: number;}type C = { a: string; b: string; d: () =..
서버 클라 데이터 주고 받기에 대한 타이핑으로 생각하면 스위프트나 코틀린 같은데도 그거 파싱하는거 머리 아픈데 타입스크립트는 생각해보니 그런게 처리가 유연하겠네요.any 로 다루다가 결국은 서버 클라 측에서 스펙을 완전히 정리한다면 모두 타입으로 구현한다고는 본거 같긴한데 그러고 보니 string 덩어리 키 값들이 있을수 있으니 그런거 축약해서 쭉 넣어줄 수 있으니 그런측면에서 고급기능이라 볼 수 있겠네요. 타입스크립트(TypeScript)의 독특한 타이핑 기능들이 자바(Java), 스위프트(Swift) 같은 정적 타입 언어들과 비교할 때 복잡하게 느껴질 수 있지만, 이는 동적 언어인 자바스크립트(JavaScript)의 특성과 그 사용 사례에 맞게 설계된 것입니다. 이러한 기능들이 도입된 이유와 그 ..
sehyunny (sehyun hwang) / 작성글 - velog A different way to think about TypeScript (rob.directory) "타입스크립트의 타입 시스템은 타입에 대해 동작하는 순수 함수형 언어로 생각할 수 있습니다"라는 말은, 타입스크립트의 타입 시스템이 일종의 함수형 프로그래밍 언어처럼 작동한다는 것을 의미합니다. 이를 이해하기 위해서는 먼저 순수 함수형 언어가 무엇인지 알아야 합니다.순수 함수형 언어란?순수 함수형 언어는 함수형 프로그래밍 패러다임을 따르는 언어로, 다음과 같은 특징이 있습니다:순수 함수: 동일한 입력에 대해 항상 동일한 출력을 반환하며, 함수 외부의 상태를 변경하지 않는 함수입니다. 즉, 부작용이 없습니다.불변성: 데이터는 한 번 정..
* typescript 시작. npm init -y npm install typescript npx tsc --init npm install typescript 를 해주면 node_modules/.bin/tsc 라는 바이너리가 설치된다. npx tsc 명령어는 이를 실행시킨다. 만약 .bin 에 해당 명령어가 없다면 npx 서버 측의 것을 가져와 실행한다. RegExp, setTimeout, console 등 기본 javascript 예약어 들 인식 못하는 것은 npm i -g typescript 하고 설정에서 typescript 실행경로를 Bundled 로 해주니 해결되었음. src/1.ts 생성. npx tsc 라고 입력하면 컴파일 된다. npm install lodash npm install @ty..
Avatar 라는 재사용 가능 컴포넌트를 만든다고 할 경우 속성값으로 ImageStyle 이나 ViewStyle 의 타입을 가진 속성값을 받을 것이다. 이때 타입을 지정해줄 때 이렇게 TextStyle, ViewStyle, ImageStyle 로 해도 되지만 이렇게 할 경우 style={[styles.x, styles.y]} 와 같이 배열로 입력할 경우 오류가 난다. 그래서 style: ViewStyle | ViewStyle[] 과 같이 해주면 이 오류는 사라진다. 하지만 또 다시 style={[style.x, boldText ? style.bold : undefined]} 와 같이 조건에 따라 달라지는 속성값을 넣어줄 경우 또 오류가 난다. interface Props { textStyle?: Text..
typescript 는 기본적으로 컴파일을 통해서 javacript 파일을 만든 다음에 Node.js 로 실행하는 방법이 있다. npx tsc 로 컴파일. node src/1.js 하면 실행. 이러한 방법은 귀찮을 수 있으므로 vscode 익스텐션을 이용하는 방법이 있다. 왼쪽 메뉴 중 네모네모를 클릭하여 code runner 라는 것을 설치. code runner 를 통해서 typescript 를 컴파일 하기 위해서는 ts-node 라는 것을 설치해야 한다. npm install ts-node 그리고 ts-node 를 사용하도록 설정을 해주어야 하는데 CMD + , 를 누르면 설정파일이 나온다. executorMap 이라고 입력. 가장 위의 것 클릭. "typescript": "node_modules/..
IntelliJ > preferences > editor > code style > typescript > spaces > within > ES6 import/export braces