Front

interface Drodown { value: T; title: string; } interface DetailsDrodown extends Drodown { description : string; tag : T; } let detailsDrodown: DetailsDrodown = { title: 'aa', description: 'bb', tag: 'bc', value: 'ss' } let drodown: DetailsDrodown = { title: 'aa', description: 'bb', tag: 55, value: 554 } value와 tag의 타입은 지정되어 있지 않다. 제네릭으로 사용시 지정할것이다. number가 될 수 도있고 string이 될수도 있다. 이런식으로 코드를 작성, 저..

타입 추론 (Type Inference) - 타입스크립트가 해당 타입을 어떤 타입으로 생각하는지가 타입 추론이다. 타입 추론의 기본 let x = 3; 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 x는 number로 간주된다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론된다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 변환 값 등을 설정할때 타입 추론이 일어난다. let a = 3; // vs상에서 개발자가 코드를 작성헀을때 코드의 타입이 무엇이다라고 정의해 나가는게 타입 추론이다. // 기본적으로 변수 할당시에 타입이 추론된다 // Es6부터 나온 기본타입지정문법 (b = 10) function getB(b = 10) { let c = 'hi'; return b + c; } // 1..

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; } }