김기지의 코딩노트

🌧️ 타입 계층도 ☂️ unknwon 타입 가장 상단에 위치하는 타입 모든 타입의 슈퍼 타입으로 모든 타입의 값을 담을 수 있다. // 업캐스팅은 가능 let a:unknown = 1; let b:unknown = "hello"; let c:unknown = true; let d:unknown = null; let e:unknown = undefined; // any 타입을 제외한 다운 캐스팅은 불가능 let unknownVar:unknown; // ❌ let num:number = unknownVar; // ❌ let str:string = unknownVar; // ❌ let bool:boolean = unknownVar; // ❌ // any 타입으로 다운 캐스팅은 가능 let any:any = u..

타입스크립트의 '타입'은 '집합'이다. 집합이란? 동일한 속성을 갖는 여러개의 요소들을 하나의 그룹으로 묶은 단위 여러개의 숫자 값들을 묶어 놓은 집합을 타입스크립트에서는 number 타입이라고 부른다. Number Literal 타입 오직 하나의 값만 포함하는 타입 number literal 타입 또한 하나의 값만 포함하는 아주 작은 집합이다. 20이라는 타입에 속하는 요소인 숫자 20은 숫자이기 때문에 이 집합 외에도 number타입이라는 거대한 집합에도 속하는 값이다. 즉, number literal 타입은 number 타입이라는 집합에 포함되는 부분 집합이다. 이러한 관계에서 다른 타입을 포함하는 타입을 슈퍼 타입(부모 타입), 어떤 타입에 속하는 타입을 서브 타입(자식 타입)이라고 한다. 이 관..

🍉 void 타입 아무런 값도 없음을 의미하는 타입 아무런 값도 반환하지 않는 함수의 반환값 타입 또는 변수의 타입을 정의할 때 사용한다. // 문자열을 반환하는 함수 function func1():string { return "hello" } // 아무런 값도 반환하지 않는 함수 function func2():void{ console.log("hello"); } // 변수에도 void 타입을 정의할 수 있음 let a:void; 단, void 타입의 변수에는 undefined 이외의 다른 타입의 값은 담지 못한다. 하지만 tsconfig.json에 엄격한 null 검사(strictNullChecks) 옵션을 해제(False)로 설정하면 특수하게 void 타입의 변수에 null 값을 담을 수 있다. //..

💫 Any 타입 특정 변수의 타입을 확실히 모를때 사용하는 타입 어떤 변수를 범용적으로 사용해야 한다고 가정해보자. 타입스크립트에서는 변수를 초기화할 때 변수의 타입을 추론하기 때문에 변수 anyVar에 문자열을 할당하면 오류가 발생한다. 이런 경우 any를 사용하면 자바스크립트에서처럼 변수의 타입에 상관없이 모든 값을 할당할 수 있다. let anyVar:any = 10; anyVar = 'hello'; anyVar = true; anyVar = {}; anyVar = () => {}; // 메소드도 자유롭게 사용할 수 있음 anyVar.toUpperCase(); anyVar.toFixed(); 또, any타입의 값은 어떤 타입으로 정의된 변수이던 문제 없이 다 할당할 수 있다. // 타입이 정의된 변..

🥑 열거형(Enum) 타입 타입스크립트에서만 사용할 수 있는 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입 열거형 타입은 여러개의 값을 나열하는 용도로 사용된다. 🎈 사용하기 enum 타입을 사용하면 역활과 같은 값을 분류할 경우 헷갈리지 않도록 분류할 수 있다. const user1 = { name : '김기지', role : 0 // 0

☁️ 타입 별칭(Type Alias) 타입 정의를 마치 변수처럼 하게 해주는 문법 여러 프로퍼티가 들어있는 객체를 여러번 선언하는 경우 타입을 모두 선언해주는건 매우 번거롭다. 이때 타입 별칭을 이용해 변수를 선언하듯 타입을 별도로 정의해서 사용할 수 있다. type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string; }; let user1: User = { id:1, name: "김기지", nickname: "kiji", birth: "1996.07.10", bio: "hello", location: "수원" }; let user2: User = { id:2, name: "기지"..

🌈 객체 타입을 정의하는 방법 1. object로 정의하기 객체를 의미하는 object로 타입을 정의한다. let user: object = { id: 1, name: "김기지" }; 그런데 여기서 user의 id를 꺼내면 문제가 발생한다. 이는 타입스크립트의 object 타입은 단순 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않기 때문이다. 따라서 이 타입은 객체의 프로퍼티에 대한 정보를 전혀 가지고 있지 않기 때문에 프로퍼티에 접근할 수 없다. 그렇다면 변수에 저장된 객체의 구조를 그대로 타입으로 만들려면 어떻게 해야할까? 객체 리터럴 타입을 이용한다. 2. 객체 리터럴 타입 중괄호를 열고 객체가 갖는 프로퍼티를 직접 나열해 만드는 타입 let user: { id: number, nam..

타입스크립트에서 배열 타입과 튜플 타입을 시용해보자!! 🍉 배열 타입 정의하기 배열을 저장하는 변수의 이름 뒤에 배열요소타입[ ] 형식 또는 Array 형식으로 배열 타입을 정의한다. (꺽쇠와 함께 타입을 작성하는 문법을 타입스크립트에서 '제네릭' 이라고 부른다.) 배열 요소의 타입이 string이거나 number일 것을 의미 이처럼 바(|)를 이용해 여러 타입 중 하나를 만족하는 타입을 정의하는 문법을 유니온(Union) 타입이라고 부른다. 🐾 다차원 배열 타입 정의하기 [ ]를 연달아 작성해 다차원 배열 타입을 정의한다. let doubleArr : number[][] = [ [1, 2, 3], [4, 5], ]; let doubleStr:string[][]= [ ['hello', 'welcome']..

타입스크립트의 기본 타입 (Basic Types) 타입스크립트가 자체적으로 제공하는 타입들 또는 내장 타입이라고도 할 수 있다. 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 '타입 계층도'를 살펴보자. null, undefined, number 등 흔히 알고 있는 타입 뿐만 아니라 any, void, never 같은 처음 보는 타입들도 존재한다. 이렇게 꽤 많은 기본 타입들이 제공되며 이런 각각의 기본 타입들은 서로 부모-자식 관계를 이루며 계층을 형셩한다. 🐾 실습 환경 설정하기 이전 시간에 설정한 옵션과 동일하게 설정한 후 타입스크립트 파일을 만들어 컴파일한다. // tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "..

🌵@types/node 설치하기 @types/node 패키지란? Node.js 내장 기능들의 타입 정보를 담고 있는 패키지 > npm i @types/node 📌 @types/node 패키지를 설치해야 하는 이유? 더보기 @types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 타입 정보를 가지고 있다. 때문에 설치하지 않으면 Node.js가 제공하는 console 등의 기본 기능들의 타입이 선언되지 않는다. 타입스크립트 코드를 실행하기 전에 타입 검사 과정을 거치는데, 이 과정에서 타입이 선언되지 않은 코드는 타입이 올바르게 사용되지 않았다고 판단되어 오류가 발생한다. 따라서 Node.js의 기본 기능들을 위한 타입을 별도로 선언하기 위해 @types/nod..