typescript

주로 온라인 에디터나 Vite를 통해 TypeScript를 사용했었다. 이번에는 TypeScript를 설치하고 실행 환경을 구성하면서 기본적인 설정과 사용 방법을 헷갈리지 않게 깔끔하게 정리하려고 한다.1.npm으로 타입스크립트 컴파일러 등 설치npm init으로 노드 js패키지를 초기화하고 타입스크립트가 node.js의 전역객체, 모듈의 타입 등을 알기 위해 @types/node를 설치합니다. ts-node는 ts파일을 바로 실행해 주는 도구로 tsc를 통해 ts파일을 js파일로 컴파일할 필요 없이 바로 실행해 주는 도구이다.npm initnpm i @types/nodenpm i typescript -gnpm i ts-node -g아래 명령어를 통해 타입스크립트 컴파일러가 잘 설치되었는지 버전을 확인한..

자바스크립트에서는 못 보던 enum이라는 사용자 정의에 자료형이 있습니다한국어로는 열거형(enumeration)이라고 합니다 enum은 여러 개의상수(변경되지 않는 일정한 값)를 관련된 걸로 그룹 하여 관리합니다1. 숫자형 enum숫자형 enum은 별도의 초기값이 지정되지 않으면 자동으로 0부터 시작해 1씩 증가하며 enum안에 항목들은 숫자값과 이름이 양방향으로 매핑되어 숫자, 문자열 모두 접근할 수 있다 enum Status { Ready, // 0 Working, // 1 Done // 2}console.log(Status.Ready); // 0 //문자로 불러옴console.log(Status[1]); // "Working"//배열처럼 인덱스로 불러옴consol..

1. interface란?(기본 사용법)인터페이스는 객체(참고로 자바스크립트는 객체기반언어)가 가져야 될 형태와 타입을 정의해 두는 것으로속성에 대해 어떻게 할 건지에 대한 세밀한 설명서 같은 느낌이다interface Player{ name:string; age:number; score():void; //void는 반환값 없음을 뜻함}let player:Player={ name:"kim", age:30, score(){ console.log("점수") }}player.age = 40 //player객체안에 age:30 키값이 age:40으로 변경console.log(player);console.log(player.age)player.score();inte..

요즘 프론트엔드 강의를 보면 타입스크립트를 안 쓰는 곳이 거의 없을 지경이라고 할 정도로 많이 쓴다. Next.js 설치할 때 매번 타입스크립트 쓸 거냐는 말에 찔려 공부해서 정리할 겸 포스팅하게 되었다.타입스크립트는 마이크로소프트에서 개발한 언어로 자바스크립트에 타입이 추가되었다고 생각하면 된다. 문자랑 숫자를 더해도 에러 안 뜨는 자바스크립트의 자유분방한 체계를 타입스크립트로 잡아주어 대규모 프로젝트에서는 코드의 구조화와 유지보수를 용이하게 할 수 있다고 한다.나온 지는 10년이 이미 넘었고 최근에는 타입스크립트 컴파일러와 도구를 Go 언어로 포팅하여 개선했다고 하네요 1. 타입스크립트 웹 에디터기본적인 문법을 간단히 익히거나 처음 사용하는거라면 간편하게 타입스크립트가 공식적으로 지원해 주는 것 같..