프론트엔드
-
@2023/09/17 안녕하세요 lika-7입니다오늘은TypeScript의 inteface가 무엇인지 정리하였습니다Interface란일반적으로 타입 체크를 위해 사용 합니다변수, 함수, 클래스에 사용할 수 있습니다.이를 통해 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지하도록 합니다.인터페이스와 클래스1. 유사점프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사2. 다른점직접 인스턴스를 생성 할 수 없음모든 메소드는 추상 메소드임, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않음무엇을 사용해야 할까?interface✅1. 특정 유형의 객체들이 동일한 속성을 가지고 있을 때 interface를 통해 쉽게 구현 할 수 있다 2. 타입 체크 용도라면 i..
Interface - 기본@2023/09/17 안녕하세요 lika-7입니다오늘은TypeScript의 inteface가 무엇인지 정리하였습니다Interface란일반적으로 타입 체크를 위해 사용 합니다변수, 함수, 클래스에 사용할 수 있습니다.이를 통해 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지하도록 합니다.인터페이스와 클래스1. 유사점프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사2. 다른점직접 인스턴스를 생성 할 수 없음모든 메소드는 추상 메소드임, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않음무엇을 사용해야 할까?interface✅1. 특정 유형의 객체들이 동일한 속성을 가지고 있을 때 interface를 통해 쉽게 구현 할 수 있다 2. 타입 체크 용도라면 i..
2023.09.17 -
@2023/09/17 안녕하세요 lika-7입니다이번 시간은 TypeScript의 타입 가드에 대한 내용을 정리하겠습니다타입 가드란타입 가드란 조건문 안에서 타입 범위를 한정 시켜주는 방법을 이야기합니다이를 이용해 컴파일러는 어떤 타입을 사용할지 단서를 얻게 됩니다타입 가드 사용 상황//TypeScript function logText(el: Element){ console.log(el.textContent) } const h1E1 = document.querySelector('h1') logText(h1E1)위의 코드에서 h1E1의 변수의 타입을 지정하지 않아서 코드상 에러가 생깁니다.//TypeScript function logText(el: Element){ console.log(el.textCon..
타입가드@2023/09/17 안녕하세요 lika-7입니다이번 시간은 TypeScript의 타입 가드에 대한 내용을 정리하겠습니다타입 가드란타입 가드란 조건문 안에서 타입 범위를 한정 시켜주는 방법을 이야기합니다이를 이용해 컴파일러는 어떤 타입을 사용할지 단서를 얻게 됩니다타입 가드 사용 상황//TypeScript function logText(el: Element){ console.log(el.textContent) } const h1E1 = document.querySelector('h1') logText(h1E1)위의 코드에서 h1E1의 변수의 타입을 지정하지 않아서 코드상 에러가 생깁니다.//TypeScript function logText(el: Element){ console.log(el.textCon..
2023.09.17 -
@2023/09/17 안녕하세요 lika-7입니다이번 시간은 TypeScript의 단언에 대한 내용을 정리하겠습니다단언이란단언이란 변수나 값의 타입을 개발자가 컴파일러에 명시적으로 알려주는 것을 말합니다.개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식입니다.단언 방법as 키워드 사용 단언//TypeScript const el = document.querySelector('body') el.textContent = 'Hello world!'위의 코드를 이용해 el.textContent에 문자열을 할당하려면 에러가 납니다에러 내용은 TypeScript가 보기엔 el은 HTMLBodyElement 일수도 있지만 null일수도 있다고 합니다.//TypeScript const el = docu..
단언@2023/09/17 안녕하세요 lika-7입니다이번 시간은 TypeScript의 단언에 대한 내용을 정리하겠습니다단언이란단언이란 변수나 값의 타입을 개발자가 컴파일러에 명시적으로 알려주는 것을 말합니다.개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식입니다.단언 방법as 키워드 사용 단언//TypeScript const el = document.querySelector('body') el.textContent = 'Hello world!'위의 코드를 이용해 el.textContent에 문자열을 할당하려면 에러가 납니다에러 내용은 TypeScript가 보기엔 el은 HTMLBodyElement 일수도 있지만 null일수도 있다고 합니다.//TypeScript const el = docu..
2023.09.17 -
@2023/09/17 안녕하세요 lika-7입니다오늘은 TypeScript의 타입 추론에 대한 내용을 정리하였습니다타입 추론이란TypeScript는 타입을 명시해야 하는 엄격한 문법을 사용해야 하는 언어입니다이에 변수의 타입을 지정해야 하는 어려움이 있습니다. 하지만 일일이 타입을 명시할 필요는 없습니다.TypeScript의 컴파일러가 자동으로 타입을 적용해주기 때문 입니다.이를 ”타입 추론”이라고 부릅니다타입 추론이 적용되는 부분컴파일러가 타입 추론을 하는 기준이 되는 변수가 3가지 있습니다.초기화 된 변수기본값이 설정된 매개변수반환 값이 있는 변수function add(a: number, b=2){ return a + b }위의 코드에서 a 매개변수에만 타입을 지정하였습니다b는 기본 값이 설정된 매개..
타입 추론@2023/09/17 안녕하세요 lika-7입니다오늘은 TypeScript의 타입 추론에 대한 내용을 정리하였습니다타입 추론이란TypeScript는 타입을 명시해야 하는 엄격한 문법을 사용해야 하는 언어입니다이에 변수의 타입을 지정해야 하는 어려움이 있습니다. 하지만 일일이 타입을 명시할 필요는 없습니다.TypeScript의 컴파일러가 자동으로 타입을 적용해주기 때문 입니다.이를 ”타입 추론”이라고 부릅니다타입 추론이 적용되는 부분컴파일러가 타입 추론을 하는 기준이 되는 변수가 3가지 있습니다.초기화 된 변수기본값이 설정된 매개변수반환 값이 있는 변수function add(a: number, b=2){ return a + b }위의 코드에서 a 매개변수에만 타입을 지정하였습니다b는 기본 값이 설정된 매개..
2023.09.17 -
@2023/09/17 안녕하세요 lika-7입니다오늘은 TypeScript의 타입을 정리하였습니다타입을 사용하는 이유우리가 TypeScript를 사용하는 이유는 JavaScript의 문법에 정적 타입을 명시 하기 위해 사용합니다. TypeScript의 타입은 변수, 상수, 함수 매개변수, 함수 반환값 등의 값의 종류나 형태를 정의하는 데 사용하는 중요한 개념입니다타입의 분류타입은 크게 2가지로 나뉩니다.자바스크립트에서 볼 수 있었던 타입과 볼 수 없던 타입으로 나뉩니다 자바스크립트에서 볼 수 있었던 타입✅1. 문자 2. 숫자 3. 불린 4. Null/Undefined 5. 배열 6. 객체 7. 함수 자바스크립트에서 볼 수 없었던 타입✅1. Any 2. Unknown 3. Tuple 4. Void 5. N..
타입@2023/09/17 안녕하세요 lika-7입니다오늘은 TypeScript의 타입을 정리하였습니다타입을 사용하는 이유우리가 TypeScript를 사용하는 이유는 JavaScript의 문법에 정적 타입을 명시 하기 위해 사용합니다. TypeScript의 타입은 변수, 상수, 함수 매개변수, 함수 반환값 등의 값의 종류나 형태를 정의하는 데 사용하는 중요한 개념입니다타입의 분류타입은 크게 2가지로 나뉩니다.자바스크립트에서 볼 수 있었던 타입과 볼 수 없던 타입으로 나뉩니다 자바스크립트에서 볼 수 있었던 타입✅1. 문자 2. 숫자 3. 불린 4. Null/Undefined 5. 배열 6. 객체 7. 함수 자바스크립트에서 볼 수 없었던 타입✅1. Any 2. Unknown 3. Tuple 4. Void 5. N..
2023.09.17 -
@2023/09/17 안녕하세요 lika-7입니다오늘은 TypeScript가 무엇인지 정리하였습니다타입스크립트란?💡타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 컴파일 해주어야 합니다타입스크립트를 쓰는 이유1.에러의 사전 방지타입스크립트는 변수형을 지정하여 에러를 미지 방지 할수 있습니다//JavaScript function sum(a, b) { return a + b; }//TypeScript function sum(a: number, b: number) { return a + b; }
타입스크립트란?@2023/09/17 안녕하세요 lika-7입니다오늘은 TypeScript가 무엇인지 정리하였습니다타입스크립트란?💡타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 컴파일 해주어야 합니다타입스크립트를 쓰는 이유1.에러의 사전 방지타입스크립트는 변수형을 지정하여 에러를 미지 방지 할수 있습니다//JavaScript function sum(a, b) { return a + b; }//TypeScript function sum(a: number, b: number) { return a + b; }
2023.09.17