[💻 코드스테이츠 FE 44기]TypeScript - 1

✔️ 시작

TypeScript 환경 구성, 타입, 함수, 연산자 활용 타입에 대해 학습했다.

---

📍 알게 된 것

✔️ TypeScript

• 마이크로 소프트에서 개발한 JavaScript의 상위 집합(Superset)언어이다.
• JavaScript에 정적 타입 검사와 클래스 기반 객체지향 프로그래밍 등의 기능을 추가해 개발된 언어이다.

JavaScript가 발전하면서 생긴 단점(타입의 명시성이 부족한 단점으로 인해 예상치 못한 결과를 초래한다.)을 보완하기 위해 등장했다.

장점

• 정적타입 검사 기능 제공
• 코드의 가독성과 유지 보수성을 높여준다.
• 런타임 에러 최소화
• 코드 작성 시간 단축
• 협업시 코드의 가독성을 높을 수 있다.
• ES6 문법 포함한 최신 JavaScript 문법 지원
• 인터페이스(interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공해 객체 지향 프로그래밍을 보다 쉽게 할 수 있게 도와준다.

✔️ TypeScript 설치

1. 파일 생성 후 설치

npm install typescript --save-dev

2. tsconfig.json 파일을 생성 후 해당 코드 붙여 넣기

//tsconfig.json
//compilerOptions 내의 속성은 커스텀 할 수 있다.
{
  "compilerOptions": {
    "target": "es6", // 버전을 나타낸다.
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

3. 파일 확장자는 ts로 저장해야 한다.

✔️ TypeScript의 타입

Boolean(불리언) 타입

• JavaScript와 동일하게 참(true), 거짓(false)값이다.

let isShow: boolean = true;
let isDone: boolean = false;

Number(숫자) 타입

• 정수와 실수 구분없이 Number 타입 하나로 표기(TypeScript는 bigint를 지원한다.)

let number1: number = 5;
let number2: number = 0.7;

String(문자열) 타입

• 큰따옴표("), 작은 따옴표('), 백틱(`)로 문자열을 표현한다.

let firstName: string = "jieun";
let lastName: string = 'choi';
let longString: string = `템플릿 리터럴은 둘 줄
이상 작성이 가능합니다.`

Array(배열) 타입

• 두가지 방법으로 배열 타입을 선언해 사용할 수 있다.
• 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있다.
• 타입을 혼용해서 작성하는 것은 불가능 하다.

//첫 번째 방법 : 요소들을 나타내는 타입 뒤에 [] 작성
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법 : Araay<요소 타입> 제네릭 방법으로 작성
let numberList: Array<number> = [4, 7, 100];

Tuple(튜플) 타입

• 튜플 타입을 사용해 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let user: [string, number, boolean] = ["choijieun", 20, true];

//user[2]는 boolean으로 타입 에러가 난다.
console.log(user[2].toString());

Object(객체) 타입

• 모든 객체를 수용하는 타입이다.
• 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.
  (but, 타입 안정성을 보장하지 않기 때문에 추천하는 방법은 아니다.)

let obj: object = {};

//객체의 프로퍼티 타입들을 각기 명시해 주는게 좋다
// key-value에 구체적인 타입까지도 지정할 수 있다.
let user: {name: string, age: number} = {
	name: "choijieun",
	age: 20
}

Any 타입

• 클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있다. 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다.
• 변수에 값을 재할당하는 경우 타입에 구애받지 않고 값을 재할당할 수 있게 된다.
• 잘 사용하지 않는다고 한다.

let obj: object = {};

//에러
obj = "hello";

let maybe: any = 4;

//정상
maybe = true;

• 엄격한 타입 검사를 하지 않기에 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다. (실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환되는 값은 undefined이다.)

let maybe: any = 4;

//undefined로 출력
console.log(maybe.length);

• 타입의 일부만 알고, 전체는 알지 못할 때 유용 (ex - 여러 타입이 섞인 배열을 받고자 할 때)

let list: any[] = [1, true, "free"];

//any로 다루고 있기에 index 첫 번째 요소가 boolean 타입이지만 number 타입으로 재할당 가능 
list[1] = 100;

✔️ TypeScript의 함수

• 매개변수의 타입과 반환 타입을 명시해야한다. (타입 추론 기능을 활용하지 않는다고 가정했을 때 필수)

//named function
function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

• 함수에 리턴값이 없다면, void를 사용하여 작성(타입 추론 기능을 활용하지 않는다고 가정했을 때 필수)

let printAnswer = (): void => {
	console.log("Hi");
}

• 매개변수의 개수에 맞춰 전달인자를 전달해야한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러
greeting('jieun');

//정상
greeting('jieun', 'choi');

//너무 많은 매개변수를 보내 에러
greeting('jieun', 'choi', 'Hi');

• 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있다.(default parameter와 같은 동작)

let greeting = (firstName: string, lastName="choi"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상
//뒤의 인자로 undefined를 보내도 값은 “hello, jieun choi”으로 반환
greeting('jieun', undefined);

• 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙여 해결할 수 있다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상
//전달인자를 하나만 전달했기 때문에, 뒤의 매개변수는 undefined로 반환
greeting('jieun');

TypeScript의 연산자 활용 타입

유니온(Union) 타입

• 둘 이상의 타입을 합쳐서 만들어진 새로운 타입
• | 연산자를 이용 (JavaScript에서 ||와 동일하다.)
• 다양한 타입의 값을 처리해야 하는 경우 유용하다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`number: ${value}`);
  } else {
    console.log(`string: ${value}`);
  }
}

장점

• 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.
• 코드의 가독성을 높일 수 있다.
  ex - let value: string | number | boolean
  문자열, 숫자, 불리언 타입 중 하나의 값을 가질 수 있다는 것이 명시적으로 표시되어 코드를 이해하기 쉽게 만들어 준다.

유의사항

• 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야한다.

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

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

//askSomenone 함수 내부에서는 Developer, Person이 갖고 있는 공통 프로퍼티인 name에만 접근
// 공통되고 보장된 프로퍼티만 제공해야 하기 때문
// 만약 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용
function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

타입 가드(Type Guard)?

• TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나
• 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장

• in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자

function askSomeone(someone: Developer | Person) {
  // in 연산자는 객체의 속성 이름과 함께 사용해 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }
  if ('age' in someone) {
    console.log(someone.age);
  }
}

in 연산자는 객체의 프로퍼티 이름과 함께 사용된다.
해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.

인터섹션(Intersection) 타입

• 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법
• & 연산자를 사용

//value 변수는 string, number, boolean 타입을 전부 받을 수 있다.
let value: string & number & boolean;

• 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.

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

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

//askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다.
function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

• 인터섹션 타입은 타입 가드는 필요 없는 반면 Developer와 Person이라는 새로운 합집합을 만들어 내는 것이기에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야한다.
• 유니온 타입은 타입 가드를 해줘야 하지만 전달인자를 전달할 때 선택지가 생기게 된다.

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

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

//유니온 타입
function askSomeone(someone: Developer | Person) {
	//타입 가드를 이용해 프로퍼티에 접근할 수 있다.
  if ('skill' in someone) {
    console.log(someone.skill);
  }

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

//유니온 타입은 전달인자를 전달할 때 선택지가 생긴다.
askSomeone({name: '최지은', skill: '프론트엔드'});
askSomeone({name: '최지은', age: 20});

//인터섹션 타입
function askSomeone2(someone: Developer & Person) {
	//타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있다.
	console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

//인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없다.
askSomeone2({name: '최지은', skill: '프론트엔드', age:20});

---

✏️ 마치며

타입, 함수는 이해기 쉬웠는데
연산자 활용 타입에서 이해가 안되는 부분이 많았다.

어떠한 목적? 인지는 알겠으나 이것을 실습해서 풀어보려고 하니 생각 보다 잘 되지 않았다.
타입스크립트는 자바스크립트의 타입의 명시성이 부족한 단점을 보완한 것으로 아마 프로젝트 작업에서 자주 사용할 것 같다.

시간 될 때 마다 틈틈히 공부해야겠다.