FE/TypeScript 썸네일형 리스트형 FE/TypeScript [TS] React 컴포넌트를 TypeScript로 포팅하기 본 포스팅은 이미 JavaScript로 작성된 React App(프레임워크는 CRA)을 TypeScript로 포팅해보려고 한다. 그 중, 새로 알게된 점을 위주로 정리 차원의 포스팅으로 모든 코드가 나와있지 않다. 1. 라이브러리 설치 해당 프로젝트 터미널 내에서 npm을 사용하여 React 프로젝트에 필요한 라이브러리를 설치한다. @types/react와 @types/react-dom: React와 React DOM에 대한 TypeScript 타입 정의 파일 @typescript-eslint/eslint-plugin와 @typescript-eslint/parser: TypeScript 프로젝트에서 ESLint를 사용하기 위한 플러그인과 파서 (ESLint는 JavaScript와 TypeScript 코드.. FE/TypeScript [TS] 제네릭 / 데코레이터 제네릭(Generic) 제네릭은 C#과 Java와 같이 재사용이 가능한 컴포넌트를 생성하는 주요 도구 중 하나이다. 타입스크립트의 제네릭(Generic)은 코드 재사용성을 높이고 타입 안정성을 보장하는 기능이다. 제네릭을 사용하면 함수나 클래스를 작성할 때, 사용될 데이터의 타입을 미리 지정하지 않고, 이후에 함수나 클래스를 호출할 때 인자로 전달된 데이터의 타입에 따라 자동으로 타입을 추론하게 된다. 제네릭의 필요성 아래의 printLog 함수는 파라미터로 text를 받고 있으며, 반환 값으로 text를 리턴하고 있다. 이를 제네릭 없이 구현한다면 아래와 같이 구현할 수 있을 것이다. function printLog(text) { return text; } 첫 번째 함수는 printLog 함수에 특정 .. FE/TypeScript [TS] JavaScript를 TypeScript로 포팅 하기 열거형 JavaScript에서는 열거형(Enum)이 없다. 그러나 열거형을 흉내 낼 수는 있다. 다음은 JavaScript로 열거형을 흉내 낸 코드이다. const NumberColor = { RED: 0, GREEN: 1, BLUE: 2, }; const StringColor = { RED: 'red', GREEN: 'green', BLUE: 'blue', }; TypeScript로 포팅하면 아래와 같이 나타낼 수 있겠다. 에디터 HTML 삽입 미리보기할 수 없는 소스 인터페이스 에디터 HTML 삽입 미리보기할 수 없는 소스 인터페이스와 상속 실습 1 User 인터페이스를 상속받아 Student 인터페이스를 만들었다. Student 인터페이스에는 추가로 grade 프로퍼티가 작성되어야 하며, grade.. FE/TypeScript [TS] 타입 별칭 / 타입 추론 / 타입 단언 타입 별칭(Type Aliases) 타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것이다. 이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다. 타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성한다. JavaScript에서는 타입 별칭을 따로 지원하지 않으며, TypeScript에서만 지원된다. 아래의 코드를 보자. 원래 string이라는 타입이 존재하고 있었다. 이에 myString이라는 새로운 이름을 부여했다. 여기서 myString과 string은 동일한 의미를 갖게 된다. 즉, 타입을 정의할 수 있는 모든 곳에는 타입 별칭을 쓸 수 있다. type MyString = string; let str1: string = 'hello!'; //.. FE/TypeScript [TS] 열거형(Enum) / 인터페이스 / 클래스 / 상속 열거형(Enum) TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, 열거형을 흉내 낼 수는 있다. TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다. TypeScript에서 열거형은 다음과 같은 형태로 정의할 수 있다. 위 예제에서는 Color라는 열거형을 정의하고 있다. 열거형의 값은 Red, Green, Blue 세 개이다. enum Color { Red, Green, Blue, } 숫자형 열거형(Enum) 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다. 디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가한다. (auto-incrementing).. FE/TypeScript [TS] TypeScript 등장 배경 / 장점 / 데이터 타입 * TypeScript 등장 배경 * TypeScript 장점 * TypeScript의 데이터 타입 TypeScript(타입스크립트) TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어이다. 상위 집합 언어는 기존 언어의 문법, 기능 및 기능을 모두 포함하면서 추가적인 기능이나 문법을 제공한다. JavaScript에 정적 타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어이다. 정접 타입 검사는 JavaScript의 동적 타입 시스템에 비해 변수의 타입을 명시적으로 선언하고 타입 검사를 수행할 수 있게 해준다는 의미이다. 이는 개발자가 런타임에서 발생할 수 있는 타입 관련 오류를 사전에 감지하고 방지할 수 있게 한다. Java.. FE/TypeScript [TS] TypeScript 프로젝트 환경 구성하기 * VSCode 에디터를 이용해 TypeScript 언어로 세팅된 프로젝트 만들기 아직은 브라우저 콘솔 창에서 TypeScript 언어를 인식하기 어렵기 때문에, TypeScript로 코드를 작성하려면 사용하는 코드 에디터에 이를 세팅해야 한다. TypeScript 프로젝트 환경 구성하기 1. 프로젝트 폴더 생성 먼저 프로젝트 폴더를 생성한다. mkdir (폴더명) cd (폴더명) 2. 프로젝트 초기화 프로젝트 폴더를 생성하고 난 뒤 프로젝트 폴더 안으로 이동하여, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화한다. 프로젝트 내부에서 npm을 사용할 준비가 되었다. npm init -y npm init -y 는 npm을 사용하여 새로운 프로젝트 또는 패키지를 초기화할 때 사용되.. ⬆︎ 이전 1 다음
