TypeScript 썸네일형 리스트형 TypeScript 컴파일하기 (tsconfig의 이해) TypeScript를 설치하면 tsc 명령어를 통해 ts파일을 js파일로 컴파일 할 수 있다. tsc fileName.ts 1. 하나의 파일을 실시간으로 컴파일하기 (watch mode) tsc fileName.ts -w 2. 다수의 파일을 실시간으로 컴파일하기 먼저 tsconfig.json 파일을 생성해야 한다. 아래와 같이 입력한다. tsc --init 이제 파일명 없이 tsc만 입력해도 다수의 파일을 컴파일 할 수 있다. tsc 다수의 파일을 실시간으로 컴파일 하려면, 파일명 없이 watch mode를 실행하면 된다. tsc -w 3. 프로젝트 구조 정리하기 tsconfig.json의 compilerOptions 옵션들을 통해 프로젝트의 구조를 정리할 수 있다. outDir: 컴파일된 js파일을 저.. 더보기 [TypeScript] 대표적인 유틸리티 타입을 알아보자! 유틸리티 타입(Utility Types)은 하나의 type을 다양하게 변형하여 새로운 타입을 생성하는 것이다. 그 중 가장 대표적인 유틸리티 타입들을 알아보자. 1. Index Type 기존 타입의 key 또는 value에 접근하여 타입을 생성한다. 아래는 age와 gender 요소를 갖는 Animal 타입을 활용하여 다른 타입을 생성하는 예시이다. type Animal = { age: number; gender: 'male' | 'female'; }; type Age = Animal['age'];// number type Keys = keyof Animal;// 'age' | 'gender' type Person = { name: string; age: number; gender: Animal['gen.. 더보기 [TypeScript] 인터섹션 타입 Intersection Type 인터섹션 타입(Intersection Type)이란? AND 연산자와 같이 'A이면서 B이다' 라는 의미의 타입이다. 예를 들어, 인턴은 학생이면서 동시에 노동자이다. 아래와 같이 인턴 타입은 학생 타입과 노동자 타입의 요구사항을 모두 만족해야 한다. type Student = { name: string; score: number; }; type Worker = { employeeId: number; work: () => void; }; type Intern = Student & Worker; 결과적으로 인턴 타입은 아래와 같이 정의된다. { name: string; score: number; employeeId: number; work: () => void; } 더보기 [TypeScript] Type Alias와 Interface 비교 1. 어떻게 유사한가? 다음은 x좌표와 y좌표를 갖는 포지션을 두 가지 방식으로 정의한 것이다. type PositionType = { x: number; y: number; } interface PositionInterface { x: number; y: number; } 이렇게 정의하면 객체는 타입 또는 인터페이스를 따를 수 있고... const obj1: PositionType = { x: 1, y: 1, }; const obj2: PositionInterface = { x: 1, y: 1, }; 클래스 역시 타입 또는 인터페이스를 구현할 수 있으며... class Pos1 implements PositionType { x: number; y: number; } class Pos2 implement.. 더보기 [TypeScript] 제네릭을 사용하는 이유 먼저 함수 하나를 살펴보자. 문자열을 인자로 받아 그대로 반환하는 함수이다. const echoText = (text: string): string => { return text; } 만약 문자열이 아니라 숫자를 인자로 넣고싶다면 어떻게 해야할까? 혹은 불린값을 인자로 넣고싶다면? any 타입을 사용하면 되지 않을까? const echoText = (text: any): any => { return text; } 함수는 잘 작동할 것이다. 하지만 인자로 어떤 타입이 들어갔고, 어떤 타입이 반환되는지는 알 수 없다. 이럴 때 사용하는 것이 제네릭이다. T라는 문자로 인자의 타입을 제네릭하게 (포괄적으로) 표현했다. const echoText = (text: T): T => { return text; } 이.. 더보기 TypeScript로 이해하는 객체지향 목표 TypeScript로 짜여진 예시를 통해 객체지향의 핵심 개념 (캡슐화, 추상화, 상속, 다형성)을 모두 이해한다. Step1. 커피머신 클래스 만들기 커피머신에 필요한 변수와 함수에는 어떤 것들이 있을까? // 커피를 타입으로 선언 type Coffee = { shots: number; hasMilk: boolean; }; class CoffeeMachine { // 변수 선언 static BEANS_GRAM_PER_SHOT: number = 7;// 클래스 레벨 coffeeBeans: number = 0;// 인스턴스 레벨 // 커피머신 객체를 만들 때 호출되는 생성자 constructor(coffeeBeans: number) { this.coffeeBeans = coffeeBeans; } //.. 더보기 [TypeScript] 유니온 타입은 언제 사용하는가? 유니온 타입(Union Type)이란? OR 연산자와 같이 'A이거나 B이다' 라는 의미의 타입이다. 1. 여러가지 타입을 연결할 때 const printAge(age: string | number): void => { if (typeof age === 'number') { age.toFixed(); console.log(age); } if (typeof age === 'string') { console.log(age); } } 2. 타입 별칭 (Type Alias)를 통해 enum처럼 활용하기 타입 별칭이란 한마디로 '사용자 지정 타입'이다. 사용자가 커스텀으로 생성한 새로운 타입을 의미한다. type Direction = 'left' | 'right' | 'up' | 'down'; const move.. 더보기 TypeScript에서 추가된 함수 기능들! 1. 함수에 타입 더하기 // JavaScript const jsAdd = (num1, num2) => { return num1 + num2; } // TypeScript const tsAdd = (num1: number, num2: number): number => { return num1 + num2; } 2. 타입 추론 (Type Inference) 타입을 명시하지 않아도, 지정한 값을 통해 알아서 추론한다. let x = 3;// x의 타입을 number로 추론 x = true;// 에러 발생 const arr = [1, 2, 3]// arr의 타입을 number[]로 추론 arr.push('Noah')// 에러 발생 3. 옵셔널 파라미터 (Optional Parameters) JavaScript.. 더보기 이전 1 2 다음
