타입스크립트_기본타입 알아보기

🎈주제: 타입스크립트의 기본 타입

 

프론트엔드는 이제 타입스크립트가 필수라고 해도 과언이 아니다.

1. 기본을 배우기 전에 알아야 할 것

타입 스크립트를 사용하면서 꼭 기억해야 할 것들이 몇 가지 있다.

이 부분은 두고두고 기억해서 야무진 개발자가 되도록 하자!

 

1-1. any 지양하기

타입스크립트는 기본적으로 자바스크립에 타입을 묻힌(?) 것이라고 보면 된다.

하지만 "any" 타입을 묻히게 된다면...

그 코드는 자바스크립트나 다름없는 코드가 된다.

그러니까 왠만하면,, 아니 아예 쓰지 않는 것을 목표로 하자!

 

1-2. 그럼에도 불구하고,,,

우리가 아무리 노력해도 any 사용이 불가피할 때가 있을 것이다!

그럴 때 쓰도록 하자.

1. unknown
2. Generic
3. Type Guard
4. Type Assertion
5. ban-ts-comment

// @ts-expect-error
// @ts-ignore
// @ts-nocheck
// @ts-check

 

1-3. 이건 꼭 하자

1. strictNullChecks
2.  문서화
3. 선 타이핑 후 구현
4. 수많은 구글링
5. 컨벤션 & 팀 문화 지향 (팀 단위로,, 환경에 따라 사용하는 법이 다르다!)

 

1-4. 자 이제 시작이다. 

너무 잘 돼있기 때문에 TS - playground에서 연습을 해보자!

---

2. 기본 타입

 

2-1. type annotation

 

const num: number = 1

const str: string = '문자열'

 

이렇게 콜론(:) 다음에 타입을 붙이면 된다.

 

2-2. 원시 타입

이 친구들은 타입 추론이 가능하기 때문에 타입 어노테이션을 굳이 안 써도 된다.

 

const num: number = 123;
const str: string = '123';
const boll: boolean = true;

 

2-3. 객체 타입

 

// any와 다를게 없는 상황
const obj: object = {
	str: 'str',
    num: 123,
    child: {
    	str: 'str1',
        num: 123123,
    }
}

// 좀 더 자세하게 타입을 묘사하자
const obj2: { str: string, num: number, child: { str: string, num: number } } = {
	str: 'str',
    num: 123,
    child: {
    	str: 'str1',
        num: 123123,
    }
}

 

2-4. 함수 타입

함수타입은 매개변수의 타입과 반환하는 타입 2가지가 필요하다.

 

function sum(num1: number, num2: number): number {
	return num1 + num2
}

 

const func = (str1: string, str2: string): string => {
	return str1 + ' ' + str2;
}

 

const func = (obj: { str1: string, str2: string }) => {
	return obj.str1 + ' ' + obj.str2;
}

 

2-5. 배열 타입

배열은 자바스크립트에서 객체로 취급되니 주의하자!

const strArr: string[] = ['qwe', 'rty'];

const strArr: Array<string> = ['qwe', 'rty'];

 

2-6. 리터럴 타입

let은 재할당이 가능하므로, 타입 추론이 원시 타입이 된다.

하지만, const 재할당이 불가능하므로, 타입 추론이 값 자체가 된다.

let letString = 'Hello';
// letString 타입 추론: string

const constString = 'Hello';
// constString 타입 추론: 'Hello'

 

2-7. 튜플 타입

길이 고정 & 인덱스 타입이 고정된 배열을 말한다.

여러 다른 타입으로 이루어진 배열을 안전하게 관리하기 위해서 등장하였다.

 

const tupleArr:[string, number, string, boolean] = ['a', 1, 'c', true];

 

배열 타입의 길이 조절 가능

 

const tupleArr2: [number, ... string[]] = [1, 'a', 'b', 'c'];

 

2-8. undefined / null

타입스크립트에서는 undefined / null을 고유한 특별한 타입으로 인정한다.

(자바스크립트도 마찬가지!)

const nullValue: null = null;

const undefinedValue: undefined = undefined;

 

하지만,, 웬만해서는 사용하지 않는 것을 추천한다.

좀 더 세밀한 규칙을 가지고 사용하는 것을 지향합니다!

 

2-9. any

 

모든 값(타입)의 집합이다. 따라서, any를 사용하게 된다면 자바스크립트를 사용하는 것과 같다고 볼 수 있다.

때문에 타입스크립트를 사용할 때는

• noImplicitAny
• strict 옵션 true

두 옵션을 사용하는 것을 권장한다

 

2-10. unknown

 

새로운 최상위 타입이다.

any처럼 모든 값을 허용하지만, 상대적으로 엄격하다.

Ts에서는 타입추론에서 unknown이 나오는 경우가 없으니, 개발자가 직접 명시해야 한다.

assertion / 타입 가드와 함께 사용하면 된다!

 

let num: unknown = 99;

// 타입 가드를 사용함
if(typeof num === 'string') {
	console.log('string 타입입니다.')
} else {
	console.log('string 타입이 아닙니다.')
}

 

2-11. void

함수의 반환이 없는 경우를 명시하기 위해 사용한다.

보통 타입 추론에 위임하는 경우가 많다.

JS에서는 암시적으로 undefined를 반환하지만, Ts에서는 조금 다르기 때문에..

 

function func(): void {
	console.log('hello')
}

 

 

End.