Bang's

알고있으면 좋은 Typescript Tip✨ Property '' has no initializer and is not definitely assigned in the constructor. ts(2564) 위 오류는 2.7.2에부터 도입된 strict class checking으로 인한 오류이다. TypeScript 2.7에는 strictPropertyInitialization이라는 새로운 플래그가 도입되었다. 이 플래그는 클래스의 각 인스턴스 속성이 생성자 본문 또는 속성 이니셜 라이저에서 초기화되는지 확인하는 검사를 수행한다. tsconfig.json 컴파일러 옵션을 살펴보면 strictPropertyInitialization 옵션이 켜진 상태(true)인걸 볼 수 있다. 쉽게 말해, 이 옵션이 켜..

알고있으면 좋은 Typescript Tip✨ TypeScript Class vs JavaScript Class Typescript에서 사용되는 클래스의 기반은 Javascript이기 때문에 큰 차이는 없다. 다만 Typescript에서 만의 고유한 확장 기능들이 존재한다. (1) Class 작성 비교하기 자바스크립트 Class 문법 class Car { constructor (color) { this.color = color; } start() { console.log("start"); } } const bmw = new Car("red"); 타입스크립트 Class 문법 타입스크립트에서는 this.color 부분에 color라는 프로퍼티가 Car에 없다고 경고가 뜬다. 이런 경우 멤버 변수를 선언해줘야 ..

알고있으면 좋은 Typescript Tip✨ TypeScript vs JavaScript Typescript와 Javascript는 컴파일언어, 인터프리터 언어라는 차이가 있다. Typescript는 컴파일 언어, Javascript는 인터프리터 언어이다. (1) TypeScript의 컴파일러란 무엇인가? 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정을 의미를 가진다. 기존에는 C++나 Java와 같이 자체 타입 시스템을 가진 프로그래밍 언어에서 주로 다뤄지던 개념이었으나, 타입스크립트의 등장 이후로는 자바스크립트에서도 컴파일이라는 용어를 심심치 않게 들을 수 있게 되었다. 쉽게 말해, 타입스크립트 코드를 자바스크립트로 코드로 변환할 때 필요한 도구가 ..

알고있으면 좋은 Typescript Tip✨ 함수 반환 타입 (Function Return Types)이란? 함수 반환 타입은 문자 그대로 함수가 리턴(반환)하는 값의 타입을 말한다. 함수 반환 타입과, 실제 함수의 결과값의 타입이 다를 때 타입스크립트는 에러를 발생시킨다. function example(n1: number, n2: number): string { return n1 + n2; // 에러 발생 } (1) void 타입 정의 함수가 아무것도 반환하지 않을 때 사용한다. 즉, return 이 없을 때 사용한다. 아무것도 반환하지 않는 함수는 void 타입을 가지고, void 타입인 함수는 undefined를 리턴한다. VSCode에서 example 위에 마우스를 hover하면, 타입스크립트는 ..

알고있으면 좋은 Typescript Tip✨ 타입 단언 (Type Assertion)이란? 타입스크립트가 추론하지 못하는 타입을 as키워드를 통해 명시해주는 것이다. 실제 데이터 타입을 변경하지 않고 타입 에러가 나지 않게끔만 해준다. (1)as 키워드 정의 as 키워드는 '컴파일' 단계에서 타입 검사를 할 때 타입스크립트가 감지하지 못하는 애매한 타입 요소들을 직접 명시해주는 키워드라고 볼 수 있다. as 키워드는 오직 컴파일 단계에서만 실행되며 런타임 단계에서는 삭제된 채로 실행된다. function setRainfall(target: HTMLElement, rf: rainFallData){ const rainfallBefore: HTMLDivElement | null = target.querySel..

알고있으면 좋은 Typescript Tip✨ 유니온 타입(basic Union Type)이란? 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다. 쉽게 말해, 둘 이상의 다른 데이터 타입을 하나로 결합하는 방법을 제공하는 기능이다. 이것은 여러 타입 중 하나가 될 수 있는 변수, 매개변수 또는 속성을 정의하거나 표현할 때 유용하다. let myVariable: number | string; myVariable = 10; // 유효 myVariable = "Hello"; // 유효 myVariable = true; // 오류, boolean 타입은 유니온 타입에 포함되어 있지 않음 위의 예시에서myVariable은 숫자 또는 문자열 중 하나가 될 수 있다. 만약 다른 타입을 할..

알고있으면 좋은 Typescript Tip✨ 인터페이스(interface)란? 상호 간의 정의한 약속 혹은 규칙을 의미하는데, 쉽게 말하면 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. (1) 인터페이스 선언 interface User { age: number; name: string; } // 변수에 활용한 인터페이스 const name: User = { // 인터페이스 User의 구조와 같은 객체 구조를 만들지 않으면 문법 오류가 뜸 age: 33, name: 'Kim', } 인터페이스 생성 시 interface 키워드를 이용하여 생성한다. interface 선언시 이름은 대문자로 시작한다. 완성된 인터페이스는 타입처럼 사용 가능하다. 인터페이스를..

알고있으면 좋은 Typescript Tip✨ 기본 자료형 타입 선언 (basic data type) :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. (1) 문자형(String) // 문자형 선언 const str: string = 'hello world'; (2) 숫자형(Number) // 숫자형 선언 const num: number = 30; (3) 배열(Array) // 문자 자료형 배열 선언(제네릭 방식) let arr1: Array = ['강아지','고양이','토끼'] // 숫자 자료형 배열 선언(제네릭 방식) let arr2: Array = [1,2,3] // 숫자 자료형 배열 (리터럴 방식) let numbers: number[] =..

알고있으면 좋은 Typescript Tip✨ 타입스크립트(TypeScript) 개요 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다. `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다. 타입스크립트(TypeScript) 설치 및 세팅 기본적으로 node.js를 설치해야 한다. 공식 사이트 : https://nodejs.org/en 참고 사이트 : https://tiboy.tistory.com/718 (1) package.json 파일 생성 (프로젝트 폴더) npm init 또는 npm init -y : 기본 세팅 또는 디폴트 세팅으로 package.json파일을 생성해준다. (2) typescript 모듈 설치 np..