출처: 이정환의 한 입 크기로 잘라먹는 타입스크립트 1. 인덱스드 엑세스 타입 (Indexed Access Type) : 객체 또는 배열에서 특정 요소의 타입을 가져오는데 사용됨.type PostList = { //interface 는 객체타입 정의에만 특화되어있기 때문에 배열을 정의하긴 불편 title: string; content: string; author: { id: number; name: string; age: number; };}[];function printAuthorInfo(author: PostList[number]["author"]) { //인덱스라고 부름 console.log(`${author.name}-${author.id}`);}const post..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트. 제네릭 인터페이스 & 제네릭 타입 별칭 정리. 제네릭 인터페이스 : 타입을 일반화 하여 다양한 타입을 받을 수 있는 인터페이스 interface KeyPair { key: K; value: V;}let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};`KeyPair` : 제네릭 타입 변수 (`K`, `V`)를 사용해 다양한 타입을 저장할 수 있도록 정의.인덱스 시그니처 : 객체의 key-value 구조에서 key의 타입을 특정할 수 없을 때 사용interface NumberMap { [key: string]: num..

인터페이스 (interface): TypeScript에서 객체의 구조를 정의하는 기능.클래스나 객체가 특정 솏성과 메서드를 포함하도록 강제할 수 있으며, 코드의 가독성과 유지보수성을 높이는 역할. 주요 특징 객체의 구조 (Shape)를 정의할 때 사용함수 시그니처 정의 가능`extends` 키워드를 통해 확장 (상속) 가능같은 이름의 인터페이스가 여러 번 선언되면 자동으로 병합됨 기본적인 인터페이스 선언  interface Person {   readonly name: string;   age?: number;   //sayHi: () => void; // 오버로딩을 구현할땐 함수 타입은 사용이 안됨   sayHi(): void; // 메소드의 오버로드 사용하고 싶을 땐 호출 시그니처로 작성해야 함.  ..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트 함수 오버로딩 ( Function OverLoading) 정리 함수 오버로딩이란 : 하나의 함수를 매개변수 개수 또는 타입에 따라 여러 개의 버전으로 정리하는 문법.같은 이름의 함수를 다양한 방식으로 호출할 수 있도록 함.C언어를 예시로 : 같은 함수 이름으로 매개변수의 개수만 다르게 사용하는 방법.//매개변수 없음void func() { printf("매개변수 없음");}// 매개변수 한개void func(int a) { printf("매개변수 없음");}// 매개변수 두 개void func(int a, int b) { printf("매개변수 없음");} 함수 오버로딩 구현 방법 1. 오버로드 시그니처 (Overload Signature)함수의 구현..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트서로소 유니온 타입 ( Disjointed Union Type ) 태그드 유니온(Tagged Union Type)라고 불린다: 교집합이 없는 완전히 다른 타입들을 하나의 유니온 타입으로 묶은 것. 서로소 유니온 타입의 특징1. 각 타입을 구별할 수있는 "태그" 필드 (`tag` 또는 `state` 등) 가 존재2. switch-case 문 또는 if-else 문으로 특정 타입을 쉽게 판별 가능. 예제 1. 사용자(user) 타입 type Admin = {  tag: "ADMIN";  name: string;  kickCount: number;};type Member = {  tag: "MEMBER";  name: string;  point: number..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트타입 단언 ( Assertion )타입 스크립트에서 " 이 변수는 내가 원하는 타입이야! " 라고 선언하는 방법. `값 as 타입` 형식으로 사용한다.  1. 기본 타입 단언  type Person = {  name: String;  age: number;};let person = {} as Person; // person을 Person 타입이라고 단언 person.name = "땅콩하우스";person.age = 27;  빈 객체 `{}` 를 `Person` 타입이라고 단언했지만, 속성을 직접 추가해야 정상적으로 사용 가능함.2. 타입 단언의 규칙`A as B` 사용 시, A가 B의 슈퍼타입이거나 서브타입이어야 함.-> 즉 ,관련 없는 타입끼리는 단언..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트TypeScript의 Enum(열거형) 타입.여러 개의 값을 하나의 그룹으로 묶고, 각 값에 이름을 부여하는 타입이다.// Enum 타입 열거형 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role {  ADMIN = 0, // 숫자 직접 할당 안해도 맨 위에 있는 것 부터 0번이 부여됨 그리고 그 아래는 +1 이 된다.  USER = 1, // 중간부터 숫자를 지정하게 되면 지정된 숫자부터 아래로 +1 된다.  GUEST = 2, // 이런 Enum을 숫자형 Enum이라고 부른다.}enum Language {  korean = "ko",  english = "en",}const user1 = {  name: "홍길동",..

출처 : 이정환의 한 입 크기로 잘라먹는 타입 스크립트  TypeScript는  ` : Type`(Type주석 Type Annotation) 이런 형태로 표기하여 내가 정의할 타입을 지정할 수 있다  원시타입 (Primitive Type) : 하나의 값만 저장하는 타입1. number// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN; 2.string// stringlet str1: string ="hello";let str2..

터미널에서 `tsc --init` 입력... 그러면 tsconfig.json 파일이 나오게 되는데  해당 파일은 TypeScript 프로젝트에서 컴파일러 옵션과 설정을 정의하는 파일임.  이제부터 우리가 해당 컴파일러 옵션을 설정해 보자. 1. include{  "include": ["src"]} 이렇게 설정해주면 src안에 있는 모든 파일을 동시에 컴파일 해줌. 이후 `tsc` 명령어만 입력하면 include안에 입력된 경로의 모든 파일을 컴파일해준다. 2. compilerOptions > target  "compilerOptions": {    "target": "ES5"  }, 이렇게 설정하면 컴파일되는 과정에서 js가 ES5로 설정이 됨. 즉 컴파일의 버전을 선택해서 사용할 수 있다. `ESNex..

출처 : 이정환의 한 입 크기로 잘라먹는 타입 스크립트 기본 환경 세팅 (터미널에 입력) 1. `npm init`2. `npm i @types/node` 이후 TypeScript 컴파일러 설치 1. `npm install typescript -g (global)` (윈도우)  `sudo npm install typescript -g` (맥) 오류 발생시 터미널 관리자 권한으로 실행 및 터미널 바꿔보기2. `tsc -v`  ( TypeScript 잘 설치됐는지 확인해보기 ) 파일 생성하기 project 폴더에 src 폴더 만들어주고 ts라는 확장자 이름으로 파일 생성 Ex: index.ts 파일 컴파일 하는 법 1.`tsc src/index.ts(파일명)`이렇게 하면 TypeScript로 작성한 타입이 변..