[Typescript]설치와 기본타입 정리(primitive types) (1)

타입스크립트 쓰는 이유

 

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

TS도 결국엔 JS이다 . 결과론 적으로 보면 TS은 JS의 상위 확장이다.
Javascript + Type = TypeScript 자바스크립트에 타입에 대한 내용을 확장시킨 것이 TS이다.
타입스크립트는 컴파일 이후에 자바스크립트가 된다. 

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

 

 자바스크립트는 타입에 관대합니다. 5 - '3' 이렇게 숫자와 문자를 연산해도 parseInt([1,2,3]) 숫자로 바꿔주는 함수에 뭔가 이상한걸 넣어도 아무런 제지가 없습니다.

 왜냐면 자바스크립트는 Dynamic typing 을 지원하는 언어이기 때문에 알아서 타입을 바꿔주기 때문입니다. 

 

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

 

느슨한 타입의 언어인 자바스크립트를 사용해 만든 프로젝트에서는 규모가 커질수록 코드가 복잡해지고, 디버그와 테스트 공수가 증가하는 문제가 있어 이런 자바스크립트의 단점을 극복하고자 AltJs(자바스크립트 대체 언어)인 타입스크립트를 사용한다.

 

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

쌩 자바스크립트는 애매한 에러메세지가 많은데 타입스크립트는 엄격한 타입룰 덕분에 왜 에러가 발생했는지  친절하게 알려줍니다. 그래서 언어보다는 일종의 에디터 부가기능그런거랑 비슷하다고 보면 됩니다. 

 

 

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

입력해주면 끝

 

타입스크립트 문법

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 이렇게 사용가능합니다.