Front

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 좋은 소프트웨어는 언제나 확장이 용이해야 한다는 원칙에 따라 가..

interface User{ age : number; name : string } // 변수를 인터페이스 활용 var seho : User = { age : 33, name : '세호' }; // 함수의 인터페이스 활용 (많이사용) function getUesr(user : User) : void { console.log(user) } const capt = { age : 44, name : '캡틴' } getUesr(capt); // 함수 스펙(구조)에 인터페이스를 활용 - 구조를 정의하는 인터페이스 interface SumFunction{ (a: number, b: number) : number } var sum: SumFunction; sum = function(a : number, b : numb..