2/10 TIL

이 글을 쓰게 된 이유

• 우선적으로 현재 시장에서 많이 사용되고 있고 요구되는 기술스택이기 때문에 공부하게 되었다.

typescript란?

javascript는 Dynamic typing 기능이 있기 때문에 타입을 알아서 지정해주는 편리한 기능이지만 프로젝트 규모가 커지면 커질수록 어떤 타입의 값을 들어오는지 알기 어렵기 때문에 타입과 관련된 버그들이 발생하게 된다. 그래서 javascript 문법에 type을 지정하여 보다 명확한 값을 설정 할 수 있도록 도와주는 것을 typescript라 한다.

React/node.js에서 설치법

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

CRA 설치법

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

typescript 사용법

기본 타입 지정

let 이름 :string = 'kim' // 변수명 뒤에 :와 type을 적어준다. (number, string, boolean 등)
let 이름 :string[] = ['kim', ['park']] // array 타입 지정법
let 이름 :{age : number} = {age : number} // object 타입 지정법

let 이름 = 'kim' // type을 지정안했을 땐 에러메시지를 띄워준다.
let 이름 :string = 3 // type과 다른 type의 값이 들어오면 에러메시지를 띄워준다.

유니온 타입 지정

• 변수에 한가지 타입이 아닌 여러가지 타입의 값이 들어올 수 있다면 | 기호를 이용해 or 연산자를 표현할 수 있다.

let 이름 :string | number = 'kim'

literal type

• type 키워드를 이용하여 타입을 변수에 담아 사용을 할 수 있다.
• 대문자로 시작한다.

type NameType = 'kim' | 'park' ; //'kim'이나 'park'이라는 값만 들어올 수 있다.
let 이름 :NameType = 'kim'

함수 type 지정법

• 함수의 파라미터와 return 값의 type을 지정해줄 수 있다.

function 함수(x :number | string) {
	return x * 2
} // 에러메시지 띄워줌

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

• typescript는 지금 변수의 type이 확실하지 않으면 연산하지 않는다.
• 항상 들어올 값의 type을 체크하여 연산할 수 있게끔 narrowing 또는
  assertion 문법을 사용하여야 한다.

tuple 타입

• array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶을 때 사용

type Member = [number, boolean];
let semin :Member = [100, false]
// 대괄호[] 안에 들어올 자료의 type을 차례로 작성

object 타입의 정의가 길 때

• object 'key'값들이 생각보다 길어질 때는 type 키워드나 interface 키워드를 이용하여 변수에 담아 사용이 가능하다.
• 만약 특정 'key' 값이 유무를 정확히 알 수 없다면 물음표(?)를 기입하여 작성할 수 있다.

type Member = {
  name :string,
  age :number,
  phoneNumber? :number,
  address? :number,
}

object 'key'값을 모를 때

• object안에 어떤 속성이 들어갈지 모른다면 총괄적으로 묶어 타입지정이 가능하다.
• index signature라고 함.

type MyObject = {
  [key :string] : number,
}
let squareBox = {
	width: 40,
  	height: 40,
  	weight : 120,
}