Typescript에 대해서 알아보자

yousunzoo·2022년 10월 21일
0

Typescript

목록 보기
1/2

타입스크립트의 특징

컴파일 언어, 정적 타입 언어

JS는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다.
이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다.
코트 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 데이터 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다.
하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.

자바스크립트 슈퍼셋(Superset)

타입스크립트는 JS의 슈퍼셋, 즉 JS 기본 문법에 TS 문법을 추가한 언어이다. 따라서 유효한 JS로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.

객체 지향 프로그래밍 지원

타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

타입스크립트 사용을 고려해야 하는 이유

높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.

자바스크립트 호환

TS는 JS와 100% 호환된다. 따라서 프론트엔드 또는 백엔드 어디든 JS를 사용할 수 있는 곳이라면 TS도 쓸 수 있다. TS는 앱과 웹을 구현하는 JS와 동일한 용도로 사용 가능하다.

강력한 생태계

TS는 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 TS를 지원하며 VSCode를 비롯해 각종 에디터가 TS 관련 기능과 플러그인을 지원한다.

타입스크립트 기본 문법

기본 타입

타입스크립트는 다양한 기본 타입을 제공한다.
Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

  • 변수/함수에 타입 설정
const Add = (a:number, b:number) => a + b

변수에 : type을 지정해줘야 오류가 발생하지 않는다. 그리고 Add 함수에 숫자가 아닌 다른 타입을 작성하면 에러가 발생한다.

Tuple : 배열의 타입 순서와 배열 길이를 지정할 수 있는 타입.
let arr:[string,number] = ['aa', 100];
Enum : Number 또는 String 값 집합에 고정된 이름을 부여할 수 있는 타입. 값의 종류가 일정한 범위로 정해져 있는 경우에 유용하다. 기본적으로 0부터 시작하며 값은 1씩 증가한다.
enum Brands {
  Nike = '나이키',
  Adidas = '아디다스'
Any : 모든 데이터 타입을 허용.
Void : 변수에는 undefined와 null만 할당하고 함수에는 리턴 값을 설정할 수 없는 타입.
Never : 특정 값이 절대 발생할 수 없을 때 사용.

Interface

인터페이스는 타입을 정의한 규칙을 의미한다. Object 형식으로 작성한다.

interface User {
age : number;
name : string;
}

let person : User = {
  age: 26,
  name: 'Seon'
}

const getUser = (user : User) => {
console.log(user)}

getUser(person);

인터페이스 사용 방법


사용하고자 하는 변수나 함수 뒤에 :인터페이스명을 붙여주면 타입스크립트가 변수나 함수가 인터페이스와 일치하는 타입을 갖고 있는지를 체크한다.

스타일에 적용할 때는 스타일 컴포넌트 뒤에 <인터페이스명>을 작성하면 interfaceprops 값을 가져다 사용할 수 있다.

interface ContainerProps {
  bgColor: string;
  borderColor?: string;
}

const Container = styled.div<ContainerProps>`
background-color : ${(props)=>props.bgColor}
`

Optional Props

컴포넌트 속성에 필수값을 주고 싶을 땐 일반적으로 작성하면 되지만, 일부 컴포넌트에만 값을 주고 싶을 때는 interface에서 optional props로 지정하고 싶은 key 뒤에 ?를 붙인다. borderColor?: string을 입력하면 Circle 컴포넌트에 borderColor 값을 입력하지 않아도 에러가 발생하지 않는다.

borderColor 값을 지정해주지 않으면 undefined로 반환되는데, 값이 undefined일 때 기본으로 반환될 값을 지정해줄 수 있다.

function Circle({ bgColor, borderColor, text = "default text" }: CircleProps) {
  return (
    <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>
      {text}
    </Container>
  );
}

default Value를 주고 싶을 때

병합 연산자 "??"

{key ?? defaultValue} 형식으로 입력하여 key의 값이 있으면 원래의 값을 반환하고, undefined이거나 null이면 defaultValue 값을 반환

props 내에 defaultValue 지정

function Circle({bgColor, borderColor, text = "default text"}: CircleProps){} 형식으로 defaultValue를 줄 key="defaultValue"를 입력한다.

profile
프론트엔드 개발자가 되고 싶은 선주입니다.💻아직 갈 길이 멀지만 내 자신 아자아자 화이팅! ٩( ᐛ )و

0개의 댓글