TIL - 220511

LEE JI YOUNG·2022년 5월 11일
1

TIL

목록 보기
9/9

TypeScript 셋팅 & 필수문법

타입스크립트란 ?

: 타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는 일정의 자바스크립트 대용품. 완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용하면서 타입문법을 업그레이드해서 쓸 수 있다.

  • 자바스크립트 : 타입에 관대하다. Dynamic typing 지원
  • 큰프로젝트 시 다양한 타입관련 버그를 예방하기 위해 타입스크립트를 쓴다. 타입스크립트는 언어보다는 일종의 에디터 부가기능처럼 볼 수 있다.

셋팅


일반 HTML CSS JS 웹 개발 시 타입스크립트 사용방법

  1. nodejs 설치 (최신버전으로)
  2. VScode 에디터 준비
  3. 터미널 오픈 후 npm install -g typescript
  4. 타입스크립트 설치한 폴더 내에
    index.ts , tsconfig.json 파일 생성
//tsconfig.json
{
  "compilerOptions" : {
    "target" : "es5", // 자바스크립트 몇버전으로 컴파일 할지 설정 (es5: 2010~, esnext: 최신자바스크립트 문법)
    "module" : "commonjs", // 자바스크립트 import 문법 언제적 자바스크립트 문법으로 바꿀지 설정
  }
}
  1. tsc-w : 브라우저는 js 파일만 읽을 수 있으므로 ts -> js로 변환시켜야함. 컴파일해야함. 컴파일시 사용하는 명령어로 터미널에 입력해두면 ts 파일을 js파일로 자동 변환시켜줌. 끄지말기!!
  • 컴파일할 때 옵션을 tsconfig.json에 설정한다.
  1. HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면
    <script src="변환된파일.js"></script>

리액트 프로젝트에서 타입스크립트 사용방법

  • 이미 있는 프로젝트에서 설치하는 경우 : 작업폴더 경로에서 터미널 오픈 후
    npm install --save typescript @types/node @types/react @types/react-dom @types/jest
  • 리액트 프로젝트 새로 만들 거면 :
    npx create-react-app my-app --template typescript

뷰 프로젝트에서 타입스크립트 사용할 경우

  1. 작업폴더 경로에서 터미널 오픈 후 vue add typescript : 라이브러리 설치
  2. vue 파일에서 타입스크립트 사용하려면 lang옵션을 켜두고 쓰면 됨.
  <script lang="ts"> 
  
  </script>
  • Vue 프로젝트 내에서도 tsconfig.json 파일을 만들어서 설정도 자유롭게 가능.

필수 문법

  • 변수타입지정 : let 이름 :타입지정 = 'kim';
    • 타입 : string, number, boolean, null, undefined, bigint, [], {} 등..
    • 예1 - string값만 들어가는 array >
      let 이름 :string[] = ['kim', 'park'];
    • 예2 - name이라는 key의 value에 string값만 들어가는 object >
      let 이름 :{name : string} = {name: 'kim'}
    • 예3 - name이라는 key가 들어갈지 안들어갈지 모르는 object >
      let 이름 :{name? : string} = {name: 'kim'}
    • 예4 - 이름이라는 변수에 string 또는 숫자가 들어간다. >
      let 이름 :string | number = 'kim';
      let 이름 :string | number = 123;
    • 자주쓰는 타입을 변수화 시킬 수 있다. 타입명은 파스칼로 씀. 일반변수와 차이를 둠.>
      type Name = string | number
    • 함수 >
      	function 함수 (x :파라미터타입) :리턴타입{
      		return x*2
      	}
      >```
    • array에 쓸 수 있는 튜플(tuple)타입 >
      	type Member = [number, boolean]; //첫번째는 number, 두번째는 boolean 값만 올수있다.
      	let john :Member = [123, true];
      >```
    • object에 쓸 키가 많은 경우 >
      	type Member = {
        	  [key :string] : string, // 글자로 된 모든 object 속성의 타입은 : string
          }
      	let john : Member = { name : 'kim' }
      >```
    • class문법 타입지정 >
      	class User {
            name :string;
            constructor(name :string){
          	  this.name = name;
            }
      	}
      >```
profile
프론트엔드 개발자

0개의 댓글