김기지의 코딩노트

🌻 함수 오버로딩 타입스크립트에서만 지원되는 기능 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법이다. 오버로드 시그니쳐 함수 오버로딩을 하기 위해서는 함수에 어떤 버전들이 있는지 알려주어야 한다. 함수 구현부가 없이 함수 선언식으로 표시하며 이를 오버로드 시그니쳐라 한다. // 함수 구현부가 없이 선언식만 써놓음 -> 오버로드 시그니쳐 function func(a: number): void; function func(a: number, b: number, c: number): void; func 함수는 매개변수를 1개 받는 버전과 3개 받는 총 2개의 버전이 있다는 것을 알려준다. 구현 시그니쳐 함수가 실제로 어떻게 실행될 것인지를 정의한 부분을 구현 시그니쳐라 한다. // 함수의 ..

🍫 함수 타입의 호환성 특정 함수 타입을 다른 함수 타입으로 괜찮은지 판단하는 것 타입 호환성을 판단하는 기준 2가지를 모두 만족해야만 함수 타입 호환성이 가능하다. 두 함수의 반환값 타입이 호환되는가? 두 함수의 매개변수의 타입이 호환되는가? 기준 1. 반환값 타입이 호환되는가? type A = () => number; type B = () => 10; let a:A = () => 10; let b:B = () => 10; a = b; // number타입은 number literal 타입의 슈퍼 타입으로 다운 캐스팅 불가능 b = a; // ❌ // 즉, 반환값끼리의 다운 캐스팅이 되면 안됨 타입 A의 반환값은 number, 타입 B의 반환값은 number literal으로 A 반환값 타입이 B 반환..

🍪 함수 타입 표현식 함수 타입을 타입 별칭과 함께 별도로 정의할 수 있다. type Add = (a:number, b:number) => number; const add:Add = (a, b):number => a+b; 함수 타입 표현식을 이용하면 함수 선언 및 구현 코드와 타입 선언을 분리할 수 있어 유용하다. 여러개의 함수가 동일한 타입을 갖는 경우 함수 표현식을 이용해 간결하게 표현할 수 있다. // 함수 타입 표현식을 사용하면 좋은 예 // 여러개의 함수가 동일한 타입을 갖는 경우 type Operation = (a:number, b:number) => number; const add:Operation = (a,b) => a+b; const sub:Operation = (a, b) => a-b;..

🍔 함수 타입 정의하기 함수가 어떤 매개변수를 받고 어떤 값을 반환하는지를 알려준다. // 함수를 설명하는 가장 좋은 방법 // 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기 // 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는지 이야기 function func(a: number, b: number){ // 반환값의 타입은 return문을 추론하여 자동으로 설정되기 때문에 따로 선언하지 않아도 됨 return a+b; }; 즉, 어떤 타입의 매개변수를 받고 어떤 타입의 값을 반환하는지 이야기하면 된다. 함수의 반환값 타입은 자동으로 추론되기 때문에 생략이 가능하다. 🍔 화살표 함수 타입 정의하기 화살표 함수의 타입 정의 방식은 함수 선언식과 동일하다. const add = (..

🍠 서로소 유니온 타입 교집합이 없는 타입들로만 만든 유니온 타입 type Admin = { name: string; kickCount: number; }; type Member = { name: string; point: number; }; type Guest = { name: string; visitCount: number; }; type User = Admin | Member | Guest; 회원의 역할 분류에 따라 타입을 각각 분류한 후 3 타입의 합집합 타입인 User 타입을 만들었다. 회원의 역할에 따라 각각 다른 기능을 수행하도록 하는 함수 login을 만들어본다면 function login(user: User) { if ("kickCount" in user) { // Admin consol..

🌽 타입 좁히기 조건문 등을 이용해 넓은타입에서 좁은타입으로 타입을 상황에 따라 좁히는 방법 조건문을 이용해 조건문 내부에서 변수가 특정 타입임을 보장하면(더 좁은타입임을 증명하면) 타입스크립트는 이 변수의 타입을 더 좁은타입으로 자동으로 추론한다. function func(value: number | string){ // 밖에서 value의 타입은 number | string으로 메소드를 사용할 수 없음 value; value.toFixed(); // ❌ value.toUpperCase(); // ❌ // value의 타입이 number -> toFixed()사용 if(typeof value === 'number'){ // 조건문 내부에서는 value의 타입이 number console.log(valu..

🍊 타입 단언 특정 값을 원하는 타입으로 단언할 수 있다. 특정 타입으로 정의된 변수에 빈 객체를 넣어두면 에러가 발생한다. type Person = { name:string; age:number; } let person:Person = {} // ❌ 빈 객체를 넣는 경우 에러 발생 이는 person 변수 안에 들어가야할 프로퍼티가 존재하지 않기 때문이다. 그렇다면 변수person을 타입을 정의하지 않고 빈 객체를 할당한 후에 나중에 프로퍼티를 초기화하는건 가능할까? // Person타입을 선언해주지 않으면 나중에 프로퍼티를 초기화할 때 에러 발생 let person ={}; // 초기값인 빈 객체를 기준값으로 추론하기 때문 person.name = "kiji"; // ❌ person.age = 27; ..

타입 추론 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론하는 타입스크립트의 기능 타입스크립트는 모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공하지만 모든 상황에 타입을 잘 추론하는 것은 아니다. function func(param){ // 오류 } 함수의 매개변수 타입은 자동으로 추론이 불가능하다. 🥨 타입 추론이 가능한 상황 1. 변수 선언 일반적인 변수 선언의 경우 초기값을 기준으로 타입이 추론된다. // 변수의 초기값으로 타입을 추론 let a = 10; let b = "hello"; let c = { id:1, name: "기지", profile: { nickname: "kiji", }, urls:["https://kimkiji.com"], }; 2. 구조 분해 할당 객체와..

대수 타입 여러개의 타입을 합성해서 새롭게 만들어낸 타입 합집합 타입과 교집합 타입이 존재한다. 🍥 합집합 - Union 타입 바 | 를 이용하여 유니온 타입을 정의한다. let a:string | number; // string 타입과 number 타입을 모두 넣을 수 있음 a = 1; a = "hello"; // boolean 타입의 값도 넣고 싶다면 추가하기 let b:string | number | boolean; 유니온 타입으로 정의된 변수에는 구성된 타입의 어떠한 값도 넣을 수 있다. 유니온 타입에 참여하는 타입들의 개수에는 제한이 없으므로 원하는 타입을 모두 추가할 수 있다. 🍡 Union 타입으로 배열 타입 정의하기 배열 타입 또한 유니온 타입으로 다양한 요소를 담을 수 있다. let ar..

🥐 객체 타입의 호환성 모든 객체 타입은 각각 다른 객체 타입들과 슈퍼-서브 타입 관계를 갖는다. 따라서 업 캐스팅은 허용하고 다운 캐스팅은 허용하지 않는다. type Animal = { name:string; color:string; }; type Dog = { name:string; color:string; breed:string; }; let animal:Animal = { name: "기린", color: "yellow", }; let dog:Dog ={ name: "만복이", color: "white", breed: "진도", }; // 업캐스팅 animal = dog; // 다운 캐스팅 dog = animal // ❌ Animal 타입의 변수 animal에 Dog 타입의 변수 dog를 할당하는..