[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 <Component { ...pageProps } />;
}

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

TypeScript 설치 및 설정

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

 

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

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

 

 

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

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

Home