🔍기본 문법
✅ 타입
JavaScript와 거의 동일한 타입을 지원한다. (boolean, number, string 등등..)
📝Array 타입
//1번
let items: string[] = ["apple", "banana", "grape"];
//2번
let numberList: Array<number> = [4, 7, 100];1번은 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓴다. 이어 2번은 제네릭 배열 타입을 사용한 것이다. Array를 먼저 작성한 뒤, <> 안에 배열의 요소들을 나타내는 타입을 작성한다. 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.
📝Tuple 타입
let user: [string, number, boolean] = ["kimcoding", 20, true];요소의 타입과 개수가 고정된 배열을 표현할수 있다.
📝Object 타입
원시타입이 아닌 타입을 나타낸다. typeof 연산자를 사용했을 때 "object"을 반환하는 모든 타입을 의미한다.
JavaScript의 원시 타입에는 number, string, boolean, undefined, null, symbol이 있습니다.
let user: {name: string, age: number} = {
name: "seunghyo",
age: 20
}TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다. 객체의 프로퍼티 타입들은 각기 명시해 주는 것이 좋다. key-value에 구체적인 타입까지도 지정할 수 있다.
📝Any 타입
클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다.
let obj: object = {};
//에러가 납니다.
obj = "hello";
let maybe: any = 4;
//정상적으로 동작합니다.
maybe = true;
//undefined로 출력됩니다.
console.log(maybe.length);
let list: any[] = [1, true, "free"];
//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있습니다.
list[1] = 100;any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다. (예를 들어서 여러 타입이 섞인 배열을 받고자 할 때)
✅ 함수
- TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환타입을 명시해야한다.
- 각 매개변수에 해당하는 타입을 작성한 뒤, 반환되는 타입을 괄호 뒤에 작성해야한다.
- 함수의 리턴값이 없다면
void를 사용하여 작성할 수 있다. - 매개변수 개수에 맞춰 전달인자를 전달해줘야 한다.
- 개발자가 전달인자를 전달하지 않거나,
undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있다. 이는 JavaScript에서의default parameter와 같은 동작을 한다.
function add(x: number, y: number):number {
return x + y;
}
//arrow function
let add = (x: number, y: number): number => {
return x + y;
}
let printAnswer = (): void => {
console.log("YES");
}
let greeting = (firstName: string, lastName="kim"): string => {
return `hello, ${firstName} ${lastName}`;
}
//정상적으로 작동합니다.
greeting('coding');
//정상적으로 작동합니다.
greeting('coding', undefined);
//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');
선택적 매개변수를 원하면 매개변수 이름 끝에 ?를 붙여 해결한다.
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}✅ 연산자 활용 타입
📝Union 타입
둘 이상의 타입이 합쳐서 만들어진 새로운 타입이다. || 연산자를 이용한다.
타입을 추론할 수 있기 때문에 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.
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}`);
}
}
//if else 문으로 나누어 해당 값이 숫자인 경우와 문자열인 경우 각각 다른 로그를 출력
printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello📝Intersection 타입
둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다. & 연산자를 이용하여 표현한다.
let value: string & number & boolean;인터섹션 타입은 타입 가드는 필요 없는 반면 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야만 한다. 반대로 유니온 타입은 타입 가드를 해줘야 하지만 전달인자를 전달할 때 선택지가 생기게 된다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer | Person) {
//유니온
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}
//유니온 타입은 전달인자를 전달할 때 선택지가 생깁니다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});
function askSomeone2(someone: Developer & Person) {
//인터섹션
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
//그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없습니다.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});
