일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 30 | 31 |
- 자바의정석
- 정보처리기사실기정리
- 리액트
- 정보처리기사요약
- 국비IT
- 스프링
- 정보처리기사정리
- 정보처리기사실기
- CSS
- 자바스크립트
- 리액트네이티브
- 자바스크립트 코딩테스트
- ReactNative
- spring
- 국비코딩
- javascript
- 오라클
- 이안의평일코딩
- typescript
- 정보처리기사
- Java의정석
- 평일코딩
- Oracle
- 타입스크립트
- 자스코테
- react
- 정보처리기사실기요약
- VUE
- 코딩테스트
- php
- Today
- Total
목록Front-end/TypeScript (14)
이안의 평일코딩
타입 추론 // 타입 추론 기본 1 (변수, 속성, 인자의 기본 값, 함수의 반환 값) var a = 'abc'; function getB(b = 10) { var c = 'hi'; return b + c; } 10 + '10' //1010 // 타입 추론 기본 2 (인터페이스, 제네릭 이용) interface Dropdown { value: T; title: string; } var shoppingItem: Dropdown = { value: 'abc', title: 'hello' } // 타입 추론 기본 3 (복잡한 구조) interface Dropdown { value: T; title: string; } interface DetailedDropdown extends Dropdown{ descrip..
제네릭이란? 제네릭(Generics)이란 함수를 정의할 때 타입을 비워놓은 상태에서 타입이 뭐가 들어갈 것인지 호출하는 시점에서 정의하는 것으로, 타입을 추론해서 최종 반환값까지 붙일 수 있다는 타입 정의에 대한 이점을 가지고 있다. function logText(text: T):T { console.log(text); return text; } // : 함수의 타입을 string으로 쓰겠다 // 파라미터와 반환값이 string이 될 것이라고 제네릭으로 선언 const str = logText('abc') 제네릭을 쓰기 위한 빌드업 - 함수 중복 선언, 유니온 타입의 단점 아래와 같이 기존의 타입 정의 방식으로 각각 정의해서 함수를 중복으로 선언하면 문제없이 사용가능하지만 유지보수관점에서는 타입을 단순히..
이넘(enum)이란? 이넘은 특정 값들의 집합을 의미하는 자료형이다. 숫자형 이넘 enum Shoes { Nike, Adidas } var myShoes = Shoes.Nike; console.log(myShoes); // 0 var myShoes2 = Shoes.Adidas; console.log(myShoes2); // 1 문자형 이넘 enum Shoes { Nike = '나이키', Adidas = '아디다스' } var myShoes = Shoes.Nike; console.log(myShoes); // '나이키' 이넘은 구체적인 값을 제안해줌으로써 이넘에서 제공되는 값만 넘겨 좀 더 정확한 코드, 예외처리 케이스가 줄어들 수 있다. enum Answer { Yes = 'Y', No = 'N', } ..
유니온 타입 ' | ' 특정 타입을 여러개 쓸 수 있게 해준다. function logMessage(value: string | number) { console.log(value); } logMessage('Hi'); logMessage(100); 파라미터.을 찍으면 해당하는 타입의 API를 자동완성을 통해 쉽게 이용할 수 있다. var todo: string | number | boolean; function logMessage(value: string | number) { if (typeof value === 'number') { value.toLocaleString(); } if (typeof value === 'string') { value.toString(); } throw new TypeErr..
인터페이스란? 타입스크립트의 인터페이스는 항상 특정 형식을 준수하는 데이터만 받겠다는 상호간의 약속을 의미한다. 파라미터에 인터페이스를 정의하고 함수 호출할 때 파라미터에 정의한 인터페이스의 규칙을 따랐는지 확인한다. interface User { age: number; name: string; } // 변수에 인터페이스 활용 var ian: User = { age: 28, name: '이안' } // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } const person = { age: 28, name: 'ian' } getUser(person); 함수의 전체적은 모습까지 인터페이스가 정의할 수 있다는 게 장점. 라이브러리를 만들거나 ..
타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장된 언어이다. 타입스크립트는 왜 쓸까? 타입스크립트는 에러의 사전 방지 및 코드의 자동 완성이 가능해 개발의 생산성을 향상시켜주기 때문이다. (미리 타입을 정해두면 실행 전에 오류가 뜨기 때문에 에러가 사전에 방지되고, 예를 들어, number라고 미리 타입을 정해두면 .만 찍어도 number와 관련된 코드의 자동완성(intellisense)이 가능해진다.) 기본 타입(문자열, 숫자, 배열, 튜플, 객체, 진위값) // 문자열 let str: string = 'hello'; // 숫자 let num: number = 10; // 배열 let arr: Array = [1,2,3]; let items: number[] = ..