Number
const num: number = 1;
String
const str: string = 'hello world';
Array
const numbers: number[] = [1, 2, 3];
const numbers2: Array<number> = [1, 2, 3];
function printArray(array: readonly number[]){}; // ⭕
function printArray2(array: readonly Array<number>){}; // ❌
array 타입은 두 가지 형태로 나타낼 수 있는데, readonly 속성을 할당해 줄 땐 Array<number> 방식은 에러가 발생한다.
readonly는 자주 쓰이기 때문에 좀 더 일관성 있는 코드를 작성하려면 첫 번째 방식을 추천한다.
Boolean
const boal: boolean = true; // or false
Undefined
const und: undefined; // ❌
let age: number | undefined; // Union Type
age = 20;
age = undefined;
function find(): number | undefined {
return 100;
// return undefined;
}
Null
let person: null; // ❌
let person2: string | null;
person2 = 'Mike';
person2 = null;
Undefined 와 Null 차이
let name;
console.log(name); // undefined
let age = null;
console.log(age); // null
undefined - 변수 선언 후 값을 할당하지 않은 상태 (사전적 의미 : 한정되지 않은, 확실하지 않은)
null - 의도적으로 빈 값을 할당
Unknown
let notSure: unknown; // ❌
notSure = 'a';
notSure = 12;
return 되는 타입을 모를 때 사용, but 가능하면 쓰지 않는 것이 좋다.
Any
let anything: any = 1; // ❌❌❌
anything = 'hi';
anything = false;
unknown과 마찬가지로 가능하면 쓰지 않는 것이 좋다.
Void
function print(): void {
console.log('hi');
// return 생략
}
let unusable: void = undefined; // ❌
되도록이면 타입을 명시해 주는 것이 좋지만, 생략할 수 있다.
변수에 선언할 경우 undefined밖에 할당되지 않기 때문에 사용하지 않는다.
Never
function throwError(message: string): never {
// message를 서버에 보내 로그를 남긴 후
throw new Error(message);
}
함수에서 주로 사용되며 절대로 return 되지 않는다.
Object
function object(obj: object){};
object({nmae: 'mike'});
object([1, 2, 3]);
그냥 쓰기보단 object를 더 구체적으로 명시해서 사용하는 것이 좋다.
Tuple
let student: [string, number];
student = ['name', 20];
console.log(student[0]); // name
console.log(student[1]); // 20
// 가독성이 좋지 않은 코드.
const student2 = {
name: string = 'Tom',
age: number = 20,
};
console.log(student2.name); // Tom
console.log(student2.age); // 20
// student[0]보단 student2.name이 가독성이 훨씬 좋다.
// tuple을 사용하는 대표적인 예
const [count, setCount] = useState(0); // React의 useState hook
tuple보단 interface, class, type alias로 대체해서 사용하는 것이 좋다.
Type Aliases ⭐
type Text = string;
const name: string = 'Tom';
const name2: Text = 'cruise';
// 원시 타입뿐만 아니라 object 형태도 정의할 수 있다.
type Student = {
name: string;
age: number;
}
const student: Student = {
name: 'Tom',
age: 20,
}
alias (사전적 의미 : 별명, 가명)
타입을 재사용하거나 또 다른 이름(별명)으로 부르고 싶을 때, 자유롭게 타입을 지정해서 사용할 수 있다.
Union Types ⭐
function printId(id: string | number) {
console.log(id);
}
printId('my ID'); // ⭕
printId(100); // ⭕
type Grades = 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
let grades: Grades;
grades = 'A'; // ⭕
grades = 'G'; // ❌
쉽게 or로 생각하면 된다. 지정한 원시 타입이나 특정 값만 할당할 수 있다. (A or B or C ...)
Literal Types
type Greeting = 'hello!';
type Count = 10;
let greeting: Greeting;
greeting = 'hello!';
let count: Count;
count = 10;
// Union Type과 함께 더 유용하게 사용할 수 있다.
type Direction = 'up' | 'down' | 'left' | 'right';
let direction: Direction;
direction = 'up'; // up, down, left, right 네 가지의 선택지만 할당할 수 있다.
원시 타입 지정 이외에 구체적인 문자열이나 숫자 값을 타입으로 지정할 수 있다.
주로 Union Type과 함께 사용한다.
Intersection Types
type Student = {
name: string;
score: number;
};
type Worker = {
employeeId: number;
work: () => void;
};
function internWork(person: Student & Worker) {
console.log(person.name, person.score, person.employeeId, person.work());
}
internWork({
name: 'Tom',
score: 10,
employeeId: 1234,
work: () => {},
});
교차 타입으로 여러 타입을 하나로 결합한다. internWork는 두 타입의 모든 멤버 변수를 가진다.
Optional Parameter
function printName(firstName: string, lastName?: string){
console.log(firstName);
console.log(lastName);
}
printName('Tom', 'cruise'); // Tom cruise
printName('Tom'); // Tom undefined
printName('Tom', undefined); // Tom undefined
// 비슷하지만 조금은 다른 방식
function printName(firstName: string, lastName: string | undefined){
console.log(firstName);
console.log(lastName);
}
printName('Tom', 'cruise'); // Tom cruise
printName('Tom'); // ❌
printName('Tom', undefined); // Tom undefined
두 번째 parameter를 union 타입으로 사용할 경우 string 이나 undefined 둘 중에 하나를 반드시 할당해야 한다.
그러므로 이런 경우엔 굳이 undefined을 전달하지 않아도 되는 optional parameter를 사용하는 것이 좋다.
Default Parameter
function printMessage(message: string = 'default message'){
console.log(message);
}
printMessage(); // default message
함수를 호출할 때 parameter에 값을 할당하지 않으면 기본값인 'default message'가 출력된다.
Rest Parameter
function add(...numbers: number[]): number {
return numbers.reduce((a, b) => a + b);
}
console.log(add(1, 2));
console.log(add(1, 2, 3, 4, 5));
원하는 만큼 parameter 개수를 조절할 수 있다.
