[typescript] typescript 개념 정리(1)

메인 프로젝트를 마친 후 더 공부해보고 싶다고 생각한 대표적인 것들이 상태관리 라이브러리, 배포 관련 그리고 Typescript였다. Typescript를 공부하는 이 날을 얼마나 기다렸던가! 인강의 순서대로 공부하느라 조금 늦어졌는데, 얼른 타스 공부하고 싶어서 손이 근질근질 거려 혼났다(왠지 좀 또라이 같지만.. 타스 공부하고 싶어서 손이 근질거렸다니;;). 인강에는 Next.js와 배포, 단위 테스트 등의 내용이 먼저 있지만 타스 관련 부분을 얼른 듣고 싶어서!! 먼저 듣기로 했다^^ 듣는 내 마음이지^^

타스를 쓰는 회사도 있고 아닌 회사도 있다고 하던데, 필드에서 타스를 쓰는 비율이 어떻게 되는지 많이 궁금하다. 요즘 많이 쓰인다고 하니 열심히 리액트 완벽 가이드 강의를 들으며 타스의 개념을 정리해보자!

 

TypeScript

JavaScript를 기반으로 하는 프로그래밍 언어이고 JavaScript의 상위집합이며, 정적 타이핑을 지원한다.

TypeScript코드는 브라우저에서 실행되지 않는다. 따라서 TypeScript를 JavaScript로 컴파일해야 하고 컴파일 과정에서 모든 유형주석이 제거된다.

npm install typescript

• 컴파일러 호출 

npx tsc(로컬 설치시)

 

원시 타입 

// 숫자, 문자, 불리언 타입
let age: number = 12;
let userName: string = 'tom';
let isInstructor: boolean = true;

배열 타입

// 문자열, 숫자, 불리언 배열 타입
let hobbies: string[];
let hobbies: number[];
let hobbies: boolean[];

// Array -> 제네릭 유형
let hobbies: Array<number> = [1,2,3];

객체 타입

// 객체의 구조를 정의
let person: {
	name : string; 
    age: number;
}

person = {
	name: 'max',
    age: 12
};

객체를 요소로 가지는 배열 타입

let people: {
	name: string;
    age: number;
}[];

 

타입 추론(type Inference)

• TypeScript는 타입을 추론한다. 따라서 타입을 명시적으로 언급하지 않은 경우, 어떤 타입이 사용되는지 확인하고 해당 타입을 사용한다.
• 그렇기 때문에 다른 유형을 할당하려고 하면 오류가 발생한다.
• 타입 추론기능을 수용하는 것은 좋은 습관으로 간주되므로, 불필요하게 유형을 지정하지 않아도 된다(중복).

// 예시

let age = 12;
age = "12"; // => Error! 타입을 추론해서 number타입을 사용했기 때문에 오류발생

let age: number = 12;  // => 중복이기 때문에 불필요하게 유형을 지정할 필요없음

유니온 타입(union type)

• 파이프 기호를 이용하여 다른 타입을 추가할 수 있다.
• 타입 any를 사용하는 경우 마치 자바스크립트로 작성하는 것처럼 동작을 하고, 유니온 타입을 사용하면 타입스크립트의 이점을 살리면서 코딩을 할 수 있다.

let course : string | number = 'React - The Complete Guide';
course = 12345;

타입 별칭(Type Aliases)

• type 키워드를 사용하여 타입의 새로운 이름을 생성할 수 있고, 프로그래머의 의도를 보다 명확하게 나타낼 수 있다.
• type을 반복해서 사용해야 할 때 정의해 준다. custom type이라고 부르기도 한다.
• 별칭은 단순히 새로운 이름일 뿐이고 실제로 새로운 타입이 생성되는 것이 아니다. 따라서 타입과 관련된 에러가 발생했을 시 타입 별칭을 보여주지 않고 실제 타입을 보여준다.

type Person = {
  name: string;
  age: number;
};

let person: Person;

Interface

• interface 키워드를 사용하여 타입에 새로운 이름을 생성하는 점에서 Type Aliases와 비슷하다.
• interface는 동일한 이름으로 여러 번 선언해도 컴파일 시점에 합칠 수 있다. 이런 동작을 선언 병합(Declaration Merging)이라고 한다.
• interface는 실제로 새 타입을 생성하고, 관련 타입 에러에는 인터페이스 쪽에 문제가 있다고 가르쳐준다.
• interface는 extends 키워드로 확장할 수 있지만, Type Aliases은 그렇지 않다.
• Type Aliases을 이용해 기본 타입, 배열과 튜플, 유니온 타입 등에 새로운 이름을 붙일 수 있지만, interface에서는 불가능하다.
• 공식 문서에서 가능한 interface 사용을 권장하며, 기본 타입 혹은 튜플 타입을 반드시 써야 되는 상황이면 Type Alias를 사용하도록 권장하고 있다.

 

함수 및 함수 유형

1. 타입을 가진 함수

// 파라미터에 타입 지정 -> 추천
const add = (a: number, b: number) => {
	return a+b; // 반환값의 타입 추론(number)
}

// 파라미터, 반환값에 타입 지정(타입 추론 x)
const add = (a: number, b: number): number => {
	return a+b; 
}

// void -> 함수에 반환 값이 없다는 뜻. 함수에만 있는 특수한 타입
const printOutput = (value: any) => {
	console.log(value) // 반환 값 타입 = void
}

2. 제네릭 타입

• 파라미터의 타입이 정해지지 않은 경우에 제네릭을 사용해 담기는 값에 따라 타입을 유추할 수 있다.
• 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한 번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.
• 만약 여러 가지 타입을 허용하고 싶다면 any를 사용하면 되지만, any는 타입 검사를 하지 않기 때문에 함수의 파라미터로 어떤 타입이 들어갔고 어떤 값이 반환되는지 알 수가 없다.
• 제네릭에서 T는 Type의 약자로 제네릭을 선언할 때 관용적으로 사용되는 식별자이며, 타입 변수(Type variables) 또는 타입 파라미터(Type parameter)라고 한다.

// array, value에 어떤 타입이 들어가도 상관없음
// 만약 any로 설정하면 타스에서 제공하는 기본 기능들을 사용할 수 없음!

// T -> type
// 제네릭 타입을 사용하면 array 요소의 타입과 value의 타입이 같다는 것을 알려줌
const insertAtBeginning<T> = (array: T[], value: T) => {
// 기존 배열은 바뀌지 않으면서 새로운 배열 얻을 수 있는 로직
  const newArray = [value, ...array]; 
  return newArray;
}

const demoArray = [1, 2, 3]; // 타입스크립트는 이 배열이 number 타입으로 채워진지 모름

// 아규먼트에 의해 타입 결정됨
const numberArray = insertAtBeginning(demoArray, -1); // [-1, 1, 2, 3]
const stringArray = insertAtBeginning(['a', 'b', 'c'], 'd');