일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
- HTTP
- codestates
- 타임어택
- 렛츠기릿 자바스크립트
- 알고리즘
- 코드스테이츠
- 회고
- 정재남
- Async
- SQL 고득점 Kit
- javascript
- til
- 토익
- 리액트
- 코어 자바스크립트
- 파이썬
- 2주 프로젝트
- js
- programmers
- 토익 900
- 자바스크립트
- 프로그래머스
- 리덕스
- 제로초
- 백준
- 타입스크립트 올인원
- LeetCode
- 타입스크립트
- 손에 익히며 배우는 네트워크 첫걸음
- 4주 프로젝트
- Today
- Total
목록2024/02 (12)
Jerry
forEach, map 제네릭 분석 어떻게 타입스크립트가 타입을 파악할 수 있을까? 프로그래밍에는 마법이 없다, 제네릭 덕분이다. forEach interface Array { forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void; } // type A = // class A {} [1, 2, 3].forEach((item) => { console.log(item); }); // 1, 2, 3 ['1', '2', '3'].forEach((item) => { console.log(item); }); // 1, 2, 3 [true, false, true].forEach((item) => { console...
옵셔널, 제네릭 기본 ? : 있어도 되고 없어도 된다 라는 뜻 function abc(a: number, b?: number) {} abc(1) abc(1, 2) abc(1, 2, 3) 인터페이스나 타입 alias에서도 사용 가능 : b는 있어도 그만 없어도 그만 let obj: { a: string, b?: string } = { a: 'hello', b: 'world' } obj = { a: 'hello' } add함수는 잘못된 케이스 function add(x: string | number, y: string | number): string | number { return x + y }; add(1, 2); // 3 add('1', '2') // '12' 왜냐하면, 아래 경우를 생각하지 못 했기 때..
{}와 Object {}, Object는 모든 타입(null과 undefined 제외) const x: {} = 'hello'; const y: Object = 'hi'; 실제 객체 : object 실제로 사용할 때, object 지양, interface, type, class 지향 const xx: object = 'hi' const yy: object = { hello: 'world' }; // unknown = {} | null | undefined 합쳐진 것 const z: unknown = 'hi'; if (z) { z; // {} } else { // null | undefined } readonly, 인덱스드 시그니처, 맵드 타입스 // readonly interface A { readonl..
커스텀 타입 가드(is, 형식 조건자) 타입을 구분해주는 커스텀 함수를 직접 만들 수 있다. 리턴값에 is가 들어가 있는 타입은 커스텀 타입 가드 함수이다. if문 안에 써서 정확한 타입을 타입스크립트에게 알려줘야 함 그리고 is가 아니면 타입 추론이 안 되는 경우도 있다. interface Cat { meow: number } interface Dog { bow: number } function catOrDog(a: Cat | Dog): a is Dog { // 타입 판별을 여러분이 직접 만드세요. if ((a as Cat).meow) { return false } return true; } const cat: Cat | Dog = { meow: 3 } if (catOrDog(cat)) { // 커스텀..
unknown과 any(그리고 타입 대입가능표) any를 쓸 바에 unknown을 사용한다 any는 타입핑을 포기(선언), unknown은 정해진 타입만 사용할 수 있게 한다 interface A { talk: () => void; } const a: A = { talk() { return 3; }, } const b = a.talk(); const b: any = a.talk(); const b: unknown = a.talk(); (b as A).talk(); const b = a.talk() as unknown as number; b.toString(); unknown이 나오는 흔한 경우 에러가 어떤게 나올지 모르기 때문에 에러 타입에 대해 선언해준다 (*에러 사용법은 ts는 건망증이 심하다 편 참..
void의 두 가지 사용법 타입스크립트에서 "잉여 속성 검사" 라는 것이 있는데 객체리터럴을 대입할 때 검사를 한다 interface A { a: string } const obj1: A = { a: 'hello', b: 'world'} 하지만, 아래 예시처럼 하게 되면 검사를 하지 않는다? interface A { a: string } const obj = { a: 'hello', b: 'world'} const obj1 = A = obj; 아래 예시에서 함수의 리턴값은 void인데 값이 리턴되는 현상을 볼 수 있다. function a(): void { return '3'; return undefined; return null; } const b = a(); interface Human { talk:..
섹션 1 기본 문법 배우기 원시 래퍼 타입 const a: string = 'hello'; const b: String = 'hello'; a와 b는 서로 다른 타입이다. b는 랩퍼 객체로, new String(); 이런 식으로 사용하는 객체이며, 평소에 잘 사용하지 않는다. 그러니, 대소문자 구분을 잘하자. 참고로, 타입스크립트는 자동 완성 추천 기능도 제공 ( ctrl + space ) 템플릿 리터럴 활용 type World = "world" | "hell"; const c: World = 'world'; const d = `hello ${c}`; type Greeting = `hello ${World}`; rest parameter 활용 let arr: string[] = []; let arr2: ..
섹션 1 기본 문법 배우기 never 타입 : 배열에 일반적인 타입이 올 수 없다 const array = []; array.push('hello'); 아래 경고 메시지처럼, never 타입에의 파라미터에 string 타입을 추가할 수 없다고 한다. Element + F12 Element에 커서를 두고 F12를 눌렀을 경우, 해당 Element에 대해 추가 정보를 얻을 수 있음 느낌표는 null이나 undefined가 아님을 보증하는 방식 - 내가 책임 질게!! but, 퇴사하면 책임질 사람이 사라짐 const head = document.querySelector('#head'); if (head) { // head.innerTML = 'hello world'; // 오타났을 경우 알려주는 기능 제공 c..