원티드 프리온보딩 코스를 진행하면서 처음 타입스크립트로 과제를 진행하게 됐다.
생각보다 데이터나 함수에 전달하는 데이터 구조가 복잡해질 수록 단순히 타입을 명시하는 것만으로는 부족할 때가 많았고, 타입에러를 해결하기에도 타입스크립트에 대한 공부가 부족했다.
이번에는 기본적으로 쓰이는 타입스크립트의 타입과, 지정 방법에 대해 정리했다.
기본 타입
undefined, null, unknown, any, void, never, object 과 같은, 생소한 타입들도 포함되어 있는 기본 타입들이 있다.
사용법
함수
인자와 리턴값 타입 명시
함수에는 각각 인자의 타입과 그 함수가 리턴하는 값에 대한 타입을 명시해주어야 한다.
function add(num1: number, num2: number): number {
return num1 + num2;
}
function fetchNum(id: string): Promise<number> {
return new Promise((resolve, reject) => {
resolve(100);
});
}Optional Parameter
선택적으로 들어오는 값에 대해 타입을 지정하고 싶다면 ?를 붙여 선택적 매개변수 타입을 지정해주면 된다.
function printName(firstName: string, lastName?: string) {
console.log(firstName);
console.log(lastName); // undefined
}
printName('Steve', 'Jobs');
printName('Ellie');
printName('Anna');
이 나머지 부분도 마찬가지. 일반적인 함수에 타입만 더해주면 된다.
Default Parameter
function printMessage(message: string = 'default message') {
console.log(message);
}
printMessage();Rest Parameter
function addNumbers(...numbers: number[]): number {
return numbers.reduce((a, b) => a + b);
}배열
배열 타입 명시
string[]이란, 배열안에 string타입의 값이 들어간다는 의미이다.
이것은 Array<string>으로 사용할수도 있다.
만약 배열안에 객체가 들어간다면 Array<object>를 사용해주면 된다.
const fruits: string[] = ['🍅', '🍌'];
const scroes: Array<number> = [1, 3, 4];
function printArray(fruits: readonly string[]) {}튜플 Tuple
튜플을 사용하면 타입을 섞어서 명시해 사용할 수 있다.
let student: [string, number];
student = ['name', 123];
student[0]; // name
student[1]; // 123
const [name, age] = student;type 지정 방식
type aliases
새로운 타입을 선언해 사용할 수 있다. 이것을 type alias라고 한다.
원시 형태 뿐 아니라 객체 형태로도 사용해줄 수 있다.
type Text = string;
const name: Text = 'studentName';
type Num = number;
type Student = {
name: string;
age: number;
}
const student: Student = {
//그대로 타입을 넣어주어야 한다.
}string literal types
타입을 직접 지정해주는 방식이다.
type Name = 'name';
let studentName: Name;
studentName = 'name';
type JSON = 'json';
const json: JSON = 'json';
type Boal = true;union types
OR 과 같은 방식. 여러가지 타입 중 하나를 사용할 수 있다.
type Direction = 'left' | 'right' | 'up' | 'down';
function move(direction: Direction) {
console.log(direction);
}
move('down');intersection types
And와 같은 방식. 명시한 타입 모두를 사용할 수 있다.
type Student = {
name: string;
score: number;
};
type Worker = {
empolyeeId: number;
work: () => void;
};
function internWork(person: Student & Worker) {
console.log(person.name, person.empolyeeId, person.work());
}
internWork({
name: 'David',
score: 1,
empolyeeId: 123,
work: () => {},
});Enum
Enum은 상수화할 데이터를 만들어 사용할 수 있다.
다만, 외부에서 변경이 가능하기 때문에 많이 사용되지는 않는다.
enum Days {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday,
}
console.log(Days.Monday);
let day: Days = Days.Saturday;타입추론 Type Inference
타입이 알아서 결정되어 타입 정보 작성을 생략하는 것.
타입스크립트에서는 아래 예시와 같이 바로 변수에 특정한 타입을 가진 변수를 할당해주면 해당 변수로 자동으로 타입추론이 된다.
let text: string = 'hello' //이렇게 타입을 명시해주는 것이 보통이지만
let text = 'hello'; // 바로 문자열을 할당해주어 생략해도 에러가 발생하지 않는다. 타입 추론으로 text의 타입은 string이 되었기 때문이다.
function print(message = 'hello') {
console.log(message);
}
print('hello');
function add(x: number, y: number): number {
return x + y;
}
const result = add(1, 2);
Type Assertions
자바스크립트와 함께 사용해야 하는 불가피한 경우에 사용한다.
그 외에는 사용을 지양하는 것이 좋다.
function jsStrFunc(): any {
return 2;
}
//자바스크립트는 타입이 없기 때문에 any타입이다. 그런데 명학한 타입이 있는 값을 리턴한다.
const result = jsStrFunc();
console.log((result as string).length);
//이런 자바스크립트 함수를 사용할 때 어떤 타입인지를 명시해줄 수 있다.
console.log((<string>result).length);