🌊 Class TypeScript의 클래스는 JS의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다. 예를 들어 TS는 클래스 속성과 메서드에 대한 타입을 명시할 수 있다. class Student { // constructor를 이용하여 초기화하기 전에 상단에서 타입을 정으한다. name: string; age: number; private grades: number[]; // 외부로 드러내지 않는 값은 private 키워드로 명시한다. constructor(name: string, age: number, grades: number[]) { // 인자 타입 정의 this.name = name; this.age = age; this.grades = grades; } getAverageGrade(): n..

🌊 인터페이스와 타입 별칭 인터페이스 인터페이스는 객체의 구조를 정의하는데 사용되며, 객체가 특정 속성을 가지고 있음을 보장하는데 유용하다. interface Address { city: string; country: string; } interface Person { name: string; age: number; address: Address; } let john: Person = { name: 'ogu', age: 30, address: { city: 'Ogu city', country: 'Ogu Land' } } console.log(ogu.address.city); // 'Ogu city' 인터페이스 확장 인터페이스는 클래스처럼 확장이 가능하다. interface Color { name: str..

🌊 함수 함수 타입 선언 function sum(a: number, b: number): number { return a + b; } funrtion log(text: string):void { console.log(text) } 기본적으로 변수에 타입 선언을 했을 때와 동일하다. 함수의 반환 값이 없을 경우 :void를 사용한다. Optional parameter function sum(a: number, b?: number): number{ return a + b; } sum(10, 20) // 30 sum(10, 20, 30) // error sum(10); // 에러 없음 // b 파라미터에 ?를 붙여 optional parameter로 사용도 가능하다. Default parameter funct..

🌊 프로젝트 환경 구성하기 TS 설치하기 프로젝트 폴더 초기화하기 // yarn 사용시 yarn init -y // npm 사용시 npm init -y // -y는 사용자에게 추가 질문을 하지 않고 기본값으로 설정하는 옵션이다. 빠른 프로젝트 생성이 가능하다. 프로젝트를 할 폴더를 생성한 후 폴더 경로의 터미널에서 프로젝트를 초기화한다. 타입스크립트 설치 // --save-dev, --dev는 개발 종속성으로 패키지를 설치하는 옵션이다. // 타입스크립트는 개발 과정에만 필요하고 후에 JS로 컴파일링 할 예정이므로 dev 옵션으로 설치한다. // npm으로 설치할 시 npm install typescript --save-dev // yarn으로 설치시 yarn add typescript --dev tsc..

type Operator = 'add' | 'substract' | 'multiply' | 'divide' | 'remainder'; function calculate(operator: Operator, num1: number, num2: number): number { switch (operator) { case 'add': return num1 + num2; case 'substract': return num1 - num2; case 'multiply': return num1 * num2; case 'divide': return num1 / num2; case 'remainder': return num1 % num2; default: throw new Error('에러다옹'); } } Union Ty..

🌊 타입 추론 타입 추론 (Type Inference) let num = 59; num = 'ogu'; // Type 'string' is not assignable to type 'number'. // num = 'ogu'; 변수 num은 타입이 지정되지 않았지만 숫자열을 할당 할당했기 때문에 자동으로 number type으로 유추하기 때문에 다른 타입으로 재 할당하면 오류가 발생한다. 문맥상의 타이핑 (Contextual Typing) 표현식의 context를 사용하여 그 표현식에 대한 유형을 추론하는 것을 의미하는데, 이 기능은 함수의 매개변수, 표현식, 타입이 명시적으로 주어지지 않는 상황에서 유용하게 사용됩니다. type Animal = { name: string; age: number; } c..

🌊 Union type, Intersection Type Union Type Union Type은 자바스크립트 논리연산자 ||와 같은 의미다. type ValueType = number | string | boolean; function formatValue(value: ValueType): string { return String(value); } union type으로 만들어진 ValueType 덕분에 formatValue함수는 number, string, boolean를 안전하게 전달받을 수 있어 안정성을 제공할 수 있다. // any type 사용 function addPrefixAny(prefix: string, value: any) { return prefix + value.toString..

🌊 기본 타입 타입스크립트 첫 시작이다 뿌셔뿌셔 Boolean Number String Object Array → 자바스크립트에선 Object인데 타입스크립트에선 Array가 따로 있다. Tuple Enum Any Void Null Undefined Never :을 통해 자바스크립트 코드에 타입을 표기(Type Annotation)할 수 있다. String let name: string = 'Ogu'; Number 16진수, 10진수 외에도 ES6에서 도입된 2진수와 8진수를 지원한다. let age: number = 59; Boolean let isLoading: boolean = false; Undefined let name: undefined; // 이렇게 쓰는 경우는 거의 없으며 let name..