Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함)

 

 

 

 

타입스크립트 쓰는 이유

 

웹개발자 채용공고보면 타입스크립트가 항상 보입니다.

규모가 좀 있는 곳들은 거의 타입스크립트를 요구스펙에서 빼놓지 않고 기입하는데

모른다고 그리 걱정할건 아닙니다. 왜냐면 정말 별거 없어서 그렇습니다. 

 

타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는

일종의 자바스크립트의 대용품입니다.

완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용가능한데 타입문법을 업그레이드해서 쓸 수 있습니다. 

 

 

왜냐면 자바스크립트는 타입에 관대합니다.

5 - '3' 이렇게 숫자와 문자를 연산해도

parseInt([1,2,3]) 숫자로 바꿔주는 함수에 뭔가 이상한걸 넣어도 

아무런 제지가 없습니다.

지가 알아서 타입을 바꿔주기 때문입니다. 

(멋있는 말로 자바스크립트는 Dynamic typing 을 지원하는 언어입니다)

 

 

근데 타입스크립트는 이런걸 전부 에러로 잡아줍니다.

이거 하나 때문에 쓰는 언어가 바로 타입스크립트입니다. 

 

코딩 꼰대들은 이런 생각을 할 수 있습니다.

"굳이?"

하지만 1. 코드 천줄 만줄 짜다보면 

2. 남이짜던 자바스크립트 수정할 일이 생기면 

생각이 달라질 수 있습니다. 

 

Dynamic typing은  쪼그만 기능들을 개발할 땐 편리하겠지만 여러분 큰 프로젝트할 때는 이런게 오히려 단점입니다. 

 type과 관련된 버그들이 많이 발생합니다. 

천재라서 버그 안만들 자신이 있다고요? 

하지만 남이 짠 더러운 코드를 수정할 땐 천재든 지니어스든 무소용입니다. 

남이 짠 코드에 뭔가를 더하거나 수정할 때 정말 알 수 없는 타입관련 버그들이 생길텐데

제발 타입스크립트로 만들어졌길 빌어야합니다. 

 

타입스크립트를 쓰면 에러메세지도 더 정확해집니다. 

쌩 자바스크립트는 "이거 좀 이상한데요나도 몰?루" 같은 애매한 에러메세지가 많은데

타입스크립트는 엄격한 타입룰 덕분에

"여기에 숫자가 들어와야하는데 문자쓰지마라 멍청아"

"님 토익 300점임? object에 apend() 그런건 없어요 append() 말한거 아님?"

이렇게 친절하게 알려줍니다.

그래서 언어보다는 일종의 에디터 부가기능있죠 그런거랑 비슷하다고 보면 됩니다. 

 

 

 

 

 

 

 

일반 HTML CSS JS 웹개발시 타입스크립트 사용하려면 

 

 

앞으로의 강의도 이 환경에서 타입스크립트를 사용해볼 것입니다. 

제일 간단하고 좋으니까요 

 

1. Nodejs 최신버전, VScode 에디터를 설치합니다. 

구글에 검색해서 둘다 설치합시다. Node.js는 LTS라고 써있는 버전이 좋습니다.

 

2. VScode 에디터에서 터미널을 오픈합니다. 

상단메뉴에 Terminal - New Terminal 누르면 됩니다. 

 

3. 터미널에서 입력합니다. 

npm install -g typescript

타입스크립트 컴파일러라는걸 설치하는건데 컴퓨터마다 한 번만 하면 됩니다.

 

 

 

4. 코드짤 작업폴더를 하나 만들어줍니다. 

- 요즘 Node.js는 한글 폴더명은 잘 안됩니다.

- 윈도우의 경우 onedrive 안에 만들지 맙시다.

 

 

5. 작업폴더를 에디터로 오픈합니다.

에디터에서 상단메뉴중에 File - Open Folder 누르고 방금 만든 작업폴더 오픈하면 됩니다.

오픈안하면 큰일남 

 

6. 그 다음에 작업폴더에 .ts로 끝나는 파일 만들고 타입스크립트 사용 시작하면 됩니다.

ts 파일은 js랑 똑같이 사용가능합니다.

다만 근데 웹브라우저는 ts 파일을 알아듣지 못하기 때문에

js 파일로 변환 작업을 해야합니다.

 

7. js 파일로 변환하려면 에디터에서 Terminal 새로 여신다음

tsc -w 입력해두면 얘가 자동으로 ts파일을 js 파일로 근처에 변환해줍니다.

 

8. 이제 HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 

당연히 .ts가 아니라 변환된 .js 파일을 사용하십시오. 

<script src="변환된파일.js"></script>

 

 

 

 

 

React 프로젝트에서 Typescript 사용할 경우 

 

 

1. 이미 있는 React 프로젝트에 설치하실거면

작업폴더경로에서 터미널을 오픈하신 후 

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

 

입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다.

근데 뭔가 많아서 불안정하고 에러도 많이날 것 같죠?

그러면 yarn 1버전이 설치되어있으면 yarn add라는 명령어 쓰든가 

그냥 애초에 처음부터 Typescript 적용된 React 프로젝트를 생성할 수도 있습니다. 

 

 

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

새로 작업폴더를 하나 만드시고 거기서 에디터와 터미널을 오픈한 다음 

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

입력해주면 끝입니다. 대시 두개임 

 

 

 

 

 

 

Vue 프로젝트에서 Typescript 사용할 경우

 

 

1. 작업폴더경로에서 터미널을 오픈하신 후 

vue add typescript

입력하면 라이브러리가 설치됩니다. 

 

 

2. 이제 vue파일에서 타입스크립트를 쓰려면 

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

이렇게 lang 옵션을 켜두고 쓰면 알아서 잘 됩니다.

Vue 프로젝트 내에서도 tsconfig.json 파일 만들어서 설정도 자유롭게 가능합니다.

 

 

 

 

 

 

타입스크립트 10분 정리 

 

let 이름 :string = 'kim'

변수를 만들 때 타입지정이 가능합니다. 

변수명 : 타입명 이렇게 씁니다.

타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있습니다. 

 

 

 

let 이름 :string = 'kim';
이름 = 123;

타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워줍니다.

덕분에 타입관련 버그들을 사전에 찾아 없앨 수 있습니다. 

 

 

 

let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age : number }

array 혹은 object 자료는 이렇게 타입지정이 가능합니다. 

 

 

 

 

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

이 변수에 여러가지 타입의 데이터가 들어올 수 있다면

| 기호를 이용해 or 연산자를 표현할 수 있습니다. 

위 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 됩니다. 

 

 

 

 

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

type 키워드를 이용해 타입을 변수처럼 담아서 사용가능합니다.

 

 

 

type NameType = 'kim' | 'park';
let 이름 :NameType = 'kim';

string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능합니다.

저렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있습니다.

literal type이라고 부릅니다. 

 

 

 

 

function 함수명(x :number) :number{
  return x * 2
}

함수는 파라미터와 return 값이 어떤 타입일지 지정가능합니다.

실수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 내줍니다. 

함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입입니다. 

 

 

 

 

//에러
function 함수명(x :number | string) {
  return x * 2
}

//가능
function 함수명(x :number | string) {
  if (typeof x === 'number'){
    return x * 2
  } 
}

타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없습니다.

항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줍니다. 

 

 

 

 

type Member = [number, boolean];
let john:Member = [100, false]

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

tuple 타입을 쓰면 됩니다. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됩니다. 

 

 

 

 

type MyObject = {
  name? : string,
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.

type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다. 

특정 속성이 선택사항이면 물음표를 기입가능합니다. 

 

 

 

 

type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

object안에 어떤 속성이 들어갈지 아직 모른다면

그냥 전부 싸잡아서 타입지정도 가능합니다. 

index signature라고 합니다. 

 

 

 

 

 

 

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

class도 타입설정이 가능합니다.

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

 

근데 문법만 정리했다고해서 코드를 잘 짤리가 없습니다.

영문법책 읽어봤다고 영어로 프리토킹 잘한다는 소리같군요 

다음 시간부터 보다 상세한 개념과 예제를 알아봅시다.