TypeScript (5) 썸네일형 리스트형 TypeScript 사용 이유와 동작 원리 JavaScript의 한계 인터프리터 언어인 자바스크립트는 동적 타이핑언어이다. 동적으로 타입이 변환되기때문에 변수의 자료형에 제한이 없다. 자료형간의 연산의 경우 동적으로 타입이 변환되기 때문에 프로젝트의 규모가 커질 경우 의도하지 않은 에러가 발생할 수 있다. TypeSrcript의 보완점 JavaScript의 SuperSet 언어로, 타입에 대한 문법을 제공한다. JavaScript와 1:1 매칭되는 컴파일 언어이기때문에 JavaScript를 사용하는 곳이라면 TypeScript를 적용할 수 있다. 정적 타이핑 언어로 변수의 타입을 코드 실행전에 결정한다. 컴파일 시점에 타입체크를 진행하기때문에 런타임 이전의 논리적인 오류를 확인할 수 있다. TypeScript의 이점 인터페이스, 제네릭 등을 지원.. TypeScript-React 다룰 내용 1. 타입스크립트 프로젝트를 세팅하는 방법 및 Js프로젝트 -> Ts프로젝트 마이그레이션 방법 2. React에서 자주 사용하는 타입 타입스크립트 프로젝트를 세팅하는 방법 및 Js프로젝트 -> Ts프로젝트 마이그레이션 방법 Create React App 타입스크립트 프로젝트 세팅하기 폴더 생성(typescript-react) npx create-react-app . --template typescript "create-react-app 이라는 것을 사용해서 현재폴더에 프로젝트를 만드는데, 타입스크립트 템플릿을 사용하겠다." 는 의미의 명령어이다. 제대로 생성이 되었다면, tsconfig.json 파일과 함께 프로젝트가 생성된다. . 으로 현재폴더를 만드는 것 대신, 아래와같이 사용할 수도 있다.. TypeScript 자바스크립트는 인터프리터 언어, 동적 타이핑 언어이다. 인터프리터 언어 : 소스코드를 한 줄 씩 읽어서 실행하는 언어. 컴파일 언어 : 소스코드를 기계어로 바꿔놓고 실행하는 언어. 동적 타이핑 언어 : 변수의 자료형을 자유롭게 바꿔서 사용 가능함. 정적 타이핑 언어 : 변수나 함수에 타입을 지정하고, 그 타입만을 사용하는 방식. 자바스크립트의 동적 타이핑 언어적 단점으로 실수하기 쉽고, 실수를 발견하기 어렵다는 점이 있다. 이러한 단점을 보완하기위해 정적 타이핑을 지원하는 타입스크립트가 있다. 타입스크립트는 정적 타이핑을 지원하기때문에 실제 배포하기 전에 타입을 체크한다. 다룰 내용 TypeScript 프로젝트 생성 기본적인 타입 enum, interface, 타입 별칭 Union, Intersectio.. typeScript 프로젝트 생성 - VSCode 터미널에서 아래 명령어 입력으로 해당 폴더를 node 프로젝트로 만든다. // npm 은 package manager // package.json 생성 npm init -y // 타입스크립트 설치 npm i typescript // typescript 파일을 javascript파일로 바꾼다. npx tsc // tsconfig.json 생성 npx tsc --init // 타입검사한 내역이 터미널에 뜬다.(Editor사용 안할경우 계속 쳐서 봐야한다.) npx tsc --noEmit - txconfig.json 설정 // javascript 와 typescript 같이 쓰려면 "allowJs" 주석 풀기. "allowJs": true, // "strict" 옵션은 절대 false로 바꾸지.. typeScript 기본 지식 - typescript는 최종적으로 javascript로 변환된다. deno로 순전한 typescript 코드를 돌릴 수 있으나 대중화되지않음. 브라우저, 노드는 모두 js 파일을 실행. - typescript는 언어이자 컴파일러(tsc)이다.컴파일러는 ts 코드를 js로 바꿔준다. >> 컴파일러보다는 트랜스파일러가 더 맞는 표현이라고 하심 - tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다. >> 옵션을 읽고 internet ex 에서 돌리수있게도 설정할 수 있음(변환할 javascript 버전 설정 가능) - 단순히 타입 검사만 하.. 이전 1 다음
