programming study/TypeScript (28) 썸네일형 리스트형 타입 단언과 타입 가드 - 타입 단언은 지양하자 1. 타입 단언이란? 타입 단언이란, 타입을 구체적으로 명시하는 방법이다. 때로는 타입 추론보다 개발자가 타입에 대해서 자명하게 알 때가 있다. 대표적인 예시로는 아래처럼 react 프로젝트의 index.tsx에서의 코드를 들 수 있다. import React from 'react'; import { createRoot } from 'react-dom/client'; const root = document.getElementById('root') as HTMLElement; createRoot(root).render(); 위처럼 타입단언을 해야하는 이유는 아래와 같다. getElementById DOM API는 해당하는 id를 가지는 element 또는 null을 반환 createRoot reac.. TypeScript(8) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. tsconfig.json TypeScript 설정 파일 IDE가 이를 감지하여 프로젝트에서 TypeScript로 작업하는 것을 알게 됨 자동완성기능 제공 예시 { // where, 어디에 타입스크립트 파일이 있는 지 // TypeScript -> JavaScript로 컴파일하고 싶은 모든 디렉터리 넣기 "include": ["src"], // 컴파일 옵션 "compilerOptions": { // JavaScript 파일이 생성될 디렉터리 지정 "outDir": "build", // 어떤 버전의 JavaScript로 컴파일 할 지 "target": "ES6", // TypeScript가 어떤 런.. TypeScript(7) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 다형성을 활용한 클래스 정의 예시 다형성이란, 다양한 형태를 가질 수 있도록 하는 것 제네릭을 활용 // 제네릭이 지정되어 있어 해당 인터페이스가 적용된 객체는 value가 제네릭으로 넘겨받은 T로 적용되어야 함 interface CustomStorage { [key: string]: T } // 클래스 정의 // 제네릭을 지정함으로써 new 키워드를 사용할 때, 특정 타입을 넘겨 받음 class LocalStorage { // 넘겨받은 제네릭은 storage 프로퍼티에 지정된 인터페이스 CustomStorage에 전달 됨 private storage: CustomStorage = {} set(k.. TypeScript(6) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. readonly property에 읽기 전용 속성 부여 public property이어도 내용을 수정할 수 없음 TypeScript keyword 2. static JavaScript keyword 인스턴스 메서드가 아닌, 클래스 생성자 자체에 정의된 메서드 클래스를 생성하지 않아도 사용할 수 있음 3. interface typer과의 차이 object의 형태만을 정의 type은 다양한 목적으로 사용 가능 상속(extends)의 대상이 될 수 있음 type의 경우에는 &(and)으로 표현 객체지향 프로그래밍과 유사한 문법 클래스의 모양도 정의 가능 같은 interface를 여러번 선언하면, 합쳐.. TypeScript(5) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. Classes TypeScript에서는 객체 지향 프로그래밍 키워드를 사용할 수 있음 JavaScript로 컴파일되며 해당 키워드들은 사라짐 해당 키워드들은 TypeScript에서만 사용딤 ex) private, protected TypeScript에서는 클래스를 Type으로 사용할 수 있음 접근 제어자 정리 구분선언한 클래스 내상속받은 클래스 내인스턴스 private 접근 가능 접근 불가 접근 불가 protected 접근 가능 접근 가능 접근 불가 public 접근 가능 접근 가능 접근 가능 추상 클래스 다른 클래스가 상속 받을 수 있는 클래스 추상 클래스는 인스턴스를 만들 수 없음 추상 메소.. TypeScript(4) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. Polymorphism 다형성 다양한 구조를 가지는 것 Generic Type의 Placeholder 같은 것 사용할 함수의 모든 용도를 고려하여 Call signature를 정의하는 것은 비효율적 2. Geneirc Generic을 사용하여, 다형성을 구현 함수의 다양한 형태를 구현 작성한 코드의 타입 기준으로 바꿔줌 (꺽쇠) 안에 사용할 제네릭을 명시 함수를 단일 타입이 아닌, 다양한 타입에서 작동하게 할 수 있음 재사용성 증대 선언 시점이 아니라 생성 시점에 타입을 명시하여 다양한 타입을 사용할 수 있도록 하는 기법 type CallAllItem = { (arr: T[]):T } con.. TypeScript(3) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. Call Signatures 함수의 타입 어떤 타입을 받고 어떤 타입을 반환하는지 명시할 수 있음 type Sum = (a: number, b: number) => number; const sum: Sum => (a, b) => a + b; 2. Overloading 함수가 여러개의 Call Signatures를 가지고 있을 때 발생시킴 외부 라이브러리에서 자주 보이는 형태 다양한 방식으로 호출할 수 있는 함수를 지정할 수 있음 // merge type은 문자열들을 받았을 때는 문자열 합성을, 숫자들을 받았을 때는 숫자 합을 return type Merge = { (a: number, b: .. TypeScript(2) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. Type Alias 타입 별칭 타입을 변수처럼 재활용할 수 있음 const siru: Cat = { name: 'siru', age: 8, isVaccinated: true, } const nunu: Cat = { name: 'nunu', age: 6, } 2. readonly 객체의 요소를 읽기 전용으로 지정할 수 있음 재할당을 방지 배열에 readonly 속성을 부여하면, 배열 원본을 변형시키는 메서드의 호출 방지 원본을 변형하지 않는 map과 같은 메서드는 호출 가능 원본 변형을 방지하기 위한 장치 type Cat = { readonly name: string; age: string.. 이전 1 2 3 4 다음