Frontend 개발자 - hyo.loui

🎯목적 : TS 타입 추론(Type Inference), 정리 및 복습 1. 타입추론 이란? 정적타입 언어를 사용할 때 단점은 타입을 정의하는데 시간과 노력이 많이 필요해서 생산성이 저하될 수 있다. TS의 경우 다양한 경우에 대해 타입추론을 제공하기 때문에 꼭 필요한 경우에만 타입을 정의할 수 있다. // Type Inference let abc = "abc"; // string let number = 2; // number // abc = 123; // Error // number = "abcd"; // Error const n1 = 123; // string const n2 = "123"; // number const array2 = [1, 2, 3]; // Array const [x1, x2, x..

🎯목적 : TS Generic (제네릭), 정리 및 복습 1. 제네릭 이란? 제네릭은 타입을 마치 함수의 파라미터처럼 사용 하는 것이다 말로만 하면 감이 잘 안오고 이해가 안된다. 하지만 파라미터의 생김새와 대조해서 머릿속에 떠올려야 이해가 잘 된다 // Generic function generic(any: T): T { return any; } generic(1); // 1 generic("1"); // "1" generic(true); // true function 함수명 여기 를 따라서 타입이 전달되고 파라미터와 함수타입 : T 에 전달된다! 2. 제네릭 활용 1. getIteArray 는 배열(파라미터)에서, index(파라미터)번째에 있는 것을 찾는 함수 2. pushItemArray 는 배열(..

🎯목적 : TS Interface extension(인터페이스 확장), 정리 및 복습 1. 인터페이스 확장 타입 별칭과 인터페이스의 차이점은 타입의 확장 가능 여부이다. 인터페이스는 확장이 가능한데 타입 별칭은 확장이 불가능하다. 이 때문에, type 보다는 interface로 선언해서 사용하는 것을 추천한다. 방법은 두가지 이다 1. extends interface 새로운 인터페이스명 + extends + 붙일 인터페이스명 // interface extenstion interface Person { name: string; age: number; } interface Korea extends Person { birth: "korea"; } // vv 아래 내용과 동일하다 interface Korean ..

🎯목적 : TS Interface (인터페이스), 정리 및 복습 1. 인터페이스란? 앞서 설명한 타입 얼라이어와 같이 객체의 형태로 구성된다 하지만, 둘은 차이점이 존재하고 인터페이스는 타입 체크를 위해 변수, 함수, 클래스 등 좀더 다양한 곳에 사용할 수 있다. // interface // 기본 속성 interface Person { name: string; age: number; } const person_1: Person = { name: "tmdgy", age: 14, }; // Error: interface에서 할당하지 않은 다른 타입을 사용시 에러발생 // const person2:Person = { // name: 12, // age: 'one' // } 2. type vs interface..

🎯목적 : TS Type Alias (타입 별칭), 정리 및 복습 1. Type Alias ? 타입을 미리 객체의 형태로 선언해 둔 후 필요한 곳에서 별칭을 호출하여 사용할 수 있다. // Type Alias type Hero = { name: string; power: number; height: number; gender: "남" | "여"; }; Hero 라는 타입의 별칭! 2. 타입 별칭의 형태 // Type Alias type Hero = { name: string; power: number; height: number; gender: "남" | "여"; }; 3. 타입 별칭의 적용 const hero1: Hero = { name: "슈퍼맨", power: 100, height: 100, gen..

🎯목적 : Type Script Union 유니온|유니언 타입, 정리 및 복습 1. 유니온 타입이란? 타입을 "or 연산자"로 2개 이상 넣을 수 있게 해준다 // Union (A || B) const printOut = (input: string | number) => { console.log(input); }; printOut("hi"); // hi printOut(22); // 22 🧪나의 실험실 // Union (A || B) const printOut = (input: string | number) => { return input; }; const test_ = typeof printOut("hi"); // hi console.log("👉👉 test_", test_); //👉👉 test_ str..

🎯목적 : Type Script 이넘, 정리 및 복습 1. Enum (이넘) 이란? JS에는 없고 TS에만 있는 타입 특정 값들의 집합을 의미하는 자료형 쉽게 말해, 타입형 오브젝트(객체)이다 2. 숫자형 이넘 // 숫자형 이넘 enum Direction { Up = 1, // 시작 number 설정 가능! Down, Left = 200, // 중도 number 표기시 뒤로 작성한 것들은 (+ 1) 이 된다 Right, } console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); // 1, 2, 200, 201 const up: Direction = Direction.Up; console.log("👉👉 up", up); // ..

🎯목적 : Type Script 함수 타입 정리 및 복습 1. JS와 비교 JS // js function add(n1, n2) { return n1 + n2; } TS function add(num1: number, num2: number): number { return num1 + num2; } console.log("👉👉 add", typeof add(3, 4)); //👉👉 add number 🧪나의 실험실 // 실험 const one1 = add(1, 2); const two = add(1, "2"); // Error const three = add(1, 2, 3); // Error const four = add(1); // Error // 파라미터에서 return되는 타입이 바뀌는건 불가능 fu..