본문 바로가기

프론트엔드/TS 공부23

[팀미팅 질문] null 타입과 undefined 타입의 차이점과 용례는 무엇인가? 최종 수정 : 2024-05-29null 타입과 undefined 타입의 차이점자바스크립트와 마찬가지로 null은 값이 없음을 명시할 때, undefined는 선언은 됐으나 값이 할당되지 않았을 때 사용됩니다. TypeScript는 null과 undefined라는 타입이 존재하며, 각각 null과 undefined라는 값을 갖는다. 그 자체로는 유용하지는 않다.null typenull은 Object 자료형을 갖고 있다.의도적인 빈 값을 의미하며, 개발자가 의도적으로 값을 비어 두고 싶을 때 사용하는 값이다. undefined type변수를 선언할 때 값을 할당하지 않으면 기본적으로 할당되는 초기값이다. function foo() { // if Something return { a: 1, b: 2} .. 2024. 5. 29.
타입스크립트의 클래스와 접근 제어자 / 인터페이스와 클래스 최종 수정 : 2024-05-28타입스크립트의 클래스  접근 제어자(access modifier)객체지향을 다룰 때 상당히 중요한 개념이다. public : 누구나 접근 가능하도록 설정(기본값)protected :private :  생성자에 접근 제어자를 작성하면, 필드를 암묵적으로 생성한다. 따라서 필드에 작성된 코드가 있는 것을 중복으로 인식한다. 필드 정의를 삭제하면 된다. 또한, 초기화도 자동으로 해준다.인터페이스와 클래스interface CharacterInterface { name: string; moveSpeed: number; move(): void;}class Character implements CharacterInterface { name: string; moveSpeed: .. 2024. 5. 28.
함수 오버로딩 최종 수정 : 2024-05-28함수 오버로딩함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 정의하는 방법// 오버로드 시그니처 -> 버전들function func(a: number): void;function func(a: number, b: number, c: number): void;// 구현 시그니처 -> 실제 구현부// 매개변수 1개는 필수이므로 나머지는 옵셔널로 설정한다.function func(a: number, b?: number, c?: number) { if (typeof b === "number" && typeof c === "number") { console.log(a + b + c); } else { console.log(a * 20); }};func(); .. 2024. 5. 28.
함수 타입의 호환성 최종 수정 : 2024-05-28함수 타입의 호환성특성 함수 타입을 다른 함수 타입으로 취급해도 괜찮은가.1) 반환값의 타입이 호환되는가2) 매개함수의 타입이 호환되는가 1. 반환값이 호환되는가type A = () => number;type B = () => 10;let a: A = () => 10; // number typelet b: B = () => 10; // number literal typea = b; // 가능 -> 업 캐스팅b = a; // 불가능 -> 다운 캐스팅2. 매개변수가 호환되는가1) 매개변수의 개수가 같을 때type C = (value: number) => void;type D = (value: 10) => void;let c: C = (value) => {};let d: D =.. 2024. 5. 28.
함수 타입 정의 / 함수 타입 표현식과 호출 시그니처 최종 수정 : 2024-05-28함수 타입 정의함수를 설명하는 가장 좋은 방법이다.어떤 매개변수를 받고, 어떤 결과값을 반환하는지 정의할 수 있다. 화살표 함수의 타입을 정의하는 방법const add = (a: number, b: number) => a + b;함수의 매개변수옵셔널 파라미터(optional parameter)매개변수의 맨 뒤에 작성하며 선택적으로 사용을 허용한다.그러나 지정한 타입과 undefined가 유니언 타입으로 타입이 설정되므로 타입가드를 통해 구분해줄 필요가 있다. function introduce(name = 'yeongtaek', age: number, tall?: number) { console.log(`name : ${name}`); if (typeof tall ===.. 2024. 5. 28.