1. 타입스크립트 시작

들어가기

• 타입스크립트 무엇, 왜 사용하는지
• 학습 때 도움되는 자료

1.1. 타입스크립트 공부 시 알아야할 한 가지

• 타입스크립트는 타입을 위한 구문이 있는 자바스크립트
• 타입을 위한 구문은 변수나 매개변수, 반환값 같은 값에 타입을 부여
  - 타입은 데이터 형태 의미하며 데이터 형태란 문자열, 숫자, 객체 등 자료형
• 타입스크립트, 데이터 타입 명시적 표시 할 수 있게된 자바스크립트

1.2 공식문서와 플레이그라운드

• 타입스크립트 공부 시 공식 사이트 참고

1.3 왜 타입 필요

• 타입스크립트 목표는 자바스크립트 프로그램 정적 타입 검사자, 코드 실행 전에 실행(정적)하고 프로그램 타입이 정확한지 확인한는 도구(타입검사)
• 타입스크립트는 타입관련 오류와 오타를 코드 실행 전 잡아주므로 실제 코드 실행 시 오류 나는 경우를 줄임
• 자바스크립트 오류는 3가지로, 문법에러, 타입에러, 그 외 기타 에러
• 타입스크립트는 타입에러를 사전에 방지하는 데 탁월

타입스크립트가 타입에러를 잡는 예 2가지
1> 사소한 오타 있는 경우
2> 타입 관련 오류 있는 경우

• 타입에러를 사전에 차단하면 서비스 안정성 높아짐
• 타입스크립트는 자바스크립트 코드에 대한 설명서 역할

2. 기본 문법 익히기

2.1 변수, 매개변수, 반환값에 타입 붙이기

• 타입스크립트 사용 시 어떤 값에 타입 부여할지 알고 있어야 함
• 변수와 함수의 매개변수, 반환값에 타입 부여하고 이를 타이핑이라 표현

2.2 타입 추론 적극 활용

타입 추론 원칙

• 타입스크립트 어느 정도 변수와 반환값의 타입을 스스로 추론, 다만 매개변수에는 타입을 부여해야 함
• 타입스크립트가 타입 제대로 추론하면 그대로 쓰고, 틀리게 추론할 때만 올바른 타입을 표기

첫째, 타입 표기 시 hello,123,false 같은 정확한 값 입력할 수 있으며 이를 리터럴 타입이라 부름
둘째, 타입 표기 시 더 넓은 타입으로 표기해도 문제 없음
참고로 let, const 다르게 타입 추론하는데 let은 타입 넒게 추론하여 타입 넓히기를 함
null, undefined는 let 변수에 대입 시 any 추론

2.3 값 자체가 타입인 리터럴 타입 있음

• 주로 const에 사용 let은 보통 자료형 타입

const func : (a:number, b:string) => string = (a,b) => a+b;

• 값이 변하지 않는 것이 확실하다면 as const라는 특별 접미사 붙이면 readonly가 됌

2.4 배열 말고 튜플

• 타입[] 또는 Array<타입> 타이핑, <> 제네릭이라 부름
• 배열 추론 시 요소들 타입 토대로 추론 하는데 빈 배열은 any[]로 추론되므로 주의
• 타입스크립트 배열엔 자유도가 제한, 배열엔 대부분 같은 타입 값들어가나 다른 타입 값 들어가는 경우 보통 배열 길이 짧거나 고정
• 각 요소 자리에 타입 고정된 배열 특별히 튜플이라 부르는데 튜플 타이핑은 다음과 같음

const tuple:readonly [number, boolean, string] = [1,false,'h1'];
tuple[0] = 3;
tuple[2] = 5;
tuple[3] = 'no'
tuple.push('yes')
const strNumBools: [string, number, ...boolean[]] = ['hi', 1, false, true];
const [a, ...rest] = ['hi', 1, false, true];
// 명시적 타이핑
const [b, ...rest2] : [string, ...number[]] = ['hi', 1,2,3];
const tuple2: [number, boolean?, string?] = [1,false,'h1'];

• []안에 정확한 타입 하나씩 입력하고 표시하지 않으면 undefined 타입 됌
• push, pop, unshift, shift 메서드 통해 배열 요소 추가 및 제거 막지 않는데 push 까지 막으려면 readonly 수식어 붙이면 됌
• ...타입[] 표기 통해 특정 타입 연달아 나올 수 있음을 알려 ...은 전개 문법으로 특정 자리에 특정 타입 연달아 나옴 표시하며 타입 뿐만 아니라 전개 문법 사용해도 타입스크립트 타입 추론
• 구조분해 할당에선 나머지 속성 문법 사용가능해 역시 타입스크립트 타입 추론
• 타입 뒤에 ? 붙어 있음 옵셔널 수식어로 해당 자리에 값 있어도 그만 없어도 그만 의미하며 undefined 들어갈 수 있음

2.5 타입으로 쓸 수 있는 것 구분

• 타입 배우다 보면 값과 타입 헷갈리는데 값은 일반적으로 자바스크립트에서 사용하는 값 가리키고 타입은 타입을 위한 구문 사용하는 타입 가리킴
• 결론, 타입을 값으로 사용 못하는데 타입으로 사용할 수 있는 값과 타입으로 사용할 수 없는 값만 구분
• 대부분 리터럴 값 타입으로 사용, 반대로 변수 이름 타입을 사용 못하지만 Date, Math, Error, String, Object, Number, Boolean 같은 내장 객체는 타입으로 사용 가능

const date:Date = new Date();
function add(x: number, y: number): number { return x + y }
const add2  :typeof add = (x:number, y:number) => x+y

• String, Object, Number, Boolean, Symbol 타입 사용하는 것 권장하지 않음 대신 일반 타입 사용 권장
• 변수에는 typeof 앞에 붙여 타입으로 사용 가능
• 클래스 이름은 typeof 없이도 타입 사용 가능

2.6 유니언 타입으로 OR 관계 표현

• 타입스크립트엔 타입 위한 연산자, 유니언 타입과 유니언 타입 표기 위한 파이프연산자
• 유니언 타입은 하나 변수가 여러 타입 가질 수 있는 가능성 표시

let strOrNum : string | number  = 'hi'
const arr: (string| number)[] = ['3',1,2] 
function returnNumber(value: string | number): number {
    if (typeof value === 'string') { //타입좁히기
        return parseInt(value, 10);
    } else {
        return value;
    }
}
type Union1 =
| string
| boolean

• 유니언 타입으로 정확한 타입 찾아내느 기법, 타입 좁히기라 부름
• 타입 사이에만 | 쓰는게 아니라 타입 앞에도 쓸 수 있음

2.7 타입스크립트에만 있는 타입 배우자

• any외 unknown, void {}, never 등

2.7.1 any

• 타입스크립트 지양해야할 타입으로