Front

제네릭은 API 응답 데이터를 받아올때 제일 많이 사용된다. interface PhoneNumberDictionary { [phone: string]: { num: number; }; } interface Contact { name: string; address: string; phones: PhoneNumberDictionary; } // api // TODO: 아래 함수의 반환 타입을 지정해보세요. function fetchContacts(): Promise { // TODO: 아래 변수의 타입을 지정해보세요. const contacts: Contact[] = [ { name: 'Tony', address: 'Malibu', phones: { home: { num: 11122223333, }, off..

tsconfig.json { "compilerOptions": { "allowJs": true, "checkJs": true, "target": "es5", "lib": ["es2015", "dom", "dom.iterable"], "noImplicitAny": false, "strict": true, "strictFunctionTypes": true }, "include": ["./src/**/*"] } noImplicitAny - 암묵적으로 any를 추론하게 하지말고 Type에 any라도 무조건적으로 명시하도록 설정 strict - strict플래그는 광범위한 유형 검사 동작을 활성화하여 프로그램 정확성을 더욱 강력하게 보장합니다. - 이 기능을 켜는 것은 아래에 설명된 모든 엄격 모드 제품군 옵션을..

// 제네릭의 타입 제한 function logTextLength(text: T[]): T[]{ text.forEach(function (text){ console.log(text); }) return text; } const text = logTextLength(['안녕', '잘가']); 정의된 타입으로 타입을 제한하기 interface LengthType{ length : number; } function logTextLength(text : T) : T{ text.length; return text; } logTextLength({ length: 10 }); logTextLength('a'); // 문자열에는 length가 제공되기 때문에 넘겨짐 logTextLength(10); //에러. 숫자에는..

제네릭 사용 전 이메일 선택 드롭다운 naver.com google.com hanmail.net 상품 수량 선택 드롭다운 1 2 3 const emails = [ { value: 'naver.com', selected: true }, { value: 'gmail.com', selected: false }, { value: 'hanmail.net', selected: false }, ]; const numberOfProducts = [ { value: 1, selected: true }, { value: 2, selected: false }, { value: 3, selected: false }, ]; function createDropdownItem(item) { const option = documen..

제네릭이란? 타입을 함수의 파라미터 처럼 받는게 제네릭이다 c#, java 등 재사용이 높은 컴포넌트를 만들때 자주 활용되는 특징이다. 한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. 제네릭의 기본 문법 function logText(text : T) : T{ console.log(text); return text; }; // 함수 타입을 함수 호출과 함께 지정함 logText(10); logText(true); logText('안녕'); 기존 타입정의 방식과 제네릭의 차이점 - 함수 중복 선언의 단점 // 단순히 타입을 다르게 받기 위해 중복 함수를 만드는건 안좋은코드 function logText(text) { console.log(text); text.splice('')...

1. 클래스 최상단에 멤버변수 타입을 지정해줘야한다. 2. constructor의 파라미터 타입도 지정해줘야한다. 3. 멤버변수의 유효범위까지 설정해줄수 있다. (private, public...) class Person{ private name : string; public age : number; readonly log : string; constructor(name : string, age : number){ this.name = name; this.age = age; } }

ES2015 (ES6)에서 나옴 class PersonData{ // 클래스로직 constructor(name, age){ this.name = name; this.age = age; console.log('생성 되었습니다'); } } var classSeho = new PersonData('세호', 30); // 생성 되었습니다 console.log(classSeho); 자바스크립트 프로토타입 소개 - 자바스크립트에서 지양하는 프로토타입을 이용한 상속 undefined 였던 admin객체에 .__proto__ 로 user 객체를 넣어줬더니 admin 객체에서 user 객체의 데이터를 받아왔다. 상속말고 admin에 role를 추가 했을때 admin객체가 role이 된다. 그러면서 user에서 정의한 속..

숫자형 Enums enum Shoes{ Nike, //0 Adidas //1 } var myShoes =Shoes.Nike; console.log(myShoes) // 0 - 별도의 값을 지정하지 않으면 숫자형 enum으로 인식함 - 초기화를 하지 않으면 0부터 1씩 증가하는 형태 문자형 Enums enum Shoes{ Nike = '나이키', Adidas = '아디다스' } var myShoes =Shoes.Nike; console.log(myShoes) // 나이키 enum 활용 사례 // 예제 enum Answer{ Yes = 'Y', No = 'N' } function askQuection(answer : string ){ if (answer == Answer.Yes){ console.log('정..

유니온 타입 ( 하나의 Type 이상의것을 쓸 수 있게 만든것 ) function logMessage(value : string | number){ console.log(value); } logMessage('hello'); logMessage(30); 유니온 타입의 장점 var seho : string | number | boolean; function logMessage(value : string | number){ if(typeof value == 'number'){ value.toLocaleString(); } if(typeof value == 'string'){ value.toString(); } throw new TypeError('value must be string or number'); ..

타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같습니다. 이러한 특징은 VSCode 상의 프리뷰 상태로 다른 타입과 어떤 차이점이 있는지 확인해볼 수 있습니다. 아래는 인터페이스로 선언한 타입을 프리뷰로 확인한 결과입니다. 아래는 타입 별칭으로 선언한 타입을 프리뷰로 확인한 결과입니다. type vs interface 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다. 따라서, 가능한한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다. TIP 좋은 소프트웨어는 언제나 확장이 용이해야 한다는 원칙에 따라 가..