[TypeScript] 타입스크립트 타입 표기법

타입스크립트 타입 표기법을 배우다.

---

1. 타입스크립트에 대한 설명

 타입스크립트는 변수, 매개변수, 리턴값에 타입을 지정해 주는 것이다. 타입을 지정하지 않고 변수에 커서를 가져다 대면 타입스크립트 내에서 자체적으로 타입을 추론하여 알려주기도 하는데, 자체적으로 추론한 타입은 항상 내가 원하는 타입으로 추론하지는 않는다. 우리가 타입스크립트에서 타입을 지정할 때 기본적으로 해야 하는 것은 변수의 타입을 최대한 좁혀야 하는 것이다. 이것도 되고 저것도 되는 포괄적인 타입이 보다는 하나만 확실하게 가리키는 타입을 지정해줘야 한다. 최대한 타입스크립트의 추론을 믿고 타입스크립트의 타입 추론이 올바르다면 직접 작성한 타입을 지워주고 타입스크립트의 추론이 이상하면 직접 타입을 작성한다.

---

2. 타입스크립트의 기본적인 타입 종류

Type	설명
string	문자열
number	모든 수 (최대 2의 53승까지의 정수)
boolean	true or false
undefined	undefined
null	null
bigint	number보다 더 큰 수까지 가능
any	뭐든지 가능 (웬만하면 사용X)
object	객체
type[]	배열
[type, type, ..]	튜플

 

---

3. 변수 표기법

let a: string = '문자열'
let b: number = 5

타입은 무조건 소문자로 작성한다. 변수 오른쪽에 콜론을 사용하고 타입을 작성하면 된다.

---

4. 함수 표기법

funciton add(x:number, y:number):number

일반 함수 표기법은 매개변수 옆에 타입을 적고 매개변수 닫는 괄호 옆에 리턴 값의 타입을 작성한다.

---

5. 화살표 함수 표기법

// 방법 1
const add = (a: number, b: number): number => {
	return a + b;
    };
    
 // 방법 2
 const add: (a: number, b: number) => number = (a, b) => {
 	return a + b;
    };

 화살표 함수는 방법이 2가지가 있다. 방법 1은 화살표 함수의 형태에 타입을 작성한 것으로 보인다. 방법 2는 타입을 함수명 오른쪽에 콜론을 작성하고 적고 타입을 적고 그 이후는 기존의 화살표 함수와 동일하다.

 방법 1은 화살표함수 형태에서 크게 바뀐 점이 없기 때문에 외우기가 쉽다.  방법 2에 대해서 설명해보겠다.

타입스크립트는 결국 자바스크립트로 바뀌어서 작동되기도 하고, 타입은 visual studio code가 타입추론을 정확하게 한다면 작성 안 하는 게 코드 가독성에 유리하다. 따라서 타입을 지우기 쉬운 방법 2도 좋은 표기법이다.

---

6. 객체 표기법

let obj: {a: number, b: number} = {
	a : 5,
    b : 8,
    }

key에 해당하는 value의 타입을 작성해준다. 객체니까 중괄호를 사용해 준다.

---

7. 배열 표기법

let arr: string[] = ['1', '2', '3']

let arr2: Array<number> = [123, 456]

 배열의 요소의 타입을 적는다. 배열의 요소 타입은 모두 같아야 하기 때문에 타입[]의 형태로 작성한다. string으로 된 배열로 생각하면 이해하기 쉽다.

 두 번째 표기법은 꺾새를 사용하는 제네릭 표기법이다.

---

8. 튜플 표기법

let tuple: [number: number: string] = [123, 456, 'str']

타입과 튜플요소의 개수가 같아야만 성립한다. 각 요소의 타입이 다를 수 있기 때문에 각 요소의 타입을 정해줘야 한다.

---

9. 고정된 값과 const로 정의할 시 표기법

// 고정 값 타입
const x: 5 =5;
const b: true = true;

// 타입 범위 최소화 요구
const f: boolean = true;

 

 const를 사용해서 변수를 선언하면 해당 변수의 값은 절대로 변하지 않는다. 따라서 해당 변수의 값을 타입 값으로 지정할 수 있다. 예를 들어서 위 코드블록에서 const를 사용해서 x값을 5라고 정의했는데, 그럼 x 5로 불변하기 때문에 타입 범위 최소화에 의하여 타입 값이 숫자형 5가 된다.

 마찬가지로 항상 true인 변수 f가 boolean으로 되어 있는 것을 보면 타입 값을 true로 변경해줘야 한다.