TypeScript
타입스크립트가 무엇인가?
자바스크립트의 "superset"언어이며 자바스크립트를 기반으로 하되 보다 더 확장된 언어이다.
자바스크립트의 기본적인 문법과 코드 작성법을 그대로 사용하면서 몇 가지 기능을 추가한 것이다.
타입스크립트는 JS의 라이브러리가 아니기 때문에 새로운 기능을 만들거나 기능을 확장하진 않는다.
정적 타입(statically Typed)의 특징을 갖는다는게 중요하다.
자바 스크립트는 원래 동적 타입 언어인데
Type이 고정되어 있지도 않고 함수에서 사용할 Type을 미리 정해두지도 않은 상태에서 전달된 변수를 받아 코드를 실행한다.
그럼 쓰는 이유는 뭘까요?
만약 대규모 프로젝트에서 함수나 객체를 의도치 않은 방식으로 사용할때
자바스크립트는 경고해주지 않고 일단 무조건 실행되기 때문에 많은 소스코드 파일이 있는 상황에서
오류를 찾기 쉽지 않다.
하지만 타입스크립트는 타입 표기를 하여 타입을 명확히 지정하고 그 타입에 맞지 않는다면 개발 툴에 오류가 표시 되기 때문에 비슷한 종류의 오류와 의도치 않은 함수 사용 방식을 찾기 쉽다.
런타임에 오류의 원인을 찾을 필요 없이 코드를 작성할 때 바로 오류가 표시된다.
Typescript 기본 자료형(Type)
기본형 타입
기본형 데이터 : 숫자형, 문자열, Boolean, null, undefined, symbol
기본적으로 타입을 쓸때 Number(x) -> number(o) 처럼 소문자로 시작함.
주요 기본형 타입
let age: number; // 숫자형 지정
let userName: string; // 문자형 지정
let isReal: boolean; // 부울형 지정
배열 및 객체 타입
배열
let hobbies: string[]; // 문자열 배열 지정 string 대신 number, boolean 같은 기본형으로 배열 가능.
객체
let person: {
name: string;
age: number;
}
배열 + 객체 // 객체 뒤에 대괄호 붙힘
let people: {
name: string;
age: number;
}[];
타입 추론(type inference)
개발자기 굳이 변수 선언할때 타입을 쓰지 않아도 컴파일이 스스로 판단해서 타입을 넣어주는 것을 얘기한다.
let num = 12; 를 하고 마우스를 가져다 대변 let num: number로 스스로 판단한 걸 볼 수 있다.
타입 스크립트가 타입을 추론하는 경우
1. 초기화된 변수
2. 기본값이 설정된 매개 변수
3. 반환 값이 있는 함수
근데 타입을 써서 에러를 줄이려고 타입스크립트를 사용하는데 이렇게 쓰면 자바스크립트를 쓰는것에 비해 무슨 의미가 있는가? -> 타입스크립트의 강한 타입 규칙때문에 떨어지는 생산성, 지나친 유연성의 자바스크립트
이 두가지를 모두 챙겨가기 위해 쓰는 것이 컴파일의 타입 추론 기능이다.
타입 호환
타입스크립트 코드에서 특정 타입간에 구조가 비슷하면 타입 호환이 될 수 있다는 걸 의미한다.
그중 Union 타입 호환( | )은 하나의 변수에 한 개 이상의 서로 다른 타입을 지정 할 수 있게 해주는 기능이다.
let course: string | number = 'React-Guide';
course = 123;
타입 별명(Type Alias)
타입스크립트 코드를 작성하다 보면 동일한 타입을 반복해서 정의하는 일이 많은데
코드 중복을 피하기 위해 타입 별칭(Type Alias)를 만들어서 사용한다.
type Person = {
name: string;
age: number;
};
이런식으로 type 옆에 Person 이라는 별칭을 만들어서 같은 정의 형식의 코드에 사용한다.
함수 타입과 매개변수 등
함수 및 함수 유형
1. 타입을 가진 함수
2. 제네릭(generic)타입
함수에서 타입을 사용할 때는 매개변수의 타입뿐만 아니라 반환 값 타입도 생각해야 한다.
함수를 사용할 때 타입을 지정하는 위치가 따로 있다.
예시로
function add(a: number, b: number) {
return a + b;
}
라는 코드를 작성했을때 add의 타입은 아직 안정해졌지만 앞에서 배운 타입 추론에 의해 number로 되어있는걸 알 수 있다.
여기서 add에 타입을 지정해주려면
function add(a: number, b: number): number | string {
return a + b;
}
이처럼 함수의 매개변수 목록 뒤에 : 를 붙히고 그 뒤에 변환 타입을 지정한다. union 지정도 가능하다.
특별한 반환 타입
function printOutput(value: any) {
console.log(value);
}
이 같은 함수에는 아무것도 반환하지 않는다. 반환 값을 받아 작업하려면 undefined 타입으로 값을 받아야 할 것이다.
이처럼 return 문이 없는 반환 값이 없는 함수의 반환 타입엔
void 타입을 추가한다. null, undefined와 비슷하지만 "항상 함수와 결합해서 사용한다"는 특징이 있다.
generics 기능
가벼운 예시를 들어 설명
function insertAt(array: any[], value: any) {
const newArray = [value, ...array];
return newArray;
}
const demoArray = [1, 2, 3];
const updateArray = insertAt(demoArray, -1);
const stringArray = insertAt(['a','b','c'], 'd');
이런식의 예시를 볼때 밑에 updataArray, stringArray 안 insertAt 타입을 보면 전부 any로 되어 있을 것이다.
any를 사용하면 함수를 호출한 다음 타입스크립트로부터 어떤 지원도 받을 수 없게된다.
타입스크립트는 updataArray의 첫 번째 값이 숫자인지 문자열인지 알 수 없을 것이다.
이때 제네릭 기능을 사용한다.
사용법
function insertAt<T>(array: T[], value: T) {
const newArray = [value, ...array];
return newArray;
}
const demoArray = [1, 2, 3];
const updateArray = insertAt(demoArray, -1);
const stringArray = insertAt(['a', 'b', 'c'], 'd');
매개변수 목록 사이에 <T> 추가 -> 보통 Type의 T를 따서 사용함, array, value의 타입을 T로 설정
타입스크립트가 이 제네릭 타입을 보고 인수의 정확한 값을 살펴봐야한다고 판단한다.
이 예시로는 제네릭 타입을 이용하여 타입스크립트에게 any 타입이 아니며 array배열과 value 값이 같은 타입을 가져야한다고 설정한 것이다.
또한 구체적인 유형을 직접 <> 를 이용하여 설정 할 수 있다.
const stringArray = insertAtBeginning<string>(['a', 'b', 'c'], 'd');
아래는 제네릭 타입을 쓰고 난 다음 타입 변경 사진이다.
