BO의 개발로그

이전에 작성해 놓은 [TypeScript] 인터페이스(Interface)에서 '작성 중'으로만 적어놓고 넘어갔던 부분에 대한 질문을 받았다. 역시나 이래놓고 작성을 추가로 하지 않았기 때문에 말문이 막혔는데...// (OTL) 앞으로는 이런 일이 없게 이전에 작성한 포스팅을 검토하여 '작성 중'으로 되어 있는 부분을 수정하도록 하자. 그리하여 오랜만에 돌아온 TIL은 오답노트, type vs interface! 타입 별칭(type alias)처럼 인터페이스(interface) 역시 타입에 이름을 지어주는 수단이다. 타입 별칭과 인터페이스는 문법만 다를 뿐, 같은 기능을 수행한다. 둘 다 형태(shape)를 정의하며 두 형태는 서로 할당할 수 있다. 타입 별칭은 type이라는 키워드를 사용하여 타입에 이..

타입 호환성은 인터페이스를 공부할 때 꼭 짚고 넘어가야 하는 특성 중 하나이다. 타입 호환성은 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미하는 것인데, 아래 코드를 살펴보자. interface Restaurant { name: string; star: number; } let pinetree: Restaurant; // pinetree 변수 선언 let pinetreeWithAddress = { // pinetreeWithAddress 변수 선언하고 초기화 name: "대나무한정식", star: 5, address: "동대문", }; pinetree = pinetreeWithAddress; Restaurant 타입은 name과 star 두 가지의 프로퍼티만 있기 때문에 pinetree..

자바스크립트에서는 인터페이스가 존재하지 않지만, 자바, C, 타입스크립트와 같은 정적 타입 언어에서는 자주 사용되는 개념이다. 자바에서의 인터페이스는 클래스에서 꼭 구현해야 하는 메소드를 정의할 때 사용된다. 인터페이스는 상호 간에 정한 약속이나 규칙을 의미하는데, 타입스크립트에서의 인터페이스는 리액트 프로젝트에서 가장 많이 쓰이는 타입 중 하나로 인터페이스 변수, 함수, 클래스, 파라미터 등의 범주에서 약속을 정의한다. 주로 state와 props의 타입을 정의하는 데 사용한다. 1. 객체 타입 정의 인터페이스는 객체의 타입을 정의할 때 사용된다. function getInfo(restaurant: { name: string }) { console.log(restaurant.name); } getInf..

매번 변수를 선언할 때마다 타입을 일일이 정의하는 것이 번거롭다고 생각할 수도 있다. 그런 번거로움을 해결하기 위해 타입 추론이라는 개념이 존재한다. 정적 타입 언어는 원래 모든 변수에 정확히 타입을 정의하지 않으면 에러가 나지만, 타입스크립트에서는 타입을 표기하지 않아도 타입스크립트 컴파일러가 변수에 할당된 값을 보고 타입을 추측한다. let starArr = [1, 2, 3]; starArr.push('4점'); // 에러: Argument of type 'string' is not assignable to parameter of type 'number'. 위와 같이 starArr라는 변수에 숫자로만 된 배열을 정의하고, push 메소드를 활용하여 string을 배열에 넣어주려고 하면 string은 ..

💡 들어가기에 앞서, 콜론을 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. 1. Boolean 변수의 타입이 참, 거짓 형태의 불리언 값인 경우에는 아래와 같이 선언한다. let isLoggedIn: boolean = true; 2. Number 변수의 타입이 숫자인 경우에는 아래와 같이 선언한다. let num: number = 7; 3. String 변수의 타입이 문자열인 경우 아래와 같이 선언한다. let str: string = 'hello'; 4. Array 변수의 타입이 배열인 경우 아래와 같이 선언한다. let arr: number[] = [1,2,3]; 또는 아래와 같이 제네릭을 사용할 수 있다. (제네릭은 다음 포스팅에서 알아보자!..

목차 1. 함수 정의 1.1 함수 선언식 1.2 화살표 함수 2. 다양한 매개변수 타입 1. 함수 정의 타입스크립트에서는 함수의 타입을 정의해줘야 한다. 1.1 함수 선언식 함수 선언식의 타입 정의는 아래와 같다. function formatDate(d: Date): string { 1️⃣, 2️⃣ let year = d.getFullYear(); let month = d.getMonth() + 1; let day = d.getDate(); return `${year}년 ${month}월 ${day}일` } const today = formatDate(new Date()); 1️⃣ 매개변수의 우측에 콜론과 매개변수의 타입을 정의한다. → formatDate(d: Date) 2️⃣ return 값의 타입은..