타입스크립트 세팅 및 필수문법

타입스크립트 쓰는 이유

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

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

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

왜냐면 자바스크립트는 타입에 관대하다.(Dynamic typing)
근데 타입스크립트는 이런걸 전부 에러로 잡아준다.

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

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

1. Nodejs 최신버전 설치 및 에디터 설치
2. npm install -g typescript
3. 웹브라우저는 ts 파일을 못 알아먹어서 js 파일로 변환 작업을 해주어야 함
4. terminal을 새로 연 후에 tsc -w 입력

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

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

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

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

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

타입스크립트 필수 문법

let 이름 :string = 'kim'

변수 만들 때 타입 지정 가능, 변수명: 타입명 식으로 작성
타입에는 string,number,boolean, bigint, null, undefined, [], {} 등이 있다.

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

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

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

변수에 여러가지 타입에 데이터가 들어올 수 있다면
| 기호를 이용해 or 연산자를 표현할 수 있다.

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

나만의 타입을 만들어서 사용 가능;
저 타입이 지정되어 앞으로 변수에는 kim 또는 park 만 들어올 수 있음
literal type이라고 부른다.

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

함수는 파라미터와 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 이렇게 사용가능하다.