55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
index.ts 파일에 밑줄이 안뜨네요...
아래 마지막글 참고해서 setting.json파일에 문구 추가하고 했는데 index.ts파일에 밑줄이 뜨지 않는데 어떻게 해결해야 하나요?? ㅠㅠ
- 미해결타입스크립트 입문 - 기초부터 실전까지
npm i typescript -g 에러
안녕하세요 npm i typescript -g 했는데 에러가 납니다 node 버전이 달라서 그런가요? 에러내용 : PS D:\workspace\learn-typescript\getting-started> node -v v14.17.4 PS D:\workspace\learn-typescript\getting-started> PS D:\workspace\learn-typescript\getting-started> PS D:\workspace\learn-typescript\getting-started> PS D:\workspace\learn-typescript\getting-started> npm i typescript -g npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! request to https://registry.npmjs.org/typescript failed, reason: unable to verify the first certificate npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\JBB\AppData\Roaming\npm-cache\_logs\2021-08-12T01_30_22_867Z-debug.log
- 미해결타입스크립트 입문 - 기초부터 실전까지
딕셔너리패턴 질문드립니다.
'.' <- 점을 찍어서 오브젝트내의 속성에 접근하는 방식을 딕셔너리 패턴이라고 하는건가요? 핸드북이나 구글 검색해도안나와서 여쭤봅니다. 추가질문드려요 interface IMarvleArray { [index:number] : string,} interface StringRegexDictionary { [key:string]: RegExp;} 의 경우에는 하나의 인터페이스에 하나만 정의 가능한건가요? 인터페이스 내에 다른 키타입과 밸류타입을 작성시 오류가 나더라구요 실무에서는 이방법이 많이 쓰이는지 아니면 const testArr:[string, number] = ["test", 123]; 이 방법이 많이 쓰이는지 어느쪽이 많이 쓰이는지 궁금합니다.
- 미해결타입스크립트 입문 - 기초부터 실전까지
인터페이스 질문드려용
안녕하세요 강의 잘 듣고있습니다. 궁금한 점이 생겨 질문드려요 위 코드에서 강의 내용처럼 인터페이스에서 함수구조를 정의 한 후에 sum 에 대입시켜서 사용하는것과 밑에 min 함수처럼 바로 파라미터 타입과 반환값의 타입을 바로 정해주고 사용하는것은 취향차이라고 생각하면 될까요??
- 미해결타입스크립트 입문 - 기초부터 실전까지
유니온 사용 이유가 헷갈려요 ㅠㅜ
typescript 입문하기가 너무 어려웠는데 선생님 덕분에 차츰차츰 배우고 있는 학생이에요! 인터페이스 Developer와 Person의 공통 멤버인 name만 사용할 수 있다고 하셨는데 유니온을 왜 사용하는건지 감이 잘 안와요.. name 하나만 사용할거면 타입을 하나만 정해도 되는거 아닌가요? 보통 뭘 할때 많이 사용 되는 개념인지 예시 하나만 들어주실 수 있으신가요?? ㅠㅜㅠ // 특징: 모든 타입의 공통적인 멤버에만 접근 가능 interface Developer { name: string, skill: string } interface Person { name: string, age: number } function askSomeone(someone: Developer | Person) { someone.name }
- 해결됨타입스크립트 입문 - 기초부터 실전까지
밑줄도 뜨지않고 npm 설치가 안되는 것 같습니다
2:34 정도에 말씀하시는 function 에 밑줄이 쳐져야하는데 쳐져있지가 않고 npm을 설치하고나서 터미널에 저런 문구가 뜹니다. 그래서 settings에서 문구를 추가하였더니 이런식으로 뜹니다 ㅠㅠㅠ 어떻게 하면 될까요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
만약에 인터페이스 3개를 상속 받았을 경우에 타입가드를 쓴다면
interface Samsung{ name:string; phonenumber: number; } interface KIA{ name: string; carnumber: number; } interface Apple{ name: string; Applenumber: number; } var phone : Samsung | KIA | Apple; function IsSamsung(typeProduct : Samsung | KIA | Apple): typeProduct is Samsung{ // 삼성이 아니라면 phone = KIA | Apple return (typeProduct as Samsung).phonenumber !== undefined; } function IsKIA(typeProduct : Samsung | KIA | Apple): typeProduct is KIA{ // KIA 가 아니라면 Apple return (typeProduct as KIA).carnumber !== undefined; } if(IsSamsung(phone)){ phone.phonenumber; }else{ if(IsKIA(phone)){ phone.carnumber; } else{ phone.Applenumber; } } 이런 식으로 함수를 2개 써서 하는게 최선일까요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
잘 되긴하는데 빨간줄이 나와서 거슬리네요
let arr = [ { gender: 'male', name: 'john' }, { gender: 'female', name: 'sarah' }, { gender: 'male', name: 'bone' }, ] var filetered = arr.filter(function(item){ if(item.gender ==='female'){ return item; } }); console.log(filetered);
- 해결됨타입스크립트 입문 - 기초부터 실전까지
filter 관련 질문
안녕하세요 선생님. 항상 강의 재밌게 잘 보고 있습니다! findContactByName(name:string):Contact[] { return this.contacts.filter(contact => contact.name === name); } 이와 같은 코드에서 fiter함수를 썼을 때 빈 배열이 반환이 될 경우, 리턴 타입과 불일치한데 이러한 경우는 어떻게 되는건가요??
- 미해결타입스크립트 입문 - 기초부터 실전까지
vue ie11 지원
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. vue, typescript 사용 중에 ie11에서 화면이 안나오고 있어서 문의드립니다. javascript1002 에러가 나타나고 있으며, 현상은 아래 url의 화면과 동일합니다.https://jacklyons.me/how-to-fix-vuejs-not-working-in-ie11/ 플러그인은 크게 ui프레임웍 quasar를 쓰고 있는 정도이며, package.json 아래와 같이 사용하고 있습니다. "dependencies": { "@quasar/extras": "^1.0.0", "@sentry/browser": "^5.15.5", "@sentry/integrations": "^5.15.5", "@shopify/draggable": "^1.0.0-beta.8", "animate.css": "^4.1.0", "axios": "^0.19.0", "core-js": "^3.1.2", "konva": "^4.0.16", "libphonenumber-js": "^1.7.38", "lodash": "^4.17.15", "moment": "^2.24.0", "moment-range": "^4.0.2", "quasar": "^1.11.3", "query-string": "^6.12.1", "register-service-worker": "^1.6.2", "v-calendar": "^1.0.0-beta.23", "validator": "^12.1.0", "vue": "^2.6.10", "vue-axios": "^2.1.5", "vue-bounce": "^1.1.0", "vue-class-component": "^7.0.2", "vue-infinite-loading": "^2.4.4", "vue-konva": "^2.0.11", "vue-loaders": "^3.0.2", "vue-multiselect": "^2.1.6", "vue-online-2": "^2.2.0", "vue-pinch-zoom": "^1.0.1", "vue-property-decorator": "^8.1.0", "vue-router": "^3.0.3", "vue-scroll-sync": "^1.0.5", "vue-uuid": "^1.1.1", "vuex": "^3.0.1", "vuex-class": "^0.3.2" }, "devDependencies": { "@babel/plugin-proposal-optional-chaining": "^7.7.5", "@bahmutov/add-typescript-to-cypress": "^2.1.2", "@cypress/webpack-preprocessor": "^5.4.1", "@types/chai": "^4.1.0", "@types/lodash": "^4.14.149", "@types/mocha": "^5.2.4", "@types/moment-range": "^4.0.0", "@types/uuid": "^3.4.6", "@types/validator": "^12.0.1", "@vue/cli-plugin-babel": "^4.0.3", "@vue/cli-plugin-e2e-cypress": "^4.0.3", "@vue/cli-plugin-eslint": "^4.0.3", "@vue/cli-plugin-pwa": "^4.1.1", "@vue/cli-plugin-typescript": "^4.0.3", "@vue/cli-plugin-unit-mocha": "^4.0.3", "@vue/cli-service": "^4.0.3", "@vue/eslint-config-prettier": "^5.0.0", "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", "babel-eslint": "^10.0.1", "babel-plugin-transform-imports": "1.5.0", "chai": "^4.1.2", "console-panel": "^1.0.4", "cypress": "4.12.1", "cypress-intellij-reporter": "^0.0.4", "eslint": "^5.16.0", "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-vue": "^5.0.0", "lint-staged": "^10.0.0-0", "mochawesome": "^6.1.1", "mochawesome-merge": "^4.1.0", "node-sass": "^4.9.0", "prettier": "^2.0.5", "sass-loader": "^7.1.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "ts-loader": "^7.0.5", "typescript": "^3.4.3", "vue-cli-plugin-quasar": "^2.0.0", "vue-template-compiler": "^2.6.10", "vuex-module-decorators": "^0.10.1", "webpack": "^4.43.0" }, "prettier": { "singleQuote": true, "arrowParens": "always", "trailingComma": "none", "jsxBracketSameLine": true, "htmlWhitespaceSensitivity": "css" }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ], "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{ts,tsx,*.vue}": [ "vue-cli-service lint --fix", "git add" ], "*.{ts,tsx,*.vue,*.scss,*.css}": [ "prettier --write", "git add" ] } plugin 좀 더 자세한 내용은 아래와 같습니다. import Vue from 'vue'; import { Quasar } from 'quasar'; import './push'; import VueAxios from 'vue-axios'; import axios from './axios'; import VueKonva from 'vue-konva'; // @ts-ignore import VueLoaders from 'vue-loaders'; import 'vue-loaders/dist/vue-loaders.css'; import InfiniteLoading from 'vue-infinite-loading'; // @ts-ignore import VCalendar from 'v-calendar'; // @ts-ignore import Bounce from 'vue-bounce'; import * as Sentry from '@sentry/browser'; import { Vue as VueIntegration } from '@sentry/integrations'; import PinchZoom from 'vue-pinch-zoom'; import 'animate.css'; // vue-axios : rest 통신용 라이브러리 Vue.use(VueAxios, axios); // vue-konva : svg 좌석 그리는 용도 Vue.use(VueKonva); // vue-loaders : 로더 모양 (추후 필요 없으면 삭제) Vue.use(VueLoaders); // vue-infinite-loading : list 무한 스크롤 // @ts-ignore Vue.use(InfiniteLoading, { slots: { noMore: Quasar.lang.props.msg.noMore, noResults: '' } }); // Use v-calendar & v-date-picker components Vue.use(VCalendar, { isDark: true }); // vue-bounce, ios scroll bounce handler Vue.use(Bounce); Vue.component('pinch-zoom', PinchZoom); // sentry if (process.env.NODE_ENV !== 'development') { Sentry.init({ dsn: 'https://b22383345c094318a3ca4cc89cdac858@o389025.ingest.sentry.io/5226673', integrations: [ new VueIntegration({ Vue, attachProps: true }), new Sentry.Integrations.GlobalHandlers({ onerror: false, onunhandledrejection: false }) ] }); } 이 상태에서 아래 url 에서의 상황을 실행해봐도 잘안되고 있습니다.https://program-error-review.tistory.com/32 모르는게 많아 질문도 어떻게 드려야 할지 몰라 혹시 추가로 알아야 하는 사항이 있으면 말씀부탁드립니다.
- 미해결타입스크립트 입문 - 기초부터 실전까지
옵셔널 파라미터 number 타입
const optionalFunc = (a: number, b?: number): number => { return a + b; }; optionalFunc(10, 10); 위에 코드처럼 작성하면 사진과 같이 b에 에러가 발생합니다. 인자를 모두 string타입으로 받는경우에 옵셔널 파라미터를 사용해도 에러가 발생하지않는데 왜 number타입에서는 저렇게 오류가 발생하는것인가요??
- 해결됨타입스크립트 입문 - 기초부터 실전까지
askSomeone 함수의 파라미터를 유니온 타입으로 작성했을 때
askSomeone 함수의 somone 파라미터를 유니온 타입(Developer | Person)으로 작성하고 해당 함수를 호출 할 때 askSomeone({ name: ‘디벨로퍼‘, skill: ‘웹 개발’, age: 34}) 로도 파라미터 주입이 가능한데요. 타입 구조체에 유니온 타입을 적용하게 될 경우 보장된 타입(공통된 타입)만 추론 가능한 것으로 이해했는데, Developer의 타입 구조체에 Person 타입 구조체의 속성인 age가 결합이 되어도 되는 건가요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
유니온 타입의 장점
유니온 타입의 장점에서 전달받는 value를 any로 써도 똑같이 추천 api/메서드로 숫자나 string 관련 api가 나오던데 유니온타입의 장점이라기보단 if 문 안에 조건이 평가되서 (typeof value === 'number') 그에 따른 메서드를 추천해주는 타입스크립트의 장점이 아닌가요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문입니다
핸드북을 읽다가 하이브리드 타입부분이 잘 이해가 안가서 질문합니다. 예제에서 말씀하신 함수타입이면서 객체타입을 정의할 수 있는 인터페이스 라는게 어디를 말하는 건가요? 말씀하신 여러가지 타입을 조합한 인터페이스를 만들 수 있다는 것은 인터페이스 안에 string, number, function등과 같은 여러개의 타입을 조합해서 하나의 interface로 만들 수 있다는 의미가 맞는 건가요? 제가 이해한 것이 맞는건지 몰라서 질문드립니다.
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문입니다.
당연한 것 같기는 하지만 궁금해서 질문합니다. 개발자가 타입에 대해서 더 잘안다는 의미로 타입단언을 사용해 null일 경우를 배재했는데 개발자가 예기치 못한 상황에서 해당 변수에 null 값이 들어가진다면 런타임에서 에러가 나는 것이겠죠?
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문이요
제네릭에서 사용하고 있는 <T>는 꼭 T가 아니여도 되는거죠?예로 test로 하고자 할때function it<test>(a: test): test { return a;}이렇게 네이밍을 변칙적으로 사용이 가능한거죠?
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문이요
자주 질문드려 죄송드리네요 그만큼 제가 너무 초보이다보니 하핫;;;궁금한 부분은 생성자함수를 쓰지 않고, 왜 클래스문법을 사용하는 이유가 궁금합니다. 웹에 제공된 글(제공된 문서)을 읽어보고 이해하는것이 저에게는 어려움이 있네요....
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문이요
this.name = name을 해준 이유가 이해가 잘 안갑니다....this.name을 지정한 이유가this -> Person{} 을 가리키고.name -> 객체 안에 name이라는 키를 생성시켜서 그 안에 name을 'seho'라고 치면 name: 'seho' 로 출력되는건가요?
- 미해결타입스크립트 입문 - 기초부터 실전까지
인터페이스 질문드립니다.
함수의 스펙을 인터페이스를 통해 정의를 해주었는데 함수를 선언할때 파라미터와 return값에 대한 타입을 또 정의하신 이유가 있으실까요??
- 미해결타입스크립트 입문 - 기초부터 실전까지
질문이요
interface Dev { ...Person lan: string }인터페이스에서는 이런 문법은 쓰면 안되죠?정의된 extends Person으로만 써야 하죠?