김기지의 코딩노트

대수 타입 여러개의 타입을 합성해서 새롭게 만들어낸 타입 합집합 타입과 교집합 타입이 존재한다. 🍥 합집합 - Union 타입 바 | 를 이용하여 유니온 타입을 정의한다. let a:string | number; // string 타입과 number 타입을 모두 넣을 수 있음 a = 1; a = "hello"; // boolean 타입의 값도 넣고 싶다면 추가하기 let b:string | number | boolean; 유니온 타입으로 정의된 변수에는 구성된 타입의 어떠한 값도 넣을 수 있다. 유니온 타입에 참여하는 타입들의 개수에는 제한이 없으므로 원하는 타입을 모두 추가할 수 있다. 🍡 Union 타입으로 배열 타입 정의하기 배열 타입 또한 유니온 타입으로 다양한 요소를 담을 수 있다. let ar..

🥐 객체 타입의 호환성 모든 객체 타입은 각각 다른 객체 타입들과 슈퍼-서브 타입 관계를 갖는다. 따라서 업 캐스팅은 허용하고 다운 캐스팅은 허용하지 않는다. type Animal = { name:string; color:string; }; type Dog = { name:string; color:string; breed:string; }; let animal:Animal = { name: "기린", color: "yellow", }; let dog:Dog ={ name: "만복이", color: "white", breed: "진도", }; // 업캐스팅 animal = dog; // 다운 캐스팅 dog = animal // ❌ Animal 타입의 변수 animal에 Dog 타입의 변수 dog를 할당하는..

🌧️ 타입 계층도 ☂️ 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']..