강의 실습159 자바스크립트의 클래스 소개 한 입 크기로 잘라먹는 타입스크립트 - 자바스크립트의 클래스 소개 * 실습 환경설정 section6 폴더를 생성한 뒤, section5 폴더에서 사용했던 package-lock.json, package.json, tsconfig.json 파일을 복사하여 section6 폴더에 붙여넣는다. 이후 package.json 파일에서 'name' 부분 값을 'section6' 로 수정한다. - package.json{ "name": "section6", ...}이후 터미널에서 'npm i' 명령어를 입력하여 package.json 의 'dependencies' 에 명시된 외부 패키지들을 일괄적으로 설치한다. - Terminalnpm i added 2 packages, and audited 3 packag.. 2024. 11. 17. 인터페이스 합치기 한 입 크기로 잘라먹는 타입스크립트 - 인터페이스 합치기 1. 인터페이스 선언 합침 선언 합침(declaration merging) : 동일한 이름으로 정의한 인터페이스는 다 합쳐짐. 주로 라이브러리의 모듈을 보강할 때 사용. - chapter2.ts/** * 선언 합침 */// 타입 별칭 2번 정의시 오류type typePerson = { name: string;}type typePerson = { age: number;}// 인터페이스 2번 정의시 오류X// 동일한 이름으로 정의한 인터페이스는 다 합쳐지기 때문interface Person { name: string;}interface Person { // name: number; // 다른 타입 (충돌) - 선언 합침에선 허용X.. 2024. 11. 13. 인터페이스 확장하기 한 입 크기로 잘라먹는 타입스크립트 - 인터페이스 확장하기 1. 인터페이스의 확장 Animal 인터페이스의 서브 인터페이스 3가지를 생성하였다. - chapter1.ts/** * 인터페이스의 확장 */interface Animal { name: string; age: number;}// sub1interface Dog { name: string; age: number; isBark: boolean;}// sub2interface Cat { name: string; age: number; isScratch: boolean;}// sub3interface Chicken { name: string; age: number; isFly: boolean;}.. 2024. 11. 12. 인터페이스 한 입 크기로 잘라먹는 타입스크립트 - 인터페이스 section5 폴더를 생성한 뒤, section4 폴더에서 사용했던 package-lock.json, package.json, tsconfig.json 파일을 복사하여 section5 폴더에 붙여넣는다. 이후 package.json 파일에서 'name' 부분 값을 'section5' 로 수정한다. - package.json{ "name": "section5", ...}이후 터미널에서 'npm i' 명령어를 입력하여 package.json 의 'dependencies' 에 명시된 외부 패키지들을 일괄적으로 설치한다. - Terminalnpm i added 2 packages, and audited 3 packages in 604ms foun.. 2024. 11. 11. 사용자 정의 타입 가드 한 입 크기로 잘라먹는 타입스크립트 - 사용자 정의 타입 가드 1. 사용자 정의 타입 가드 - chapter4.ts/** * 사용자 정의 타입 가드 */type Dog = { name: string; isBark: boolean;};type Cat = { name: string; isScratch: boolean;};type Animal = Dog | Cat;// 사용자 정의 타입 가드// 타입스크립트 직접 만든 함수의 반환값으로 타입을 잘 좁혀주지 않는다.// 따라서 함수 자체를 타입 가드 역할을 하도록 만든다.// 함수 반환값이 true 면, 인수로 전달한 animal 값이 Dog 타입으로 인지.function isDog(animal: Animal): animal is Dog {.. 2024. 11. 4. 함수 오버로딩 한 입 크기로 잘라먹는 타입스크립트 - 함수 오버로딩 1. 함수 오버로딩 함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 정의하는 방법. 자바스크립트에선 지원이 안되고 타입스크립트에서 지원이 된다. - chapter3.ts/** * 함수 오버로딩 * 하나의 함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 만드는 문법 * -> 하나의 함수 func * -> 모든 매개변수의 타입 number * Ver1. 매개변수가 1개 -> 이 매개변수에 20을 곱한 값 출력 * Ver2. 매개변수가 3개 -> 이 매개변수들을 다 더한 값 출력 */// 오버로드 시그니쳐 : 함수의 구현부 없이 선언// -> 함수를 오버로딩하기 위해 각각 매개변수 별로 다른 버전을 명시해주기 위해 쓴다.function fun.. 2024. 11. 3. 함수 타입의 호환성 한 입 크기로 잘라먹는 타입스크립트 - 함수 타입의 호환성 1. 함수 타입 호환성 특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은가를 판단. 2가지 체크리스트) 1) 반환값의 타입이 호환되는지? 2) 매개변수의 타입이 호환되는지? -> 2가지 모두 만족해야 두 함수의 타입이 호환된다 말할 수 있다. - chapter2.ts/** * 함수 타입 호환성 */// 기준1. 반환값이 호환되는가?// 반환값끼리 업캐스팅하는 상황에서는 호환O// 반환값끼리 다운캐스팅하는 상황에서는 호환Xtype A = () => number; // number 타입type B = () => 10; // number 리터럴 타입let a: A = () => 10;let b: B = () => 10;a = b; // 허용 (업캐.. 2024. 11. 2. 함수 타입 표현식과 호출 시그니쳐 한 입 크기로 잘라먹는 타입스크립트 - 함수 타입 표현식과 호출 시그니쳐 -> 함수의 타입을 별도로 정의하는 방법 1. 함수 타입 표현식 (호출 시그니쳐, 함수 시그니쳐 로도 불리지만 공식문서에선 함수 타입 표현식으로 소개함) 타입 별칭을 이용해서 함수의 타입 정의 가능. - chapter1.ts/** * 함수 타입 표현식 */type Add = (a: number, b: number) => number;// const add = (a: number, b: number): number => a + b;const addFunc: Add = (a, b) => a + b;// 간결하고 깔끔한 함수 타입 표현식type Operation = (a: number, b: number) => number;const a.. 2024. 11. 1. 함수 타입 한 입 크기로 잘라먹는 타입스크립트 - 함수 타입 onebite-typescript/section4 폴더를 만든 뒤 vscode 로 해당 폴더를 연다. 이후 node.js 패키지를 초기화한 뒤, @types/node 패키지를 설치한다. npm init -y 명령어를 사용하면 자동으로 기본값으로 패키지 초기화가 진행된다. - Terminalnpm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation .. 2024. 10. 31. 이전 1 2 3 4 5 6 7 ··· 18 다음