일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- java
- 그럼에도 불구하고
- react-router-dom
- 프론트엔드
- 코딩테스트
- coding
- media query
- frontend
- git
- node.js
- node
- github
- 자바
- 그럼에도불구하고
- CSS
- Servlet
- 자바문제풀이
- JS
- @media
- max-width
- react
- redux
- 반응형 페이지
- TypeScript
- 코드업
- webpack
- HTML
- cleancode
- 변수
- JavaScript
- Today
- Total
그럼에도 불구하고
[TypeScript] TypeScript의 기본 타입 본문
TypeScript의 기본 타입에 대해 알아보겠습니다.
[ 타입스크립트 기본 타입 ]
타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다.
타입스크립트의 기본 타입에는 크게 다음과 같이 12가지가 있습니다.
- Boolean
- Number
- String
- Object
- Array
- Tuple
- Enum
- Any
- Void
- Null
- Undefined
- Never
📌 String
자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다.
1 | let str:string ='Hello World!'; | cs |
💡 Tip
위와 같이 : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)이라고 합니다.
📌 Number
타입이 숫자이면 아래와 같이 선언합니다.
1 | let num: number = 100; | cs |
📌 Boolean
타입이 진위 값인 경우 아래와 같이 선언합니다.
1 | let isCorrect: boolean = false; | cs |
📌 Array
타입이 배열인 경우 아래와 같이 선언합니다.
1 2 | let nunArr: number[] = [1,2,3]; let strArr: string[] = ['javascript', 'typescript', 'react']; | cs |
또는 아래와 같이 제네릭을 사용할 수 있습니다.
1 | let numArr: Array<number> = [1,2,3]; | cs |
📌 Tuple
튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.
1 | let arr: [string, number] = ['Hello World', 100]; | cs |
만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 발생합니다.
1 2 | arr[1].concat('!'); // Error, 'number' does not have 'concat' arr[3] = 'hello'; // Error, Property '3' does not exist on type '[string, number]'. | cs |
📌 Enum
이넘은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다.
1 2 | enum Friends { Zenghyun, Joy, Anna } let people: Friends = Friends.Zenghyun; | cs |
이넘은 인덱스 번호로도 접근할 수 있습니다.
1 2 | enum Friends { Zenghyun, Joy, Anna } let people: Friends = Friends[0]; | cs |
만약 원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있습니다.
1 2 3 4 | enum Friends { Zenghyun = 5 , Joy, Anna } let people: Friends = Friends[5]; // Zenghyun let people: Friends = Friends[6]; // Joy let people: Friends = Friends[7]; // Anna | cs |
📌 Any
기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입입니다. 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있습니다.
1 2 3 | let str: any = 'hi'; let num: any = 10; let arr: any = ['a', 2, true]; | cs |
📌 Void
변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입입니다.
1 2 3 4 | let unuseful: void = undefined; function notuse(): void { console.log('sth'); } | cs |
📌 Never
함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입입니다.
1 2 3 4 5 6 | // 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미 function neverEnd(): never { while (true) { } } | cs |
'TypeScript > TypeScript basics' 카테고리의 다른 글
[TypeScript] TypeScript로 Google Maps API 사용하기 (0) | 2023.05.13 |
---|---|
[TypeScript] extends와 implements의 차이 (0) | 2023.05.04 |
[TypeScript] interface란? (0) | 2023.05.04 |
[TypeScript] 각종 실행 명령어 (0) | 2023.05.02 |
[TypeScript] TypeScript란? (0) | 2023.04.26 |