⭐ TypeScript

• JavaScript + Type check = TypeScript
• Microsoft 에서 개발
• Javascript와 다르게 정적 타입 언어

정적 타입 언어
-컴파일시 에러가 발생하게 되면서 잘못 되었음을 알려줍니다.
-높은 진입장벽과 여러명이 작업하더라도 유지되는 생산성을 보입니다.

동적 타입 언어
-컴파일 단계 없이 프로그램이 구동될 때 타입체크가 됩니다.
-낮은 진입장벽과 혼자 작업할 때에는 높은 생산성을 보입니다.

💫 TypeScript 를 사용해야하는 이유

1. 동적 타입 언어의 경우 해당 타입이 어떠한 상황에 따라서 전체가 바뀌는 경우가 있습니다.

최초에는 Number 형태로 있다가 이후 String 값이 추가되면서 전체 Type 이 String 으로 변환되는 경우입니다.

Type 이 의도치 않게 변경되었기 때문에 알지 못하는 Undefined 에러 혹은 Type 에러 가 발생할 수 있습니다.

정적 타입 언어를 사용하게 된다면 컴파일 시 타입체크를 하게 되어있기 때문에 해당 에러들을 사전에 방지할 수 있습니다.

2. IDE 에서 제공되는 Type 추론

동적 타입 언어의 경우 컴파일을 하지 않기 때문에 해당 객체 내부에 어떤 프로퍼티가 있는지에 대해서 매번 찾아봐야합니다.

TypeScript 의 경우에는 이미 컴파일이 되어있기 때문에 IDE 에서 자동으로 찾아줍니다.

💫 Primitive Types

기본으로 제공해주는 타입을 Primitive Types 이라합니다.

• String : 문자열 Type
• Number : 숫자 Type
• Boolean : true, false 등
• null : 데이터가 없는 것
• enum : 열거형 데이터

🔹 선언 방법

const a:string = "Keep calm and code react-native"

변수 명을 선언한 뒤 :(콜론) 뒤에 해당 타입 명을 지정해 줍니다.

🔻 string, number, boolean

const a:string = 'Test code ${variable}` (OK)
const a:string = 0 (ERROR)
const a:number = 10 + 2 (OK)
const a:number = 10 + "2" (ERROR)
const a:boolean = a === 10 (OK)
const a:boolean = list.length (ERROR)

🔻 enum

enum COCLORS {
  Red,
  Blue,
}
const a:COLORS = COLORS.Red (OK)
const a:COLORS = 'red' (ERROR)

🔻 list

const strList:string [] = [""A"", ""B"", ""C""] (OK)
const numList:number[] = [0, 1, 2,"3"] (ERROR)

https://velog.io/@bi-sz/React에서의 TypeScript