타입스크립트

[TypeScript] 타입스크립트 개념

타입스크립트 언어의 기본 사용법과 문법은 자바스크립트와 동일하다. 하지만 타입을 추가적으로 선언 타입스크립트 사용 이유 동적인 자바스크립트를 정적으로 타입 선언으로 컴파일 시, 에러를 사전에 잡아준다. 에러 메세지가 구체적이고 자세하게 나온다. 리액트 + TS 리액트 + TS는 기존 리액트와 구조는 동일하다. 여기서 state, props, function, event 등에 타입을 선언해준다는 점이 기존 리액트와의 차이점이다. state 우선 리액트에서 state는 컴포넌트 내부에서 변경되고 사용되는 변수(상태 값)를 말한다, 이 상태 값들을 리액트 룩으로 관리가 된다. const [changeS, setChangeS] = useState(false); useState 뒤에 상태 값의 타입을 선언해주면 ..

[TypeScript] TypeScript 란?

TypeScript JavaScript에 타입(형식)을 부여하여, 코드가 의도대로 바르게 동작하도록 도와주는 JavaScript 확장 버전 TypeScript의 필요성 타입을 지정해, 변수선언과 인자전달에서 발생하는 버그를 최소화한다. ES6로 작성된 코드를 ES5로 바꾸어 준다. (컴파일 할 때) TypeScript 설치하기 (Node.js 패키지로 설치) npm install --save-dev -g typescript // --save-dev : devDependencies에 리스트 추가 // -g : 글로벌 설치 TypeScript 프로젝트 만들기 (설정 파일 생성) // 글로벌 설치시 tsc --init // 로컬 설치시 ./node_modules/.bin/tsc --init 설정 파일 수정하기..

[TypeScript] 타입스크립트 기본 문법

기본타입 타입스크립트는 다양한 기본 타입을 제공한다. Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 변수에 타입 설정 let str: string = 'hi'; let num: number = 100; let arr: Array = [1, 2, 3]; let arr2: number[] = [1, 2, 3]; let obj: object = {}; let obj2: { name: string, age: number} = { name: 'hoho', age: 22 }; 함수에 타입 설정 function add(a: number, b: number): number { return a+b; } //옵셔널..

[TypeScript] 자바스크립트 타입스크립트로 전환

자바스크립트 프로젝트를 타입스크립트로 전환하는 법 유효한 자바스크립트는 유효한 타입스크립트이며 타입스크립트는 모든 타입을 명시적으로 선언하지 않아도 최선을 다해 타입을 추론하려고 한다. 이러한 사실은 자바스크립트를 타입스크립트로 점진적, 단계적으로 전환할 수 있음을 의미한다. 1. 비주얼 스튜디오 코드(VSCode)로 자바스크립트 페어링 비주얼 스튜디오 코드에는 편집기 또는 특정 작업 영역(프로젝트)에 대해 자바스크립트에서 타입스크립트 검사를 활성화 할 수 있는 설정이 포함되어 있다. ..vscode/setting.json에 다음 코드를 추가할 수 있다. { "Javascript.implicitProjectConfig.checkJs":true } 이제 타입이 안전하지 않은 줄에는 에디터에서 해당 코드를 ..

[TypeScript] 프론트엔드 프레임워크/라이브러리와 타입스크립트

리액트(React) 리액트와 타입스크립트의 호환성을 비교적 좋은 편이다. 최근 들어 많은 개발자들이 리액트와 타입스크립트 조합을 선택하고 있다. 리액트 공식 홈페이지에서는 타입스크립트를 사용하기 위한 가이드를 제시하고 있다. 페이스북에서 공식적으로 배포하는 리액트 웹 개발용 보일러 플레이트인 Create React App은 간단한 옵션 추가만으로 타입스크립트를 사용할 수 있도록 지원한다. 보일러 플레이트 : Boilerplate, 구조·설정 작업을 자동으로 진행해주는 도구이자 명령어 뷰(Vue.js) 뷰 2.0에서는 타입스크립트를 사용할 수 있지만 몇몇 라이브러리의 도움을 받아야 하거나 구현 자체가 안되는 문제도 다수 있었다. 뷰 3.0부터는 타입스크립트를 공식 지원한다. 뷰 3.0 CLI(Command..

[TypeScript] 타입스크립트의 특징

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어다. 타입스크립트의 특징 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다. 자바스크립트 슈퍼셋(Superset..