타입스크립트 쓰는 이유 & 필수 문법 정리

Web/TypeScript

gorae_lulu 2023. 2. 10. 13:05

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다.

더 자세한 설명은 해당 강의를 참고하세요..

빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌

Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때

codingapple.com

자바스크립트는 Dynamic typing 을 지원하는 언어. 알아서 타입을 바꿔줌.

이런 자유도&유연성이 높은점이 큰 프로젝트에서는 단점으로 작용.

//javascript
5 - '3' //알아서 '3'을 숫자로 인식

그러나 타입스크립트는 이걸 전부 에러로 잡음. 엄격한 타입검사.

Nodejs 최신버전을 설치하고(안그럼 에러잦음) 터미널에 아래 명령어 입력(타입스크립트 컴파일러 설치).

npm install -g typescript

그 이제 폴더에 .ts파일 만들어서 타입스크립트를 작성할수있음.

또 하나 만들어야할것이 있는데 .tsconfig,json파일로 ts를 js로 컴파일 할 때 옵션을 넣음.

// .tsconfig.json
{
  "compilerOptions": {
        "target": "es5", // 버전
        "module": "commonjs", 
    }
}

ts파일로 돌아가 작성한 코드는 브라우저로 인식을 못하므로 js파일로 변환해야함.

터미널에서 아래 명령어 입력하면됨. 해당 기능을 끄지 않으면 ts를 자동으로 js로 컴파일!

tsc -w

이미 있는 React 프로젝트에 설치한다면,

작업폴더 경로에서 터미널 오픈 후 아래 명령어 입력.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

이러면 .js를 .ts파일로 바꿔서 이용가능함.

불안정하고 에러많음...

( yarn 1버전이 설치되어있으면 yarn add라는 명령어사용.

아님 처음부터 Typescript 적용된 React 프로젝트를 생성하는게 나을듯)

그냥 React 프로젝트를 새로 만들거면,

새로 작업폴더 하나만들어서 터미널 오픈 후 아래 명력어 입력.

npx create-react-app my-app --template typescript

작업폴더 경로에서서 터미널 오픈 후 아래 명력어 입력하면 라이브러리 설치됨.

vue add typescript

vue파일에서 타입스크립트쓰려면 아래처럼 lang 옵션을 켜두고 쓰면 알아서 잘 됨.(Vue 프로젝트 내에서도 tsconfig.json 파일 만들어서 설정도 자유롭게 가능)

<script lang="ts">
  
</script>

변수명 : 타입명 으로 쓰며, 해당 타입이 아닐 경우 에러.

let 이름 :string = 'kim';

변수 타입으로는 string, number, boolean, bigint, null, undefined,[], {} 등이 있음.

array 혹은 object 자료는 아래처럼 타입지정.

let 이름 :string[] = ['kim', 'park']  // 배열이고 배열안에 string만 담을 수 있음
let 나이 :{ age : number } = { age : number }  //객체는 name의 value로 string만 됨

다양한 타입이 들어올 수 있게 하려면, Union type 으로 지정.

let 이름 :string | number = 'kim'; //string 또는 number가 올 수 있음

타입은 변수에 담아서 쓸 수 있음.

type nameType = string | number;
let 이름 :nameType = 'kim';

함수를 만들 때도 타입 지정이 가능함. 파라미터와 return 값이 어떤 타입일지.

//number가 들어와야하고 number가 나와야하는 함수
function 함수명(x :number) :number{
  return x * 2
}

array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면

tuple 타입을 쓰는데, 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어준다.

type Member = [number, boolean]; //타입 지정을 배열로 지정함(첫번째 무조건 number, 두번째 boolean오도록)
let john:Member = [100, false];

object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능.(type 키워드 대신 interface 키워드를 이용히거나)

type MyObject = {
  name? : string, //특정 속성이 선택사항이면 물음표를 기입
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

class도 타입설정이 가능.

다만, 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능.

class Person {
  name;
  constructor(name :string){
    this.name = name;
  }
}