본문 바로가기
반응형

TypeScript

[typescript/타입스크립트] ToDo List 미니 프로젝트 - Main 코드리뷰
TypeScript 2023. 7. 31. [typescript/타입스크립트] ToDo List 미니 프로젝트 - Main 코드리뷰 HTML 삽입미리보기할 수 없는 소스 import './css/style.css' import FullList from './model/FullList' import ListItem from './model/ListItem' import ListTemplate from './templates/ListTemplate' css, FullList, ListItem, ListTemplate 파일을 모두 import한다. initApp() 함수const initApp = (): void => { const fullList = FullList.instance const template = ListTemplate.instance 싱글톤 패턴을 활용해 FullList, ListTemplate 의 유일한 인스턴스를 생성..
[typescript/타입스크립트] ToDo List 미니 프로젝트 - ListTemplate 코드리뷰
TypeScript 2023. 7. 31. [typescript/타입스크립트] ToDo List 미니 프로젝트 - ListTemplate 코드리뷰 HTML 삽입미리보기할 수 없는 소스 DOMList 인터페이스import FullList from "../model/FullList"; interface DOMList { ul: HTMLUListElement, // HTML 문서에서 요소를 나타내는 인터페이스 clear(): void, render(fullList: FullList): void, } 1. ul - 타입: HTMLUListElement - ul은 HTML 문서에서 요소를 나타내는 인터페이스이다. Todo 항목들을 표시하기 위해 사용할 요소를 가리킨다. DOMList를 구현하는 클래스에서 이 ul 속성에 해당하는 HTML 요소를 선택하여 Todo 항목들을 렌더링할 수 있다. 2. clear() - clear() 메서드는 DOMList에 연결..
[typescript/타입스크립트] ToDo List 미니 프로젝트 - ListItem 코드리뷰
TypeScript 2023. 7. 31. [typescript/타입스크립트] ToDo List 미니 프로젝트 - ListItem 코드리뷰 HTML 삽입미리보기할 수 없는 소스 export interface Item { id: string, item: string, checked: boolean, } export default class ListItem implements Item { constructor( private _id: string = '', private _item: string = '', private _checked: boolean = false, ) { } get id(): string { return this._id } set id(id: string) { this._id = id } get item(): string { return this._item } set item(item: string) { this._item ..
[타입스크립트(Typescript)] 내장함수, 메서드, 접근제한자 예시 총정리!
TypeScript 2023. 7. 23. [타입스크립트(Typescript)] 내장함수, 메서드, 접근제한자 예시 총정리! HTML 삽입 미리보기할 수 없는 소스 Array - `map`: 배열 요소를 변환하여 새로운 배열을 생성합니다. const numbers = [1, 2, 3]; const doubledNumbers = numbers.map(num => num * 2); console.log(doubledNumbers); // [2, 4, 6] - `filter`: 주어진 조건에 맞는 요소들로만 이루어진 새로운 배열을 생성합니다. const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4] - `find`: 주어진 조건에 맞는 첫 번째 요소를 반환합니다. ..
[TypeScript(타입스크립트)] Array&Tuple 배열과 튜플 문법
TypeScript 2023. 7. 21. [TypeScript(타입스크립트)] Array&Tuple 배열과 튜플 문법 HTML 삽입 미리보기할 수 없는 소스 1. 배열 (Array) - 배열을 선언하는 두 가지 방법 - 첫 번째 방법 : 타입[] - 두 번째 방법 : Array const eng: string[] = ['A', 'B']; const scores: Array = [3, 7, 8]; - eng 배열은 변경할 수 없고 읽기만 가능한 경우, `readonly` 키워드를 사용하여 매개변수로 선언할 수 있다. - 이 경우, 첫 번째 방법으로 배열을 선언해야 한다. function printArray(eng: readonly string[]) {} 2. 튜플 (Tuple) - 튜플은 서로 다른 타입을 함께 담을 수 있는 배열이다. - 하지만 튜플의 사용은 권장되지 않는다. - 대신 인터페이스, 타입 별칭, 클래스를 ..
[TypeScript/타입스크립트] 인덱스 시그니처(Index Signature), Keyof Assertion 개념 이해하기
TypeScript 2023. 7. 20. [TypeScript/타입스크립트] 인덱스 시그니처(Index Signature), Keyof Assertion 개념 이해하기 HTML 삽입 미리보기할 수 없는 소스 인덱스 시그니처(Index Signature) 객체의 동적 속성에 접근할 수 있도록 해주는 개념 객체의 속성 이름이 미리 정해지지 않았을 때, 문자열이나 숫자 등의 인덱스를 사용하여 속성에 접근할 수 있다. interface TransactionObj { readonly [index: string]: number; } const transactions: TransactionObj = { Pizza: -10, Books: -5, Job: 50, }; TransactionObj 인터페이스는 [index: string]: number 형태의 인덱스 시그니처를 갖는다. transactions 객체에는 인터페이스 형식인 문자열 : 숫자를 따라서 'Pizza', 'Books'..
[TypeScript/타입스크립트] 인터페이스(interface)개념 이해하기
TypeScript 2023. 7. 19. [TypeScript/타입스크립트] 인터페이스(interface)개념 이해하기 HTML 삽입 미리보기할 수 없는 소스 클래스도 겨우 넘어가고..ㅋㅋㅋ 이제 인터페이스를 이해하기로 했다. 클래스개념을 정리한 글을 꼭 ! 먼저 읽고 인터페이스를 보는 것을 추천합니다~!~! ⚠경고했슴다⚠ 1. interface가 뭐임? interface Musician { name: string; instrument: string; play(action: string): string; } 인터페이스는 파이썬에서도 본적이 없어서 이해하기 힘들었다ㅠㅠ 쉽게말해 그냥 '형식' 이라고 보면된다. 인터페이스는 단순히 형식을 정의하는 것이다. 클래스보다 더 추상적인 개념! 그럼 구체적인 예시와 함께 인터페이스의 기능에 대해 알아보자 !! 2. 클래스의 다중 상속 제한 파이썬에서는 클래스의 다중상속을 지원하지만 타..
[TypeScript/타입스크립트] 클래스(Class)개념 이해하기(⚠내마음대로 정리했음주의⚠)
TypeScript 2023. 7. 18. [TypeScript/타입스크립트] 클래스(Class)개념 이해하기(⚠내마음대로 정리했음주의⚠) HTML 삽입 미리보기할 수 없는 소스 자바스크립트에는 class 개념이 부재하기 때문에 처음 이해가 어려울 수 있다.흑흑ㅠ 나는 코딩테스트를 공부하기위해 파이썬을 학습했었고 파이썬에는 클래스 개념이 존재하기 때문에 타입스크립트의 클래스를 쪼금(?)더 이해하기 편했다. 여튼 아래는 내마음대로 클래스 중구난방 이해한 과정을 남기려고한다ㅎㅎ.. 글도 내 구어체로 막 쓸 예정 ㅎㅎ.. 타입스크립트는 명시적이다!!!! 머릿속에 새기자. (자스는 넘 자유분방햇!!!!) class Coder { secondLang!: string constructor( public readonly name: string, readonly music: string, private age: number, protected lang: ..
[TypeScript(타입스크립트)] function 함수 문법
TypeScript 2023. 7. 18. [TypeScript(타입스크립트)] function 함수 문법 HTML 삽입 미리보기할 수 없는 소스 1. 함수 선언 (Function Declarations) // 타입이 없는 JavaScript 함수 선언 function jsAdd(num1, num2) { return num1 + num2; } // 타입을 명시한 TypeScript 함수 선언 function add(num1: number, num2: number): number { return num1 + num2; } 2. 반환 타입 (Return Types) // 타입이 없는 JavaScript 함수의 반환 값 function jsFetchNum(id) { return new Promise((resolve, reject) => { resolve(100); }); } // 반환 타입을 명시한 TypeScri..
[TypeScript(타입스크립트)] Basic Types 기본타입 문법
TypeScript 2023. 7. 17. [TypeScript(타입스크립트)] Basic Types 기본타입 문법 HTML 삽입 미리보기할 수 없는 소스 1. 기본 타입 - number: 숫자 const num: number = -5 - string: 텍스트 const str: string = 'hello'; - boolean: 논리적인 값인 참 또는 거짓 const boal: boolean = false; - undefined: 값을 할당하지 않은 상태 let name: undefined; let age: number | undefined; age = undefined; age = 1; function find(): number | undefined { return undefined; } - null: 값이 존재하지 않음 let person: null; let person2: string | null; 2. 타입 ..
반응형

티스토리툴바