기본 타입 - 문자열, 숫자, 배열
타입스크립트의 기본 타입에는 크게 12가지가 있다.
- Boolean
- Number
- String
- Object
- Array
- Tuple
- Enum
- Any
- Void
- Null
- Undefined
- Never
기존 JS 문자열 선언 방식
var str = 'hello';TS 선언 방식
TS를 사용할 때는 대부분 es6이상을 이용한다. - let, const 사용
타입 표기(Type Annotation):
:를 이용하여 자바스크립트 코드에 타입을 정의하는 방식
- 문자열
let str: string = 'hello';- 숫자
let num: number = 10;- 배열
// 제네릭 : Array<타입>
let arr: Array<number> = [1, 2, 3];
// 배열 리터럴 앞에 타입을 정의
let items: number[] = [1, 2, 3];
// 변수 타입에 어긋나는 경우 경고를 띄워 줌 (빨간밑줄-마우스오버하면 내용 뜸)
let heroes: Array<string> = ['Capt', 'Thor', 'Hulk', 10]; 
기본 타입 - 튜플, 객체, 진위값
간단한 객체는 object로 정의할 수 있지만, 더 구체적으로 object를 정의하고 싶다면 객체를 열어두고 그 안에 들어갈 속성의 타입까지 정의할 수 있다.
- TS 튜플
: 타입뿐만 아니라 위치까지 정해준다.(모든 인덱스의 타입을 정해줌)
let address: [string, number] = ['gangnam', 100];- TS 객체
: 구체적으로 객체의 타입까지 지정할 수 있다.
// 타입스크립트에서 객체를 정의하는 방식
let obj: object = {};
// 객체의 특정 속성의 값까지 타입을 정의
// 1) person이라는 변수를 object라고만 정의를 하면 person변수에 어떤 속성이 들어오던지 크게 신경쓰지 않는다.
let person: object = {
name: 'capt',
age: 100
};
// 2) person의 속성에 타입이 설정되면 해당하는 타입의 속성이 들어와야 한다.
let person: { name: string, age: number } = {
name: 'capt',
age: 100
} - TS 진위값
let show: boolean = true;함수 타입 - 파라미터, 반환값
- 함수의
파라미터에 타입을 정의하는 방식
function sum(a:number, b:number) {
return a + b;
}
sum(10, 20);- 함수의
반환 값에 타입을 정의하는 방식
function add(): number {
return 10;
}- 함수에 타입을 정의하는 가장 기본적인 방식
: 파라미터와 반환값의 타입을 정의하고, 파라미터의 갯수에 맞춰 인자의 갯수도 맞춰줘야하는 1:1 맵핑
function sum(a: number, b: number): number {
return a + b;
}함수 타입 - 파라미터를 제한하는 특성
JS에서는 함수실행 시 인자가 추가적으로 들어가게 되면 추가적인 인자들에는 반응하지 않는다. 이것이 JS가 주는 유연함이다.
function sum(a, b) {
return a + b;
}
sum(10, 20, 30, 40, 50);TS에서는 불필요한 인자가 들어갈 경우 어떻게 제약이 될까?
- 불필요한 인자가 들어갈 경우 타입스크립트의 함수가 함수에 대한 스펙을 정확이 이해한 상태이기 때문에 TS가 잡아준다.
function sum(a: number, b: number): number {
return a + b;
}
sum(10, 20, 30, 40);
함수 타입 - 옵셔널 파라미터
함수의 옵셔널 파라미터
- 특정 파라미터를 선택적으로 사용하고 싶을 때
?를 붙여준다.
function log(a: string, b?: string, c?: string) {}
log('hello world');
log('hello ts', 'abc');타입스크립트에서는 물음표와 느낌표에 많은 차이가 있다.
- 물음표는 옵셔널 체이닝(?)과 옵셔널 파라미터(?) 등으로 사용됩니다.
- 느낌표는 non-null assertion 이라고 해서 강의 후반부에 나오는 타입 단언의 한 연산자로 사용됩니다. 특정 코드가 null이 아니다라는 것을 사용자가 타입스크립트에게 얘기해주는 거죠.
💡참고
🖥 강의 참고 자료
주니어 프론트엔드 개발자 👼🏻