1. 클래스 문법 예제 class Person { private name: string; // private 접근 제한자를 사용하여 속성을 외부로부터 보호 protected age: number; // protected 접근 제한자를 사용하여 하위 클래스에서 접근 가능한 속성 constructor(name: string, age: number) { this.name = name; this.age = age; } public greet(): void { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } class Student extends Person { private studentId: number; con..
1. 숫자형 이넘 enum Response { No = 0, Yes = 1, TEST } function respond(message: Response): void { console.log(message) } respond( Response.Yes); 위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다. 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다. 2. 문자형 이넘 enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } 문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화해줘야 합니다. 문자형 이넘에는 숫자형 이넘과는 다르게 auto-incrementing이..
1. Union Type 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다라는 의미의 타입입니다. 아래 코드를 보겠습니다. function logText(text: string | number) { // ... } 위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있습니다. 이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부릅니다. Union Type의 장점 // # Union 타입 문법 - `any` 보다는 명시적임 function logMessage(value: string | number) { console.log(value); } function logMessage(value: string..
1. 타입 별칭 이란 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다 // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; //interface 레벨의 복잡한 타입도 가능 type Developer = { name: string; skill: string; } //타입 별칭에 제네릭도 사용할 가능 type User = { name: T } 2. type vs interface type 진영 타입스크립트에서 type과 interface는 객체를 선언할 때 매우 유사한 구조입니다. 논란의 여지가 있지만 대부분의 경우 일관되게 ..
1. 인터페이스란 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터 & 반환 타입 등) 배열과 객체를 접근하는 방식 (인덱싱 & 딕셔너리 패턴) 클래스 객체의 스펙 interface User { name: string; age: number; } const user:User { name: '오일'; age: number; } 함수의 파라미터 function getUser(user: User) { console.log(user); } 함수의 스펙 interface SumFunction { (a: number, b: number): num..
인덱싱 패턴 인덱싱 패턴은 배열(Array)을 기반으로 데이터를 저장하고 인덱스를 사용하여 각 요소에 접근합니다. 배열은 순서가 있는 컬렉션으로, 각 요소는 0부터 시작하는 인덱스를 가지며 순차적으로 저장됩니다. 예를 들어, 다음과 같은 배열을 생성할 수 있습니다: let array = [value1, value2, value3, ...]; console.log(array[0]); // 첫 번째 요소에 접근 console.log(array[1]); // 두 번째 요소에 접근 인덱싱 패턴은 순서가 중요하고 각 요소에 번호를 부여하여 접근하는 방식입니다. 배열은 인덱스를 기반으로 빠른 접근이 가능하며, 요소들을 반복하여 처리할 때 유용합니다. 딕셔너리 패턴은 자바스크립트에서 딕셔너리 패턴은 키-값 쌍으로 데..
1. 문자열, 숫자, 배열 function sum(a: number, b: number) { return a + b; } sum(10, 20); // sum('10', '20'); // 문자열 const str: string = "hello"; // 숫자 const num: number = 10; // 배열 const arr: Array = []; arr.push("hi"); // 배열 - 리터럴 적용 const items: string[] = []; // items.push(10); // 튜플 const address: [string, number] = ["판교", 40]; // 객체 const obj: object = {}; // obj.a = 10; // 타입 객체 const p..
1. 타입스크립트 설치 yarn add -D typescript 실행 npx tsc [파일명].ts 실행하면 [파일명].js 파일이 생성됨 2. 타입스크립트 설정 파일 npx tsc 명령어는 반복 실행 되는 것이라 실제 현업에서는 webpack이 자동으로 실행해주고 있음 프로젝트 루트에 tsconfig.json 설정 allowJs: 타입스크립트 컴파일 작업을 진행할 때 자바스크립트 파일도 포함될 수 있는지를 설정해주는 속성입니다. 주로 이미 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 속성입니다. checkJs: 활성화 되면 프로젝트에 포함된 모든 JavaScript 파일의 맨 위에 // @ts-check를 포함하는 것과 같음 noImplicitAny: tru..
