타입스크립트란?

TypeScript의 목표는 JavaScript 프로그램의 정적 타입 검사자다. 즉, 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)이다.

목적

any 타입을 최대한 지양하고 정확한 타입의 지정으로 타입 검사에 대한 실수를 줄이는 것이다.

주의할 점

any 사용을 지양한다. (걍 쓰지마셈 → 쓰는경우도 있든데 알아보기)

타입 선언 방법 (type alias)

interface, type 등이 있다.

이 방법은 일반 함수에는 적용을 못하는 것 같다. 화살표 함수에만 적용되는듯 .. ? → 알아보기

// 1. type을 이용한 타입 선언 방법 (화살표 함수에 적용할 때)
type Add = (x: number, y: number) => number;

// 2. interface를 이용한 타입 선언 방법
interface Add {
	(x: number, y:number): number;
}

타입 정의(적용?) 방법

타입스크립트는 변수, 매개변수, 리턴 값에 타입을 붙이는 것이다.

타입은 표현식? 문? 이 가진 형태 그대로 작성하고, 변수(식별자) 뒤에 : 콜론으로 시작하여 타입을 지정한다. (화살표 함수, 일반 함수 참고)

함수

// 1. 일반함수 
// 일반 함수일 경우 매개변수에 바로 타입 지정 후 리턴 타입 지정
function add(x: number, y: number): number { return x + y; }

// 2. 화살표 함수
const add: (a: number, b: number) => number = (a, b) => a + b;

// 위 타입 선언 방법으로 적용하게되면 아래와 같다.
const add: Add = (a, b) => a + b;

배열

배열의 타입을 식별자뒤에 : 콜론으로 시작하여 타입을 지정해주고 [] 를 붙여주면 된다.

제네릭으로 지정할 수 있음. <> 이런 모양으로 생김.

튜플(tuple)의 경우 배열의 길이만큼 타입을 일일히 지정해준다.

const arr: number[] = [100, 200, 300];
const arrStr: string[] = ['100', '200', '300'];
const arrTuple: [number, string, boolean] = [100, '200', true];

// 제네릭 사용
const arrGeneric: Array<number> = [100, 200, 300];

객체

객체 변수(식별자) 뒤에 객체 프로퍼티의 타입을 지정한다.

const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };

타입 추론(tsc)

타입스크립트는 어느정도 타입 추론을 해준다. 정확하다면 타입 추론되는 것을 적극적으로 활용하자!
타입은 정확하고 범위가 좁을수록 좋다!

const a = '5'; 
const b: '5' = '5'; 
const c: string = '5'

여기서 가장 추천하는 방법은 a 이다. 가장 안좋은 방법은 c이다. a > b >> c 순서이다.

왜냐하면 a는 ‘5’로 타입을 추론해준다. 그렇기 때문에 굳이 b 처럼 타입을 적어줄 필요가 없다. c는 const 로 선언된 변수이고, 값이 ‘5’ 일 경우는 바뀔 일이 없는데 ‘5’ 라는 값보다 string 은 범위가 넓다 그렇기 때문에 지양하는것이 좋다.