본문 바로가기

Javascript40

타입스크립트 - 타입 가드 타입가드 Developer와 Person의 인터페이스를 정의하고 introduce 함수의 반환값의 타입을 Developer | Person 이라고 유니온 연산자를 사용하여 정의했다. 하지만 mcGregor.skill 부분을 보면 에러가 발생하는데, 그 이유는 유니온 연산자의 경우 피연산자들의 공통된 속성만 사용할 수 있는 성질 때문이다. 이 문제는 위 그림처럼 타입 단언을 통하여 해결할 수는 있다. 하지만 벌써부터 가독성이 안좋다는 것을 느낄수 있다. 그래서 이 부분을 해결하는 방법이 바로 타입 가드라는 것이다. 이렇게 타입 가드를 사용하면 기존 코드보다 훨씬 간결해 진것을 알수 있다! 2021. 4. 12.
타입스크립트 - 타입 추론 & 단언 제네릭을 사용한 타입 추론 interface Dropdown { value: T; title: string; } interface DetailedDropdown extends Dropdown { description: string; tag: K; } const detailedItem: DetailedDropdown = { description: '맨날 가고싶당.', tag: '여행', value: 'jeju', title: '제주도', } DetailedDropdown 인터페이스에서 Dropdown 인터페이스를 상속받았다. 그렇기 때문에 DetailedDropdown 인터페이스에서는 value와 title 값을 갖고 있고, DetailedDropdown의 제네릭 값을 Dropdown또한 받게 된다. 타입.. 2021. 4. 12.
타입스크립트 - 제네릭 제네릭은 타입을 함수의 파라미터처럼 사용하는 것을 의미한다. function getText(text) { return text; } getText('hi'); // 'hi' getText(10); // 10 getText(true); // true 위 함수는 파라미터로 text를 받고 그 값을 바로 리턴하는 함수이다. function getText (text: T): T { return text; } // 첫 번째 사용 방법 getText('hi'); // 'hi' getText(10); // 10 getText(true); // true // 두 번째 사용 방법 getText("Hello") // Hello 위 함수는 제네릭 기본 문법이 적용된 모습이다. 함수를 호출할 때 함수 안에서 사용할 타입( T.. 2021. 4. 8.
타입스크립트 - 클래스 class Person { private name: string public age: number readonly log: string constructor(name: string, age: number) { this.name = name this.age = age } } 기존 자바스크립트의 클래스와의 차이점은 생성자에서 쓰이는 변수들을 생성자 위에 먼저 정의를 해주어야 한다. 또한 접근제한자를 사용할 수 있다. (기본은 public) readonly는 해당 변수에 접근만 가능하고 값을 수정할 수는 없다. 2021. 4. 8.