📌 TypeScript의 타입
- 기본적인 TypeScript 타입 선언
let variable: type = value;✔️ Boolean(불리언)
let isTrue: boolean = true;
let isFalse: boolean = false;✔️ Number(숫자)
2^53보다 큰 수를 나타낼 때에는 bigint 타입을 사용할 수도 있다.
let num1: number = 10;
let num2: number = 1.5; ✔️ String(문자열)
백틱(`)을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있다.
let firstName: string = "Hyesoo";
let lastName: string = 'Song';
let longString: string = `Hyesoo is a potato.
She is 26 years old.`✔️ Array(배열)
//첫 번째 방법
let fruits: string[] = ["apple", "banana", "grape"];
//두 번째 방법
let numberList: Array<number> = [4, 7, 100];✔️ Tuple(튜플)
let user: [string, number, boolean] = ["Hyesoo", 723, true];
console.log(user[2].toString()); // error 발생!user[2]에 toString()으로 접근하게 되면, user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생한다.
✔️ Object(객체)
// 권장되지 않는 방법
let obj: object = {};
// 각 프로퍼티의 타입을 명시해주는 방법 (good)
let user: {name: string, age: number} = {
name: "Hyesoo",
age: 26
}✔️ Any 타입
알지 못하는 타입을 표현해야 할 때 any 타입을 사용한다.any는 타입 검사를 하지 않는다.
let maybe: any = 4;엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않고 undefined를 반환한다.
let maybe: any = 4;
console.log(maybe.length); // undefined타입의 일부만 알고 전체는 알지 못할 때, 여러 타입이 섞인 배열을 받고자 할 때 사용할 수 있다.
let list: any[] = [1, true, "free"];
//any타입으로 선언했기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있다.
list[1] = 100;📌 TypeScript의 함수
TypeScript 에서 함수를 표현할 때는 타입 추론 기능을 활용하지 않는 한 필수로 매개변수의 타입과 반환 타입을 명시해야 한다. 각 매개변수에 해당하는 타입을 작성한 뒤, 반환되는 타입을 괄호 뒤에 작성하면 된다.
//named function
function add(x: number, y: number):number {
return x + y;
}
//arrow function
let add = (x: number, y: number): number => {
return x + y;
}
// return 값 없음
let printAnswer = (): void => {
console.log("YES");
}- TypeScript는 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.
let greeting = (firstName: string, lastName: string): string => {
return `hello, ${firstName} ${lastName}`;
}
greeting('coding'); // error 발생!
greeting('coding', 'kim'); // hello, coding kim
greeting('coding', 'kim', 'hacker'); // error 발생!- 전달인자를 전달하지 않거나, undefined를 전달했을 때 에러가 나지 않게 할당될 매개변수의 값을 정해놓을 수도 있다.
let greeting = (firstName: string, lastName="kim"): string => {
return `hello, ${firstName} ${lastName}`;
}
greeting('coding'); // hello, coding kim
greeting('coding', undefined); // hello, coding kim
greeting('coding', 'kim', 'hacker'); // error 발생!- 선택적 매개변수를 원한다면 매개변수의 이름 끝에
?를 붙임으로써 해결할 수도 있다.
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
greeting('coding'); // hello, coding undefined
//정상적으로 작동합니다.
greeting('coding', 'kim'); // hello, coding kim
//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker'); // error 발생!📌 TypeScript의 연산자 활용
✔️ 유니온(Union) 타입
유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입이다. | 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미이다.
function printValue(value: number|string): void {
if (typeof value === "number") {
console.log(`The value is a number: ${value}`);
} else {
console.log(`The value is a string: ${value}`);
}
}
printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello❗️ 유니온(Union) 타입 사용 시 유의할 점
- 유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 한다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer | Person) {
console.log(someone.name);
}위 코드에서 askSomeone함수는 Developer와 Person의 공통 프로퍼티인 name에만 접근이 가능하다. 나머지 프로퍼티에도 접근하고 싶다면 타입가드를 사용해야 한다.
function askSomeone(someone: Developer | Person) {
// in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
// in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}✔️ 인터섹션(Intersection) 타입
인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다. & 연산자를 사용하여 표현한다.
let value: string & number & boolean;❗️ 인터섹션(Intersection) 타입 사용 시 유의할 점
인터섹션 타입은 타입을 결합하는 것이기 때문에 타입가드는 사용하지 않을 수 있지만, 반드시 전달인자로 모든 프로퍼티를 전부 보내줘야한다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer & Person) {
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
hello world!