▶타입스크립트 인터페이스(interface) 타입스크립트는 매번 선언하는 변수 혹은 함수의 파라미터로 들어가는 변수에 대해서 반드시 타입을 정의해 주어야만 했습니다. 그런데 우리가 프로젝트를 진행하다보면 서로 다른 함수에 똑같은 인자를 넘겨주는 경우가 많은데요. 이때는 매번 반복적으로 작성을 해주어야 하는 걸까요? 이러한 반복되는 작업에 대해서는 인터페이스라는 것을 통해 코드를 좀 더 간결하고 깔끔하게 작성 가능합니다🤩 🔎 인터페이스란? 인터페이스는 미리 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 다음과 같은 부분에서 사용이 가능합니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 간단하게 인터페이스..
▶타입스크립트 함수 타입 - 파라미터, 반환값 이전에 함수에 대해 잠깐 다룬 적이 있는데, 이번 글에서는 함수에 대해 자세하게 파라미터와 반환값에 대해 알아보려고 합니다. 🔎 파라미터 타입 지정 함수 안에 들어가는 파라미터의 타입을 지정해 줄 수 있습니다. // 함수의 파라미터의 타입을 정의하는 방식 function sum_1(a: number, b: number) { return a + b; } sum_1(10, 20); 위 코드에서 들어가는 파라미터 a: number, b: number라고 지정해 주었기 때문에 함수에게 파라미터를 넘길 때에는 a와 b 모두 숫자로 넘겨야 하는 것이죠. 다음과 같이 지정한 타입과 다른 타입의 파라미터를 넘기면 타입스크립트는 에러를 띄워주게 됩니다. 🔎 반환값 타입 지정..
▶타입스크립트 기본타입 - 튜플, 객체, 진위값 지난 글에 이어 타입스크립트의 기본타입에 대해 알아보겠습니다😀 🔎 튜플 배열의 특정 인덱스까지 타입을 지정하는 것을 의미합니다. 예를 들어 0번째 인덱스는 string값이 와야 하고 1번째 인덱스는 number값이 와야만 해! 할 때 사용하면 되겠습니다. // TS 튜플 // 배열의 특정 인덱스까지 타입을 지정하는 것을 의미 let address: [string, number] = ['강남', 100]; 변수명: [string, number] ← 0번째 인덱스는 string타입, 1번째 인덱스는 number타입이 와야 해! 🔎 객체 객체는 { name: "doeunn", age: 22 } 처럼 여러 개의 key와 value를 가질 수가 있습니다. 타입스크립..
▶타입스크립트 기본타입 - 문자열, 숫자, 배열 우선 간단하게 자바스크립트에서 기본적으로 사용하는 문자열 선언은 다음과 같습니다. var str = 'hello'; 이제 타입스크립트에서의 문자열, 숫자, 배열 선언에 대해 알아봅시다! 🔎 문자열 // TS 문자열 선언 var str: string = 'hello'; 선언하려는 변수명 뒤에 :타입 을 적어주기만 하면 됩니다. 🔎 숫자 // TS 숫자 let num: number = 10; 🔎 배열 // TS 배열 let arr: Array = [1, 2, 3]; let alphabet: Array = ['A', 'B', 'C']; let items: number[] = [1, 2, 3]; // 간단하게 작성 가능! 배열에는 안에 들어갈 성분들의 타입도 정의..
▶프로젝트를 위한 타입스크립트 초기 설정 가장 먼저 node와 npm이 설치되어 있는지 확인해 줍니다. $ node -v $ npm -v NodeJS를 설치하면 노드 패키지 관리자인 npm도 같이 설치되게 되는데요. NPM(Node Packaged Modules)는 node.js에서 사용되는 모듈을 패키지로 모아둔 곳입니다. 필요한 모듈이 있다면 npm을 통해 간편하게 다운받을 수 있습니다. 🔎 TypeScript 설치 $ npm i typescript -g 🔎 간단하게 타입스크립트 컴파일러 사용해 보기 타입스크립트 컴파일러가 뭔데? 왜 쓰는건데? 💡컴파일(compile)? 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정의 의미 브라우저에서 실행되던 자바..
▶자바스크립트를 타입스크립트처럼 사용하기 앞서 자바스크립트를 두고 타입스크립트를 사용하는 이유를 이야기했었는데요. 자바스크립트로 아예 그러한 부분들을 커버하지 못하는 건 아닙니다. 다 방법이 있긴 합니다. 이번 게시물에서는 그 방법들을 알아보고 그럼에도 불구하고 타입스크립트를 사용하는 이유까지 알아보도록 하겠습니다. 0. 자바스크립트의 단점 아래와 같이 타입을 지정해준 타입스크립트는 해당 매개변수가 지정해준 타입과 다르다면 에러라고 알려주지만 자바스크립트는 그러지 못하고 있습니다. 그래서 원하는 결과인 30이 아닌 1020을 출력하게 되겠죠. 1. 자바스크립트에서 타입스크립트 기능 사용하기 바로 @ts-check과 JSDoc을 사용하는 방법인데요. @ts-check @ts-check을 주석으로 추가하면 ..
- Total
- Today
- Yesterday
- frontend
- 프론트엔드
- 자바스크립트 기초
- Python
- 타입스크립트
- 데이터분석
- 리액트
- 프론트엔드 공부
- styled-components
- HTML
- react-query
- 자바스크립트
- jest
- JSP
- 자바
- 프로젝트 회고
- 딥러닝
- rtl
- 프론트엔드 기초
- react
- 인프런
- CSS
- 리액트 훅
- 머신러닝
- 파이썬
- TypeScript
- testing
- 스타일 컴포넌트 styled-components
- 디프만
- next.js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |