23.05.30 웹개발_Typescript(타입, 함수, 연산자)

Yeondong Choe·2023년 5월 30일
0
post-thumbnail

회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각

웹개발_Typescript 수업 후기

오늘은 이미 필수가 되어버린 Typescript를 공부해보는 시간이였다. 필수가 되어버린만큼 기대도 했고 어렵진 않을까 걱정도 하였지만 공부하기전 찾아본 동영상들로인해 Typescript에 대한 두려움이 많이 사라졌었고 덕분에 마음을 넓게 열고 접근할 수 있었다.
내일 공부하는 부분이 조금더 어렵기도 하며 프로젝트를 시작할때 Typescript의 개발환경을 구축하는 세팅이 많이 어려워보였다. 또한 많은 시간을 들여서 직접 해봐야 한다고 하셨기에 차츰 시간을 투자해봐야할거같고 또 새로운 개념을 공부하게 되다보니 앞서 공부한 부분들도 잊어먹지 않도록 틈틈히 복습을 해야할거같았다.

기억나는 단어들 나열해보기

  1. Typescript란?
  2. type of Typescript
  3. 함수(named, arrow)
  4. 연산자(Union, Intersection)

1. Typescript란?

Typescript는 마이크로소프트에서 개발한 javascript의 상위 집합(Superset)언어이다.
javascript가 발전하면서 생긴 단점을 보완하기 위해서 등장했으며 javascript의 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어이다.

쉽게 말하자면 javascript로 웹 애플리케이션의 상호 작용이 증가하면서, 코드의 양이 늘어나게 되고 타입의 명시성 부족으로 예상치 못한 결과를 초래한다는 단점이 부각되며 보완하기 위해 등장한것이 typescript다.

Typescript의 사용으로 코드의 가독성과 유지보수성이 높아지고 객체지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다.

2. type of Typescript

Typescript는 javascript와 거의 동일한 데이터 타입을 지원한다.
1. Boolean 타입
2. Number 타입
3. String 타입
4. Array 타입
5. Tuple 타입
: 배열 요소의 index마다 타입을 표현하거나 개수를 고정할 수 있음
6. Object 타입
7. Any 타입
: 정확히 알지 못하는 타입을 표현해야할때, 변수에 값을 재할당하는 경우, 타입의 일부만 알고 전체를 알지 못할때 사용하며 엄격한 타입 검사를 진행하지 않기때문에 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않으며 이로인해 undefined가 반환된다.

3. 함수(named, arrow)

Typescript도 javascript와 마찬가지로 named 함수와 arrow 함수를 만들 수 있다.
함수를 표현할때 매개변수의 타입과 반환 타입을 명시해야 한다. 하지만 함수에 리턴값이 없다면 void를 사용하여 작성할 수 있다.

Typescript는 javascript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야하며 그렇지 않을때 에러가 난다. 또한 할당될 매개변수의 값을 정해놓을 수 있다.
혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에?를 붙임으로써 해결할 수 있다.

lastName에 ?를 붙임으로 들어와도 되고 없어도 되며 없을경우 undefined를 반환한다.

4. 연산자(Union, Intersection)

Typescript는 연산자를 이용해 타입을 정할 수 있다.
javascript에서 보았던 ||(OR)연산자나 &&(AND)연산자를 이용하여 만들 수 있다. |연산자를 이용한 타입을 유니온타입이라고 하며 &연산자를 이용한 타입은 인터섹션타입이라고 한다.

1) Union 타입
funtion printValue(value: number | string)

예시럼 적으면 value의 인자로는 number도 들어올 수 있고 string도 들어올 수 있다.

유니온 타입을 사용하면 타입을 추론할 수 있기 때문에 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있으며 코드의 가독성을 높일 수 있다는 장점이 있다.

유니온 타입 사용시 유의할 점으로 유니온 타입은 공통인 멤버에만 접근할 수 있다.

interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

예를들어 두개의 인터페이스를 생성하게 된다면 함수내부에서는 두개의 인터페이스가 공통으로 가지고 있는 프로퍼티인 name에만 접근할 수 있다. 만약 나머지 프로퍼티에도 접근하고싶다면 타입가드를 사용해야한다.

function askSomeone(someone: Developer | Person) {
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

in연산자는 객체의 속성과 이름을 함께 사용하여 Typescript내에 해당 속성이 객체 내에 존재하는지 여부를 검사하며 있다면 사용할 수 있다.

2) Intersection 타입

인터섹션은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법으로 &연산자를 사용한다.

interface Developer {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

askSomeone({name: '김코딩', skill: '웹 개발', age: 20})

유니온 타입처럼 타입가드를 사용하지 않아도 된다. 하지만 전달인자를 전달할 때 모든 프로퍼티를 보내줘야만 한다.

오늘은 Typescript를 살짝 찍어먹는 정도였다. 남은 이틀동안 짧게 Typescript를 공부하는만큼 개인적으로도 찾아보면서 이후에 있을 프로젝트에서 사용할 수 있을정도로 공부해야겠다. 내일도 화이팅!

profile
개발자 동동

0개의 댓글