함수 타입 표현식타입별칭을 이용해 함수의 타입을 별도로 정의하는 문법을 함수 타입 표현식이라고 한다. [TS] 타입 별칭과 인덱스 시그니처타입 별칭 (Type Alias)타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있다.type User = { id: number; name: string; nickname: string; mbti: string;}let user1: User = { id: 1, name: "유재석", ndevmark.tistory.comtype Add = (a: number, b: number) => number;const add: Add = (a, b) => a + b;Operation 타입을 정의하고, 이를 add 함수의 타입으로 지정했다. add 함수의..

함수 타입 정의함수의 타입은 매개 변수와 반환값의 타입으로 결정된다.기본 함수 타입function func(a: number, b: number): number { return a + b;}매개변수 a와 b는 number타입이고, 반환값도 number타입이다. 함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략해도 된다.function func(a: number, b: number){ return a + b;} 화살표 함수 타입const add = (a: number, b: number): number => a + b;const add = (a: number, b: number) => a + b; 매개변수 타입 정의매개변수 기본값 설정함수의 매개변수에 기본값이 설정되어 있으면 타입이 자..

1. 타입 단언person 변수에 빈 객체 할당하기type Person = { name: string; age: number;};let person: Person = {};​let person = {} as Person; 2. 타입 단언을 이용한 함수 호출에서의 오류 해결함수 giveMe10 호출에서의 오류 해결하기let value = 10;giveMe10(value);function giveMe10(value: 10){ return value;}​let value = 10 as const;giveMe10(value); 3. 조건을 만족하는 타입 정의- CompanyMember 타입을 Boss와 Employee의 서로소 유니온 타입으로 정의할 것type Boss = { car: string; };t..

서로소 유니온타입은 교집합이 없는 타입들 즉, 서로소 관계에 있는 타입들을 모아 만든 유니온 타입을 말한다.사례 1: 회원 역할 분류type Admin = { name: string; kickCount: number;};type Member = { name: string; point: number;};type Guest = { name: string; visitCount: number;};type User = Admin | Member | Guest;function login(user: User) { if ("kickCount" in user) { // Admin console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`); } el..

타입 좁히기 (Type Narrowing)조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법을 말한다.function func(value: number | string){ value.Fixed(); // ❌ value.toUpperCase(); // ❌}위 코드에서 value는 number 또는 string 타입일 수 있기 때문에, toFixed()(number 메서드)와 toUpperCase()(string 메서드)를 바로 사용할 수 없다. 따라서 다음과 같이 조건문을 이용해 value의 타입을 보장해줘야 한다.function func(value: number | string){ if (typeof value === "number"){ console.log(v..

타입 단언이란값 as 타입을 이용하면 특정 값을 원하는 타입으로 단언할 수 있다.type Person = { name: string; age: number;};let person: Person = {};person.name = "woodstock";person.age = 345;위와 같이 변수 person은 Person 타입으로 정의되었지만 초기화 할 때에는 빈 객체를 넣어두고 싶다고 가정할 경우, 타입스크립트는 이를 허용하지 않는다.Person 타입은 name과 age 프로퍼티를 필수로 요구하지만, 빈 객체 {}에는 이 속성들이 없기 때문에 타입 오류가 발생하는 것이다. 이럴 땐 다음과 같이 빈 객체를 Person 타입이라고 단언해주면 된다.이제 타입스크립트는 빈 객체를 Person 타입으로 인식하..

웹이란웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.웹에서 HTML로 작성된 페이지를 웹 페이지라고 하며, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부르는데 웹 사이트는 보통 HTML, CSS, Javascript로 이루어져 있다.웹 사이트의 구성HTML (Hyper Text Markup Language)브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 한다. CSS (Cascading Style Sheet)웹 페이지의 요소들을 꾸며주는 역할을 한다. JavaSCript웹 페이지의 요소들을 생성, 삭제, 변형하는 역할을 한다. 그렇다면, 자바스크립트는 어떻게 HTML로 작성된 웹 요소에 접근해 웹 페이지를 동적으로 만들고 변형시킬 수..

... 문법은 사용 위치에 따라 spread 또는 rest로 동작한다. spreadspread 연산자는 배열이나 객체를 펼쳐서 개별 요소로 분리한다.사용 시점객체나 배열을 복사하거나 합칠 때함수 호출 시 배열의 요소를 개별 인수로 전달할 때 객체 복사 및 확장const toy = { type: "bear", price: 15000,};const blueToy = { ...toy, color: "blue",};const yellowToy = { ...toy, color: "yellow",};console.log(blueToy); // { type: 'bear', price: 15000, color: 'blue' }console.log(yellowToy); // { type: 'bear', pri..

구조 분해 할당은 배열이나 객체의 요소 및 프로퍼티들을 분해해 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식이다.배열배열의 구조분해는 인덱스를 이용해 인덱스의 순서대로 변수의 값을 할당한다.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)..

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..