김기지의 코딩노트

👾 인터페이스 확장 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법 interface Animal { name: string; age: number; } interface Dog { name: string; age: number; isBark: boolean; } interface Cat { name: string; age: number; isScratch: boolean; } interface Chicken { name: string; age: number; isFly: boolean; } 각 타입들은 Animal 타입을 기반으로 각각 추가적인 프로퍼티를 갖고 있다. 모든 타입에는 name, age 프로퍼티가 중복해서 정의되어 있어 Animal 타입의 프..

⚡️ 인터페이스 상호간에 약속된 규칙 타입에 이름을 지어주는 또 다른 문법 + 객체의 구조를 정의하는 데 특화된 문법으로 타입 별칭에서는 제공하지 않는 상속, 합침 등의 특수한 기능을 제공한다. interface Person { readonly name: string; age?: number; }; const person:Person = { name: 'kiji', // age: 28, -> 선택적 프로퍼티 }; person.name = '기지'; // ⚡️❌ -> 읽기전용으로 재할당이 불가능 인터페이스를 정의하고 타입 주석과 함께 사용해 변수의 타입을 정의하며 기본적인 기능을 타입 별칭과 거의 같다. ⚡️ 메소드 타입 함수 타입 표현식을 이용하거나 호출 시그니쳐를 이용해 메소드 타입을 정의한다. int..

🐳 사용자 정의 타입가드 참 또는 거짓을 반환하는 함수를 이용해 개발자의 입맛대로 타입 가드를 만들 수 있도록 도와주는 문법이다. type Dog = { name: string; isBark: boolean; }; type Cat = { name: string; isScratch: boolean; }; type Animal = Dog | Cat; function warning(animal: Animal){ // 타입 좁히기 if("isBark" in animal){ // 강아지의 경우 animal } else if("isScratch" in animal){ // 고양이의 경우 } } (타입을 수정할 수 없다고 가정할 때)in 연산자를 이용해 타입을 좁히는 방식을 사용한다. 조건문을 통해 타입이 좁혀지면 ..

🌻 함수 오버로딩 타입스크립트에서만 지원되는 기능 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법이다. 오버로드 시그니쳐 함수 오버로딩을 하기 위해서는 함수에 어떤 버전들이 있는지 알려주어야 한다. 함수 구현부가 없이 함수 선언식으로 표시하며 이를 오버로드 시그니쳐라 한다. // 함수 구현부가 없이 선언식만 써놓음 -> 오버로드 시그니쳐 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; ..