#코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무

필수 링크
https://bit.ly/3D9XCOz

시작하기

요번 코멘토 실무를 통해 React 정리 뿐만 아니라 Typescript를 공부하는 목표로 시작한 것이라 이렇게 블로그를 함께 적으며 진행해 나가고자 한다.

Typescript 란?

• Javascript에 타입을 부여한 언어
• Javascript에 확장된 언어이고 Javascript에 달리 브라우저에서 실행하려면 파일을 한번 변환(===컴파일)해주어야 한다

그럼 왜??? 써야될까?

1. Typescript는 프로그램을 실행시키기 전에 type을 기반으로 프로그램의 오류를 찾는다
2. Javascript는 존재하지 않는 프로퍼티의 접근을 허용 하지만 Typescript는 존재하지 않는 프로퍼티는 오타로 생각하여 잡아준다.

JS vs TS

1. JS은 동적타입 언어 vs TS 정적타입 언어

2. 타입에 대한 고민 X vs 변수 선언때마다 타입을 고민 O

3. 타입 오류가 런타임 시 발견 vs 타입 오류가 컴파일 시 발견

4. 코드의 양이 적을 때 생산성이 높다 vs 코드의 양이 많을 때 비교적 생산성이 높다

Typescript 문법 (1) 타입

좀 더 자세한 블로그 작성 예정

• any 타입

  알지 못하는 타입을 표현해야 할 때

  • 사용자로부터 받은 데이터
  • 서드 파티 라이브러리 같은 동적인 컨텐츠

• Null and Undefined

  • null 과 undefined는 다른 모든 타입의 하위 타입
    • 다른 타입과 함께 유니온 타입으로 정의할 때 많이 사용
    • --strickNullChecks를 사용하면,
      => null 과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능

Typescript 문법 (2)함수

좀 더 자세한 블로그 작성 예정

function sum(a: number, b: number): number {
  return a + b;
}

=> 매개변수와 함수의 반환 값에 타입을 추가
=> 반환 값에 타입을 정하지 않을 때 void 사용

Typescript 문법 (3) interface

좀 더 자세한 블로그 작성 예정

interface

• 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용
• 여러가지 타입을 갖는 property로 이루어진 새로운 타입을 정의하는 것과 유사

// 기본 
interface IUser {
  id: number;
  name: string;
  email: string;
  phone: string
}

// 옵션(필수조건이 아닌 선택조건)
interface IUser {
  id: number;
  name: string;
  email: string;
  phone?: string
}

// Readonly
interface IUser {
  readonly id: number;
  name: string;
  email: string;
  phone?: string
}

// Union type
interface IUser {
  readonly id: number;
  name: string;
  email: string;
  phone?: string | number;
}

type

• type 과 interface는 매우 유사한 기능
• 대부분의 프로젝트에서, 둘 중 어느 것을 사용해도 상관없는 경우가 많다!

type IUser = {
  id: number;
  name: string;
  email: string;
  phone?: string;
}

interface와 차이점1

1. interfece는 property 확장/추가가 가능하고, type은 안된다
2. interface는 하나의 형태로만 사용가능 / type은 union또는tuple 사용가능