Front

displayListByName(): string[] { // map - 기존 배열을 변환해서 새로운 배열을 만든다. // 아래 코드는 contact 배열의 name으로만 새로운 배열을 만든 코드다 return this.contacts.map(contact => contact.name); } displayListByAddress(): string[] { return this.contacts.map(contact => contact.address); } let heroes = [ { name: 'Tony', age: 30 }, { name: 'Captain', age: 100 }, ]; heroes.map(function (hero) { return hero.name; }); 예) herose 배열에서 n..

클래스 선언부 타입 정의 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, }, office: { num: 44455556..

제네릭은 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('정..