🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
TypeScript
02-기본타입

1. TS 기본 타입

JS의 타입 종류

  • Primitive: number, string, boolean, bigint, symbol, null, undefined
  • Object: function, array…

TS의 기본 타입 종류

  • number, string, boolean, undefined, null
  • unknown, any, void, never, object
  • array, tuple

1.1 Type Annotation(타입 표기)

💡 타입 표기(Type Annotation)과 타입 추론(Type inference)

  • 타입 표기(Type Annotation)
    • :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식
    • 변수명:타입 이렇게 정하면 됩니다.
    • 개발자가 타입을 타입스크립트에게 직접 말해주는 것
  • 타입 추론(Type inference)
  • 타입스크립트가 알아서 타입을 추론하는 것
1
// 타입 표기
2
const age : number : 5; // 개발자가 타입을 타입스크립트에게 직접 표기
3
4
// 타입 추론
5
const rate = 5; // TS가 알아서 rate가 number 타입이라고 추론해줌

2. 기본타입

2.1 number, string, boolean, undefined, null

1
// 📝 number, string, boolean -------------------------
2
let 이름: string = '메시'
3
let 나이: number = 36
4
let 결혼: boolean = true
5
6
// 📝 undefined -------------------------------------💩
7
let 이름2: undefined
8
let 나이2: number | undefined // number 또는 undefined 타입 할당 가능
9
나이2 = undefined
10
나이2 = 1
11
12
// 📝 null -------------------------------------------💩
13
let person: null
14
let person2: string | null

null, undefined타입도 있지만, 굳이 사용하지 않습니다.

  • undefined : 값이 있는지 없는지 모름
    • 데이터 타입이 있거나 결정되지 않았을 때 사용
  • null : 값이 없음

cf. 💩는 가급적 사용하지 않기


2.2 unknown, any, void, never, object

1
// 📝 unknown ------------------------------------------------------------------
2
// 무슨 타입인지 알 수 없는 (JS 연동을 위해 있음) 💩
3
let 타입몰라: unknown = 0
4
타입몰라 = 'he'
5
타입몰라 = true
6
7
// 📝 any ----------------------------------------------------------------------
8
// 무엇이든 할당 가능 (JS 연동을 위해 있음) 💩
9
let 타입전부가능: any = 0
10
타입전부가능 = 'hello'
11
12
// 📝 void : 함수에서 아무 것도 반환하지 않을 때 사용 ------------------------
13
// undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
14
// 이 함수는 뭔가를 return하려고 하면 에러남
15
// void : 아무것도 없이 공허함, 비어있는
16
// 생략 가능
17
function print(): void {
18
console.log('hello')
19
return
20
}
21
let unusable: void = undefined // 💩
22
23
// 📝 never : 에러를 반환하거나 영원히 끝나지 않는 함수의 타입으로 사용 -------
24
// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
25
// 리턴하지 않는 함수일 떄, 이를 감안하고 코딩하라고 알려줄 떄
26
function throwError(message: string): never {
27
// message -> server (log)
28
throw new Error(message)
29
while (true) {}
30
}
31
let neverEnding: never // 💩
32
33
// 📝 objet ---------------------------------------------------------------------
34
// 어떠한 object(객체) 타입이든 받을 수 있음
35
let 학생명: object // 💩
36
function acceptSomeObject(학생명: object) {}
37
acceptSomeObject({ name: 'kim' })
38
acceptSomeObject({ animal: 'dog' })
39
40
// 타입 객체
41
const person: { age: number; name: string } = {
42
age: 100,
43
name: 'Capt',
44
}
45
person.age = 101

2.3 array, tuple

1
// 📝 Array : 같은 타입의 배열을 담을 수 있는 타입
2
const 과일: string[] = ['🍅', '🍌']
3
const 점수판: Array<number> = [1, 3, 4]
4
5
// 📝 Tuple : 서로 다른 타입의 배열을 담을 수 있는 타입
6
let 학생정보: [string, number]
7
학생정보 = ['메시', 123]
8
학생정보[0] // 메시
9
학생정보[1] // 123
10
const [학생명, 학생나이] = 학생정보

튜플은 사용하는 것을 권장하지 않습니다.

  • 데이터 접근할 떄, 인덱스로 접근하는 것은 가독성이 떨어짐
  • 튜플을 사용할 수 있는 곳에서는 대신에 interface, type alias, class 등을 사용하기
  • c.f. React의 useState의 API 정의를 보면 튜플임

3. 함수 타입

3.1 함수에서 타입 이용 가능

함수는 총 두 군데 타입지정이 가능합니다.

  1. 함수로 들어오는 자료(파라미터) : 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 작성
  2. 함수에서 나가는 자료 (return) : return 값 타입지정하고 싶으면 함수명() 우측에
1
function add(num1: number, num2: number): number {
2
return num1 + num2
3
}
4
5
function fetchNum(id: string): Promise<number> {
6
return new Promise((resolve, reject) => {
7
resolve(100)
8
})
9
}

3.2 optional, default, rest

1
// 1. Optional parameter --------------------------------------------
2
// 전달하려는 값이 있을 수도 있고, 없을 수도 있을 경우 ? 사용
3
function printName(firstName: string, lastName?: string) {
4
console.log(firstName)
5
console.log(lastName) // undefined
6
}
7
printName('메시', '리오넬')
8
printName('음바페')
9
printName('홀란드')
10
11
// 2. Default parameter -----------------------------------------------
12
function printMessage(message: string = '기본 값임') {
13
console.log(message)
14
}
15
printMessage()
16
17
// 3. Rest parameter --------------------------------------------------
18
function addNumbers(...numbers: number[]): number {
19
return numbers.reduce((a, b) => a + b)
20
}
21
console.log(addNumbers(1, 2))
22
console.log(addNumbers(1, 2, 3, 4))
23
console.log(addNumbers(1, 2, 3, 4, 5, 0))

4. Type Alias(타입 별칭)

Type Aliases = 새로운 타입을 정의할 수 있는 것

1
// Text라는 새로운 타입 정의 -----------------------------------------------
2
type str = string //
3
const 이름: str = '메시'
4
const 집주소: str = '아르헨티나'
5
6
// Student라는 새로운 타입 정의 ---------------------------------------------
7
// 여기 정의된 데이터만 넣을 수 있음
8
type Student = {
9
name: string
10
age: number
11
}
12
const student: Student = {
13
name: '메시',
14
age: 36,
15
}
16
17
// String Literal Types : 타입을 특정 문자열로 지정하는 것 --------------------
18
type 축구선수 = '호날두'
19
let 네이마르: 축구선수
20
네이마르 = 'name' // Error: 다른 문자열을 할당할 수 없고, '호날두'이라는 문자열 값만 사용 가능
21
22
type 제이슨 = 'json'
23
const json: 제이슨 = 'json'
24
25
type Boal = true

5. Type Inference(타입 추론)

Type Inference : 타입이 값을 통해 알 수 있는 경우 타입을 생략하는 법

  • TS가 자동으로 타입을 추론해주지만,
  • 프로젝트 크기가 커지면 타입을 알 수 없기 때문에 정확하게 타입을 명시해주는 것이 좋음
  • cf. Inference = 추론, 추측, 추리
1
let text = 'hello' // 'hello'가 문자열 타입이니, TS가 :string을 추론해서 생략 가능
2
function print(message = 'hello') {
3
console.log(message)
4
}
5
print('hello')
6
7
function add(x: number, y: number): number {
8
return x + y
9
}
10
const result = add(1, 2)