구조 분해 할당
TIL
구조 분해 할당은 배열이나 객체의 요소 및 프로퍼티들을 분해해 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식이다.배열배열의 구조분해는 인덱스를 이용해 인덱스의 순서대로 변수의 값을 할당한다.let colors = ["green", "blue", "purple"];let [c1, c2, c3] = colors;console.log(c1); // greenconsole.log(c2); // blueconsole.log(c3); // purple선언 분리 할당변수를 먼저 선언하고 나중에 구조 분해 할당으로 값을 할당할 수 있다.let c1, c2, c3;[c1, c2, c3] = ["green", "blue", "purple"];console.log(c1); // greenconsole.log(c2)..
[TS] 타입 추론 및 타입 정의 연습
TIL
1. 타입 추론let a = 10;const b = 20;const c = [1, 2];const d = [1, "hello", true];const e = [1, 2, 3] as const;type A = number;type B = number;type C = number[];type D = (number | string | boolean)[];type E = [1, 2, 3]; 2. 조건을 만족하는 타입 정의- Animal 타입은 Dog 타입일수도 Cat 타입일수도 있다.- DogCat 타입은 Dog이자 Cat이다.type Dog = { name: string; color: string; };type Cat = { name: string; age: number; };​​type Animal = Do..
[TS] 타입 추론
TIL
타입스크립트는 모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공한다.그러나 모든 상황에서 타입을 잘 추론하는 것은 아니다.이렇게 타입 추론이 불가능한 변수에는 암묵적으로 any타입이 추론되는데, 만약 엄격한 타입 검사 모드라면 이러한 암시적 any타입의 추론을 오류로 판단하게 된다.타입 추론이 가능한 상황상황 1: 변수 선언일반적인 변수 선언의 경우 초기값을 기준으로 타입이 잘 추론된다.let a = 10;let b = "hello";let c = { id: 1, name: "devmark", profile: { nickname: "고견", }, urls: ["https://devmark.tistory.com/"],}; 상황 2: 구조 분해 할당객체와 배열을 구조 분해 할당하는..
[TS] 대수 타입
TIL
대수 타입이란 여러개의 타입을 합성해서 만드는 타입을 말한다.합집합 (Union) 타입let a:" string | number | boolean;a = 1;a = "hello";a = true;유니온 타입으로 배열 타입 정의하기let arr: (number | string | boolean)[] = [1, "hello", true];유니온 타입과 객체 타입type Dog = { name: string; color: string;};type Person = { name: string; language: string;};type Union1 = Dog | Person;let union1: Union1 = { // ✅ name: "", color: "",};let union2: Union1 = {..
타입스크립트 타입 시스템: 계층과 호환성
Frontend
타입스크립트의 타입은 값들의 집합으로 이해할 수 있다.타입 계층도타입스크립트의 모든 타입은 계층 구조를 이루고 있다.최상위에는 unknown 타입(전체 집합)이 있고, 최하위에는 never타입(공집합)이 있으며, 그 사이에 다양한 타입들이 위치한다. 슈퍼타입과 서브타입슈퍼타입(부모 타입): 더 넓은 범위의 값을 포함하는 타입서브타입(자식 타입): 더 좁은 범위의 값을 포함하는 타입예를 들어,number 타입은 모든 숫자 값을 포함하고 20이라는 number 리터럴 타입은 오직 20만 포함한다. 따라서 number 리터럴 타입은 number 타입의 부분집합(서브타입)이다. 타입 호환성타입 호환성이란 A 타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것이다. 업캐스팅 (Up Cast)서브타입의 값을 슈..
[TS] void와 never
TIL
void 타입아무런 값도 없음을 의미하는 타입이다. 보통은 아무런 값도 반환하지 않는 함수의 반환값 타입을 정의할 때 사용한다.// 아무런 값도 반환하지 않는 void 타입function func1(): void { console.log("hello");}// func2의 함수의 반환값은 string 타입function func2(): string { return "hello";} void 타입에는 오직 undefined만 할당할 수 있다. never 타입불가능을 의미하는 타입이다. 보통 함수가 어떠한 값도 반환할 수 없는 상황일 때 해당 함수의 반환값 타입을 정의하는 데 사용된다.never 타입을 사용하는 경우1. 무한 루프function func3(): never { while (true) {}..
[TS] any와 unknown
TIL
any 타입타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않는다. 다음과 같이 변수 anyVar를 number 타입의 값 10으로 초기화 한 후, string 타입의 값 "hello"를 저장하면 오류가 발생한다.타입스크립트에서는 변수를 초기화할 때 초기화하는 값을 기준으로 변수의 타입을 추론하기 때문이다. 이 경우 any타입을 명시해주면 어떤 타입의 값이든 자유롭게 할당할 수 있다.let anyVar: any = 10;anyVar = "hello"; // ✅ 정상anyVar = true; // ✅ 정상anyVar = {}; // ✅ 정상anyVar = () => {}; // ✅ 정상anyVar.toUpperCase(); // ✅ 컴..
[TS] 타입 정의 연습
TIL
1. 조건을 만족하는 타입 정의- Nums : 숫자만 담을 수 있는 배열 타입- Colors : 문자열만 담을 수 있는 배열 타입- Coords : [숫자, 숫자] 형태의 배열만 허용하는 타입- Info : [숫자, 문자열] 형태의 배열만 허용하는 타입type Nums = number[];type Colors = string[];type Coords = [number, number];type Info = [number, string]; 2. Course 타입 구현온라인 강의 정보를 포함하는 객체 타입 Course는 다음의 프로퍼티를 가진다.- 문자열을 저장하는 name 프로퍼티- 숫자를 저장하는 price 프로퍼티- 숫자를 저장하는 student_cnt 프로퍼티- 문자열을 저장하는 author 프로퍼티-..
[TS] 열거형 타입
TIL
열거형 타입 (Enum)타입스크립트에서만 사용할 수 있는 특별한 타입으로, 여러개의 값을 나열하는 용도로 사용한다.숫자 열거형 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: "woodstock", role: Role.ADMIN, // 관리자};const user2 = { name: "snoopy", role: Role.GUEST, // 일반 유저};const user3 = { name: "jerry", role: Role.USER, // 게스트}; 다음과 같이 숫자값을 직접 할당하지 않으면 0부터 1씩 늘어나는 값으로 자동할당이 되는데,enum Role { ADMIN, // 0 할당(자동) USER, // 1..
[TS] 타입 별칭과 인덱스 시그니처
TIL
타입 별칭 (Type Alias)타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있다.type User = { id: number; name: string; nickname: string; mbti: string;}let user1: User = { id: 1, name: "유재석", nickname: "메뚜기", mbti: "ISFP",};let user2: User = { id: 1, name: "박명수", nickname: "벼멸구", mbti: "ISTP",}; 인덱스 시그니처 (Index Signature)객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법이다.type CountryCodes = { [key: string]: string;}..