[Typescript] 시작하기

2021. 3. 2. 14:18·💻 개발/언어
728x90
반응형

첫 설정

1. 커맨드에서 작업 파일로 이동한다.  yarn init 입력-> package.json 생성

2. 커맨드에 yarn global add typescript 설치

 

tsconfig.json 

1. tsconfig.json 파일 생성 

   -tsconfig.json은 이 파일에 TypeScript가 어떻게 JavaScript형식으로 바뀔 건지 설정하는 파일 

"module" : nodejs를 간단히 사용할 수 있고 다양한 걸 import 하거나 export 할 수 있게 사용

 

"target" : 어떤 버전의 JavaScript로 컴파일되고 싶은지 적는 것

 

"sourceMap" : 어떠한 sourceMap 처리를 하고 싶은지 나타냄

    -소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요?

정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다

 

"include" 컴파일 과정에서 포함할 파일의 배열을 적으면 된다.

 

package.json

분석:   

1. "name" : "TypeChain"이라는 폴더에 위치하고 

2. yarn start 커맨드 명령어 실행 시 "prestart" 실행 후 -> "start"명령어 실행 

3. node로 index.js 파일을 생성한다. 결과 -> index.js파일을 생성해주고  console.log("hello")를 만들어 보여주는 모습

TS 파일
js 파일

->3번이 가능한 이유: node.js는 TypeScript의 코드를 읽지 못하기 때문에 일반적인 JavaScript언어로 컴파일하는 작업이 필요하다

728x90
반응형

'💻 개발 > 언어' 카테고리의 다른 글

[Python] 어절수 조건에 일치하는 경우만 출력하기  (0) 2021.06.30
[Python] 여러가지 함수 input, output 정리  (0) 2021.06.29
[Python] pdf정제를 위한 코드를 짜면서 느낀점 / 회고  (0) 2021.06.29
[Python] pdf to text | Parsing 기본, 기초,시작 정규식(병기표현)  (0) 2021.06.23
[Typescript] 특징  (0) 2021.03.02
'💻 개발/언어' 카테고리의 다른 글
  • [Python] 여러가지 함수 input, output 정리
  • [Python] pdf정제를 위한 코드를 짜면서 느낀점 / 회고
  • [Python] pdf to text | Parsing 기본, 기초,시작 정규식(병기표현)
  • [Typescript] 특징
foodev
foodev
이것저것 개발과 이것저것 리뷰 합니다.
    반응형
    250x250
  • foodev
    개발 개맛집
    foodev
  • 전체
    오늘
    어제
    • 분류 전체보기 (109)
      • 🌟🙇🏻‍♂️ 꼭 읽어봤으면 하는 글 (4)
      • 💻 개발 (72)
        • 설정 및 세팅 (4)
        • DB&서버&네트워크&암호 (11)
        • React (0)
        • JPA, Querydsl (13)
        • 알고리즘 (7)
        • 언어 (15)
        • 프레임워크 (12)
        • HTML, CSS (10)
      • ✍🏻 (33)
        • 회고록 (15)
        • 독서록 (7)
        • 일지록 (10)
        • 세미나 (1)
      • 💡 리뷰 (0)
        • 제품리뷰 (0)
  • 블로그 메뉴

    • 홈
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    스냅샷과로그성
    nestjs pipe body
    창업패키지후기
    스냅샷방식
    db 날린 썰
    개발썰
    QueryDSL
    githubaction 라벨 배포
    typedi란
    해피해킹 방향키
    db 초기화
    스냅샷과히스토리성 차이
    서이추
    di의존성
    디비스냅샷
    스냅샷과 히스토리
    JPA
    typedi 동작원리
    githubaction 라벨 ci/cd
    해피해킹 커스텀
    해피해킹 키매핑
    db 날림
    di동작원리
    nestjs pipe
    azure ci/cd
    토이프로젝트개발일지
    validation failed (numeric string is expected)
    해피해킹 꿀팁
    di란
    해피해킹 카라비너
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
foodev
[Typescript] 시작하기
상단으로

티스토리툴바