55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
옵셔널 파라미터[타입스크립트 핸드북]
안녕하세요 주신 타입스크립트 핸드북에 보면 함수의 인자 부분에 옵셔널 파라미타 ? 넣는 게 있던데, function sum(a: number, b?: number): number { return a + b; } sum(10, 20); // 30 sum(10, 20, 30); // error, too many parameters sum(10); // 10 컴파일 에러는 잡히겠지만, sum(10); // 10이 아니라 sum(10); // Nan <- 10 + undefined(or null) 아닌가요~?
- 미해결타입스크립트 입문 - 기초부터 실전까지
인터페이스와 옵셔널 파라미터...
// 3. 함수의 스펙(구조)에 interface 활용 interface SumFunction { (a:number, b?:number): number; } var sum: SumFunction; sum = function(a:number, b?:number): number { return a + b; } console.log(sum(1)); // NaN console.log(sum(1, 2)); // 3 위에가 제 소스코드인데, return a + b; 의 b 밑에 빨간 에러줄이 뜨고,읽어봤더니 [개체가 'undefined'인 것 같습니다.] 라고 나왔습니다. 실제로 컴파일하고 콘솔로 찍어봤더니 console.log(sum(1)); -> NaN console.log(sum(1, 2)); -> 3 이 나오던데, console.log(sum(1)); -> 1 console.log(sum(1, 2)); -> 3 이렇게 나오게 하려면 코드 수정을 어떻게 해야 할까요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
코드 자동 정렬 질문드립니다!
eslint만 사용하기 위해 format on save를 끄니깐 저장시 자동정렬이 안되서 매우 불편한데, 강의처럼 저장시 코드가 자동 정렬되게 하려면 어떻게 하면 되나요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
eslint / tslint 설정 관련문의
안녕하세요 강사님, 강의 항상 잘보고 있습니다. 코드를 따라가면서 tslint 를 설치하려했더니, 지원이 종료되고 이제는 eslint 로 함께 사용한다고 해서요 설치하고 따로 찾아서 설정을해서 사용하는데 이전 강의에서 "const str: string = "hello";" 부분을 작성하면 린팅과정에서 ": string" 이 사라지게 되더라구요 이부분 찾아보니 "@typescript-eslint/no-inferrable-types": "off", rules 에 이 규칙을 추가해줘서 해결이 되긴했는데 이게 필수로 적용줘야하는 규칙인가요..?
- 미해결타입스크립트 입문 - 기초부터 실전까지
콘솔 찍었을 때 Promise 상태 질문드립니다!
pending - 비동기 처리가 아직 수행되지 않은 상태(대기) fulfilled- fulfilled 비동기 처리가 수행된 상태(성공) 즉, resolve 함수 호출된 상태강의 2:30 쯤에 나오는 Promise 옆 {<pending>} 은 무얼 뜻하는건지 궁금하고 저는 PromiseState가 강의처럼럼 resolved 아닌 fulfilled로 나오는데 뭔가요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
react에서 axios 응답 데이터에 대한 타입 정의 질문
axios data 형식이 위 사진처럼 들어오는데요. 이런 경우 타입 지정을 어떻게 해야하면 좋을까요? 밑에는 제가 잘못 예상한 타입 작성이에요 axios data 배열 첫번째 요소를 제외한 이후 요소들을 useState에 담아 관리할려고 하는데 이 부분까지 참고해서 적합한 타입 지정을 알려주시면 감사하겠습니다.
- 미해결타입스크립트 입문 - 기초부터 실전까지
핸드북 인터페이스 확장관련
안녕하세요. 캡틴판교님! 좋은 강의 감사드립니다!! 인터페이스 확장 관련해서 강의와, 타입스크립트 핸드북을 공부 중에 있습니다. 타입스크립트 핸드북에 인터페이스 확장 부분에 interface Person { name: string; } interface Drinker { drink: string; } interface Developer extends Person { skill: string; } let fe = {} as Developer; fe.name = 'josh'; fe.skill = 'TypeScript'; fe.drink = 'Beer'; 이렇게 작성되어있는데, Developer 는 Drinker 를 상속받지 않아 drink 속성에 접근 시에 오류가 발생할 것 같다 생각하여 질문 드립니다! 그래서 코드가 interface Person { name: string; } interface Drinker extends Person{ drink: string; } interface Developer extends Drinker { skill: string; } let fe = {} as Developer; fe.name = 'josh'; fe.skill = 'TypeScript'; fe.drink = 'Beer'; 이런 구조가 맞지않을까? 하여 질문드립니다!
- 미해결타입스크립트 입문 - 기초부터 실전까지
Map의 제네릭에 일반 인터페이스를 할당할 수 있나요?
interface ITest { id: number; name: string; isRole: boolean; } const userMap = new Map<ITest>(); 선생님 안녕하세요! 타입스크립트 공부중에 데이터자료형에도 사용해보고싶은데 위처럼 interface로 선언한것을 Map에 할당하고싶으면 어떻게 하면 좋을까요..?
- 해결됨타입스크립트 입문 - 기초부터 실전까지
정의된 타입으로 타입을 제한하기 강의에 대한 질문입니다.
현 강의에서 interface LengthType { length: number } function logTextLength2<T extends LengthType>(text: T): T { console.log(text.length) return text } logTextLength2('a') logTextLength2({ length: 123 }) 이 코드에서 문자열은 기본으로 length속성이 있으므로 첫번쨰 호출시 동작 하지만, 제 개인적인 생각으로는 너무 혼란 스럽습니다. 뭔가 눈속임? 편법 ? 같은 느낌이고 , 타입스크립트의 정에서 벗어난 형태 인것 같기도 합니다... 혹시 현업에서도 이런 방식으로 사용하는지 궁금합니다. ! 또한 이 코드를 보고 이렇게 생각하는 제가 아직 이해가 부족한건지 당연한 생각인지 한번 여쭙니다..
- 미해결타입스크립트 입문 - 기초부터 실전까지
선생님 수업 내용이 잘 이해가 안가는데요.
ㅜ,ㅜ 안녕하세요. 수업 내용중에 타입 제한을 쓰는 이유가 잘 이해가 안가는데요. 제네릭의 장점과 타입 추론에서의 이점 수업에서.. function logText<T>(text: T): T{ console.log(text); return text; } const str = logText<string>('abc'); str.split(''); const login = logText<boolean>(true); 이렇게 하면 str은 string, login은 boolean타입이 되어 각각 원하는 API나 관련 타입으로 이용이 가능하다고 하셨는데요. 그렇다면 아래 처럼 이렇게 하면 파라미터 반환값 모두 string형태인걸 자스도 알고 있는데 왜 length를 사용할 수 없나요? 자스에서 string에 string.length 속성이 있으니 사용할 수 있어야 하지 않나요? 그리고 타입 제한 수업 끝 부분에 function logTextLength<T>(text: T): T { console.log(text.length); return text; } logTextLength('hi'); string을 자스가 알지 못하니 파라미터와 반환값에 배열을 넣어 타입 힌트를 주는게 타입 제한이라고 하셨는데요. 우리가 호출하고 싶은건 logTextLength('hi'); hi라는 string인데 왜 배열을 힌트로 알려주나요? 힌트를 줄거면 string이라고 힌트를 줘야 하지 않나요? string글자가 char의 array형태이기 때문에 배열 힌트를 준건가요? 미리 감사합니다. 선생님!!!
- 해결됨타입스크립트 입문 - 기초부터 실전까지
선생님 유니온 코드 제거하는 코드에서 궁금한 점이 있습니다.
유니온 제거하는 코드에서 궁금한 점이 있습니다. --------------------------------------------- 궁금한점 아래 코드중에 forEach들어가는 부분에서요. // NOTE: 이메일 드롭 다운 아이템 추가 const item = createDropdownItem<string>(email); const item = createDropdownItem(email); 위의 코드 둘 다 오류가 안뜨는데 타입을 넣어주나 안넣어주나 상관 없나요? 어차피 const emails: DropdownItem<string>[] = [ emails변수 선언할때 DropdownItem에 스트링 타입으로 넣으라고 해놨기 때문에 타입스크립트 타입 추론 때문에 알기 때문인거죠? ------------------------------------- 여기는 전체 소스코드 interface DropdownItem<T> { value: T; selected: boolean; } const emails: DropdownItem<string>[] = [ { value: 'naver.com', selected: true }, { value: 'gmail.com', selected: false }, { value: 'hanmail.net', selected: false }, ]; const numberOfProducts: DropdownItem<number>[] = [ { value: 1, selected: true }, { value: 2, selected: false }, { value: 3, selected: false }, ]; function createDropdownItem<T>(item: DropdownItem<T>){ const option = document.createElement('option'); option.value = item.value.toString(); option.innerText = item.value.toString(); option.selected = item.selected; return option; } // NOTE: 이메일 드롭 다운 아이템 추가 emails.forEach(function (email) { const item = createDropdownItem<string>(email); const selectTag = document.querySelector('#email-dropdown'); selectTag.appendChild(item); }); numberOfProducts.forEach(function (product) { const item = createDropdownItem<number>(product); });
- 미해결타입스크립트 입문 - 기초부터 실전까지
제네릭, 타입 호환 내용 관련 문의
장기효님 안녕하세요.강의를 수강하다가 궁금한 점이 생겨 2가지 사항 문의 드립니다. Q1) Generic (제네릭 실전 예제 dropdown-generic.ts의 내용입니다) 아래의 # 1, # 2 두 코드는 동일하게 동작하나요?Lint error는 발생하지 않지만 제네릭 T 타입에 유니온을 사용할 수 있는 것인지 궁금합니다! # 1 function createDropdownItem(item: DropdownItem<string> | DropdownItem<number>) { ... } # 2 function createDropdownItem(item: DropdownItem<string | number>) { ... } Q2) 타입 호환 함수의 타입 호환에 대한 설명에서 sum = add; 는 불가하고add = sum; 은 가능하다고 설명해주셨는데, 직접 소스를 실행해보니 그 반대인 것 같습니다.강의 교안 코드를 그대로 실행하여도 동일한데 TypeScript 스펙이 변경된 건가요? 실행해본 소스는 다음과 같습니다. var add = function(a: number) { return a; } var sum = function(a: number, b: number) { return a + b; } sum = add; add = sum; // Error const res = sum(1, 3); console.log(res); (TypeScript Playground 링크) 부가 질문 혹시 Vue 3 강의나 Vue 3 + TypeScript 강의에 대한 계획이 있으신지 궁금합니다.장기효님의 Vue 3 강의가 있으면 너무 좋을 것 같아요 !양질의 강의에 감사드립니다!!
- 해결됨타입스크립트 입문 - 기초부터 실전까지
이넘 활용 강의에서 궁금한 점이 있습니다.
안녕하세요. 이넘활용 강의에서 function askQuestion(answer: Answer){ if(answer == Answer.Yes){ console.log('정답입니다.'); } if(answer == Answer.No){ console.log('오답입니다.'); } } askQuestion(Answer.Yes); <-- 가능 askQuestion('Yes'); <-- 불가능 이 부분 궁금한 점이 있습니다. askQuestion(Answer.Yes);는 가능하나 askQuestion('Yes');는 오류가 나는데요. askQuestion('Yes'); 이게 안되면 저 함수를 사용하는 의미가 없지 않나요? askQuestion(Answer.Yes);는 Answer.Yes가 Answer.Yes랑 같냐? 라는 의미라서 당연한 소리 같은데 당연한 소리를 위해 함수를 만든 의미가 없지 않나요? askQuestion('Yes');는 Answer.Yes가 'Yes'랑 같은지 묻는 내용이니 저 함수를 제대로 사용하려면 askQuestion('Yes'); 이게 되어야 하는데 이 부분에서 오류가 나니..저 함수를 사용하는 의미가 없지 않나요?
- 해결됨타입스크립트 입문 - 기초부터 실전까지
타입 제한 질문드립니다
interface LengthType { length: number; } function logTextLength<T extends LengthType>(text: T): T { text.length; return text; } logTextLength('10'); https://www.inflearn.com/questions/411248 여기서 인자로 '10'이 length프로퍼티를 가진 객체만 가능하다고 하셨고 여기까진 이해 했습니다. 근데 '10'은 문자열로 프로토타입 체인상에 length프로퍼티를 갖지만 객체가 아니지 않나요 ? + 인터페이스는 객체의 프로퍼티 타입을 정의할 때만 사용하는것인지요 ? 감사합니다:)
- 미해결타입스크립트 입문 - 기초부터 실전까지
git hub 관련 파일설치후 해당 파일이없음...
안녕하세요 타입스크립트 배우려고 github 파일복사후 npm으로 실행했는데요 learn-typescript 안에 폴더 getting-started가 없어요ㅜㅜ 그래서 터미널로 tsc index.ts 실행해도 에러나와서요 도와주세요..ㅜ
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문이요
class Person { 에서 Person에 마우스를 올리면 class Personinterface Person 이렇게 나오는데 왜 계속 같은 폴더내의 다른 파일에서 선언한 것들을 참조 하나요..ㅠㅠ
- 미해결타입스크립트 입문 - 기초부터 실전까지
타입 호완 관련 질문이있습니다!
안녕하세요! 강의 잘듣고있습니다. 아래 예제에서 sum = add 라고 선언을 했는데 왜 인자가 1개 들어가면 에러가나오나요?? 하지만 인자를 2개 넣어준다면 add 함수를 실행시킨 것처럼 log가 찍히는데 타입 호환이라는데 입력은 기존 대로 받지만 내부 실행만 호환된 코드로 실행되는건가요?? var add = function add(a: number){ // ... console.log(a); } var sum = function(a: number, b: number){ // ... } sum = add; sum(1);
- 해결됨타입스크립트 입문 - 기초부터 실전까지
타입 단언 관련 질문이 있습니다!
안녕하세여 강의잘보고있습니다! 타입 단언에 대해 궁금한점이있습니다. as 로 타입 단언을 해주면 null 같은 예외처리를 안해줘도 되는 건가여? as 로 단언 해도 null이 들어올 수 있는거아닌가요??(빨간 경고줄이 사라져서 여쭈어봅니다..) 아니면 단언을 한다는 것이 무조건 이것만 들어온다? 이런 느낌으로 받아 들이면될까요??..
- 미해결타입스크립트 입문 - 기초부터 실전까지
declaration 관련 에러
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 정의 관련 에러 나시는 분은 안계신지 질문이 없네요. 저는 1_type-basic .ts 파일에서 arr 변수를 이미 선언했고 타입이 다르기 때문에 에러가 발생합니다. 아무래도 파일을 나눠도 같은 global 실행 컨텍스트에 두 개의 arr 변수가 할당되는게 아닌가 싶어요. 혹시 저만 발생하는 비정상적인 동작이라면 문제와 해결 방법을 알 수 있을까요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
요거맞을까요 ?
interface IItemProps<T> { value: T; selected: boolean; } const emails :IItemProps<string>[]= [ { value: 'naver.com', selected: true }, { value: 'gmail.com', selected: false }, { value: 'hanmail.net', selected: false }, ]; const numberOfProducts:IItemProps<number>[] = [ { value: 1, selected: true }, { value: 2, selected: false }, { value: 3, selected: false }, ]; function createDropdownItem<T>(item:IItemProps<T>) { const option = document.createElement('option'); option.value = item.value.toString(); option.innerText = item.value.toString(); option.selected = item.selected; return option; } // NOTE: 이메일 드롭 다운 아이템 추가 emails.forEach(function (email) { const item = createDropdownItem(email); const selectTag = document.querySelector('#email-dropdown'); selectTag.appendChild(item); });