TypeScript 기본 개념 공부 #1
공부 이유
타입스크립트를 이전에 진행한 프로젝트(해킹대회 사이트 개발 - 추후에 포스팅할 예정)에서 별로 모르는 상태로 처음 써보고 괜찮은 언어라고 생각되며 많은 기업에서 타입스크립트를 사용하고 있어 제대로 공부해보고자 했다.
TypeScript
타입스크립트가 무엇인가?
먼저 쉽게 말하자면 자바스크립트에 타입을 지정할 수 있는 언어라고 생각하면 된다.
그렇다면 자바스크립트가 사용되는 모든 프론트엔드와 백엔드에서 사용할 수 있다는 말이다.
목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다.
또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.
기본 문법
let str: string = 'hi';
let num: number = 100;
let arr: Array = [1, 2, 3];
let arr2: number[] = [1, 2, 3];
let obj: object = {};
let obj2: { name: string, age: number} = {
name: 'jun',
age: 22
};각 변수에 콜론(' : ')을 사용하여 변수의 타입을 지정할 수 있다.
배열과 같은 경우에는 변수의 타입메 대괄호(' [] ')를 사용하거나 Array를 사용하면 배열로 선언이 된다.
객체의 경우 object로 선언할 수는 있지만 obj2의 경우에 object로 타입을 지정하면 객체 안의 프로퍼티를 찾지 못한다.
그러므로 타입을 지정해 줄 때 각 프로퍼티의 타입을 위와 같이 지정해 줘야 한다.
let obj1: { name: string, age: number} = {
name: 'jun',
age: 25
};
let obj2: { name: string, age: number} = {
name: 'jun'
};obj1과 obj2를 확인해보면 obj2는 에러가 나는 것을 볼 수 있다.
에러가 나는 이유를 보면 `Property 'age' is missing in type '{ name: string; }' but required in type '{ name: string; age: number; }'.`이라고 되어 있다. 타입 지정은 name과 age를 했는데 age를 넣지 않았다고 하는 것이다.
이를 해결하기 위해 객체의 프로퍼티가 타입을 선택적(optional)이게 만들 수 있다.
let obj1: { name: string, age: number} = {
name: 'jun',
age: 25
};
let obj2: { name: string, age?: number} = {
name: 'jun'
};age의 타입을 지정한 것을 보면 ?가 되어 있다. 이것으로 number | undefined으로 지정되어 에러가 발생하지 않는다.
let obj1: { name: string, age: number} = {
name: 'jung',
age: 20
};
let obj2: { name: string, age: number} = {
name: 'jun',
age: 25
};만약 반복되는 타입이 있으면 Alias(별칭)을 지정할 수 있다.
type Man = {
name: string,
age: number
};
let obj1: Man = {
name: 'jung',
age: 20
};
let obj2: Man = {
name: 'jun',
age: 25
};위와 같이 Man이라는 타입을 만들어 지정할 수 있다.
function add(a: number, b: number): number {
return a+b;
}
function log(a: string, b?: string, c?: string) {
console.log(a);
}함수에서는 인자들의 타입을 지정하고 함수의 리턴 값의 타입을 지정할 수 있다.
함수도 마찬가지로 optional하게 사용할 수 있다.
type Man = {
readonly name: string,
age: number
};
let obj1: Man = {
name: 'jung',
age: 20
};
obj1.name = "jun"타입스크립트에는 readonly라는 기능이 있다.
요소를 '읽기 전용'으로 설정하는 것인데 obj1의 name 키를 읽기 전용으로 설정하고 obj1.name 값을 수정하면 `Cannot assign to 'name' because it is a read-only property.`라는 에러가 나온다.
또한 타입스크립트에는 any라는 것이 있다.
any는 타입스크립트를 빠져나올 때 사용할 수 있다. 고로 타입이 아무거나 될 수 있다.
위에서 언급한 해킹대회 사이트 개발 프로젝트에서 처음 쓴 타입스크립트에 타입지정을 어떻게 해줘야 할 지 어려워 any를 남발하다 같이 프로젝트를 진행하던 친구에게 그럴거면 왜 타입스크립트를 쓰냐고 욕 먹었다.
지금까지 자바스크립트에도 있는 타입이었다면 이제는 타입스크립트에만 있는 타입들이다.
먼저 unkown이다.
unkown는 타입을 모를 때 사용 가능하다. 예로 API로부터 응답을 받는데 그 응답의 타입을 모를 때가 있다.
let a: unknown;
b = a + 1;이처럼 a의 타입을 unknown으로 하면 에러가 발생한다.
let a: unknown;
if (typeof a === 'number') {
let b = a + 1
}이렇게 조건문을 걸면 에러가 발생하지 않는다.
a에 대해 number와 관련되지 않고 string과 관련된 메서드를 사용하면 에러가 발생할 것이다.
왜냐하면 이미 a가 number라는 것을 확인했기 때문에
다음은 void이다.
void는 함수에 사용하는데 아무 것도 리턴하지 않는 함수에 사용된다.
function hello() {
console.log('hello');
}해당 함수를 작성하고 마우스를 올려 확인해보면 void이 되어 있을 것이다.
이걸로 void는 끝..
마지막으로는 never 타입이다.
never은 거의 사용되지 않지만 그냥 한 번 알고 있기만 하면 될 것 같다.
never은 함수가 절대 return하지 않을 때 발생한다.
function hello(): never {
console.log('hello');
}이렇게 never 타입을 지정하면 에러가 발생할 것이다.
function hello(): never {
throw new Error('err');
}이렇게 작성하면 에러가 발생하지 않는다.
function obj(a: string | number) {
let b = a + 1
}이렇게 obj 객체에 a를 string이거나 number가 오게 하고 a + 1을 하게 되면 에러가 발생한다.
a는 string일 수도 number가 될 수도 있으니깐. 이러면 위에서 사용한 typeof를 사용하면 된다.
function obj(a: string | number) {
if (typeof a === 'string') {
a
} else if(typeof a === 'number') {
a
} else {
a
}
}각각의 조건문의 a에 마우스를 올려보면 string, number, never로 나올 것이다.
a를 string이나 number라고 지정해줬고 typeof로 그걸 다 확인해줬으니 남은게 없으므로 never가 된다.