[typescript] VsCode에서 타입스크립트 실행방법

[typescript] VsCode에서 타입스크립트 실행방법

기본 설정

sudo npm install -g typescript tsc -v // typescript 버전 확인

Typescript 파일을 자바스크립트 파일로 바꿔서 실행하는 법

tsc [파일명].ts

타입스크립트 파일을 컴파일 해주는 명령어.

확장자(ts)까지 써줘야함.

타입스크립트 파일 바로 실행하는 법

sudo npm install -g ts-node // ts-node 설치 npm install --save-dev @types/node ts-node -v //ts-node 버전 확인 ts-node [파일명].ts // 실행

next환경에서 타입스크립트 실행하는 법

먼저 next-app을 init해줘서 next환경을 구축해준다.

npm init next-app

명령어를 입력한 후 프로젝트 명을 입력하면 새로운 폴더 안에 파일이 생성된다.

이때 프로젝트 명에는 공백이나 대문자가 있어서는 안된다.

프로젝트 명 newnext

이렇게 폴더트리가 생성이 되면 npm run dev로 잘 실행되는지 확인을 해준다.

잘 실행되었다면 위처럼 화면이 뜰 것이다.

실행을 확인을 했다면

npm install --save-dev typescript @types/react @types/node

이렇게 3가지를 설치한후 _app.js를 _app.tsx로 변경한다.

안의 내용을

import { AppProps } from 'next/app'; function App({ Component, pageProps }: AppProps) { return ; } export default App;

이렇게 작성해준다.

자바스크립트와 다른점은 next/app에서 AppProps를 가지고와 선언해줬다는것.

변경후 npm run dev를 하면 tsconfig.json이 생성되며 코드가 실행된다.

tsconfig.json에 대해 자세히 알고싶다면 아래 블로그 참고

https://velog.io/@ansrjsdn/TypeScript-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%84%A4%EC%A0%95

타입스크립트에서 styled-component 사용법

npm install --save-dev @types/styled-components

이렇게 styled-components를 받고 사용방법은 자바스크립트와 똑같이 사용하면 된다.

타입스크립트 인터페이스와 타입의 차이점

https://yceffort.kr/2021/03/typescript-interface-vs-type

from http://develop-famous.tistory.com/149 by ccl(A) rewrite - 2021-10-26 15:00:58