TypeScript 필수문법 10분 정리와 설치 셋팅

타입스크립트(TS)를 쓰는 이유

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

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

 

자바스크립트는 타입에 관대하기 때문에 타입을 이상하게 연산해도 아무런 제지가 없음

알아서 타입을 바꾸어주기 때문에(자바스크립트는 Dynamic typing 을 지원하는 언어)

하지만 타입스크립트는 이러한 에러를 전부 잡아주어 타입스크립트를 사용하는 것

 

또한 타입스크립트를 쓰면 에러메세지도 더 정확해짐

JS같은 애매한 에러메세지가 많은데 TS는 엄격한 타입룰 덕분에 에러메세지를 더 친절하게 알려줌

 

일반 HTML CSS JS 웹개발시 TS 사용하기

이미 있는 React 프로젝트에 TS 설치

터미널에

 

yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

.js 파일을 .ts 파일로 바꿔서 이용가능함

 

React 프로젝트를 만들면서 TS 사용

yarn create react-app my-app --template typescript

 

타입스크립트 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';

 

 

기존 타입뿐만 아니라 나만의 타입을 만들어 사용가능함

원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있음

이것을 literal type이라고 부름

 

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

 

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

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

함수는 return 타입으로 void를 설정가능한데 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으로 사용가능함