[TS] TS Doc Handbook 1회독 - 1

온라인 TS 실행 환경

https://www.typescriptlang.org/play/?#code/Q

 

프로젝트 내부 TS 사용을 위한 컴파일 설치

 

데이터 타입

기본형 number, string, boolean, null, undefined, bigint, symbol => 그대로 사용된다

객체형 object, array, tuple => {key: type, optionalKey?: type, ...}, Array<type> or type[]

특수형 any, unknown, never

함수 function name(parameter: type): returnType {}

유니언 타입: 기존 타입 기반을 통해 새로운 타입 생성. type | type. 내부 함수(프로퍼티)를 사용할 때는 좁히기(narrowing)를 해야한다.

타입 별칭: type 키워드를 사용해 타입에 이름을 제공.

인터페이스: interface 키워드를 사용해 객체 타입을 만드는 또 다른 방법.

type와 interface는 비슷하지만 확장성에서 차이가 있습니다. (Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.)

interface는 extends와 중복 선언을 통해 확장할 수 있지만, type은 & 연산자를 통해서만 확장할 수 없다. type은 생성된 뒤 달라질 수 없다.

 

선호하는 방식에 따라 사용하는 것은 자유이지만,

공식문서에서 추천하는 방식은 interface를 사용해보고 문제가 있을 경우 type을 사용하는 것을 추천한다.

 

타입 단언(Type Assertion)

개발자가 TS보다 타입을 더 잘 아는 경우에 as 키워드를 사용해 타입을 구체적을 명시할 때 사용한다. 또한 as 키워드 대신 <>(꺾쇠괄호)를 사용할 수 있다.

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

 

추가적으로 ! 키워드를 사용하여 null 또는 undefined가 아님을 보장해주는 단언을 할 수 있다. 사용 시 주의가 필요한데, ! 연산자는 코드의 런타임 동작은 변화시키지 않기 때문에 실제로 null과 undefined가 아닌 경우에만 사용해야 한다.

function liveDangerously(x?: number | undefined) {
  // 오류 없음
  console.log(x!.toFixed());
}

 

리터럴 타입

리터럴이라는 말처럼 문자열이나 숫자 등 값을 타입으로 만드는 것을 의미합니다. 해당 타입은 다른 값을 허용하지 않습니다. 그렇기에 유니언 타입과 함께 활용합니다.

type Gender = 'male' | 'female';

 

리터럴 추론

리터럴 타입의 경우 객체 프로퍼티에는 적용이 되지 않아 문제가 발생할 수 있습니다.

const req = {method: 'GET', ...};

function handleReq(method: 'GET' | 'POST') {};

handleReq(req.method);
// req 객체의 프로퍼티인 method가 'GET' 타입이 아닌 string 타입이라는 오류가 발생합니다.

// 해결 방법 1
// 두 위치 중 한 곳에 타입 단언을 이용한다

const req = {method: 'GET' as 'GET', ...};

function handleReq(method: 'GET' | 'POST') {};

handleReq(req.method as 'GET');

// 해결 방법 2
// as const 키워드 사용하기
// 키워드를 사용하면 객체의 모든 프로퍼티에 리터럴 타입 값의 대입을 보장을 해줍니다.
const req = {method: 'GET', ...} as const;

function handleReq(method: 'GET' | 'POST') {};

handleReq(req.method);

 

열거형(Enum)

https://www.typescriptlang.org/ko/docs/handbook/enums.html

 

정적 타입 검사

tsc: 타입스크립트를 위한 컴파일러로 다양한 옵션을 통해 사용할 수 있다. 컴파일 설정은 CLI로 실행 시 적용할 수 있고, tsconfig 파일을 사용해 설정할 수 있다.

  --noEmitOnError 옵션: 좀 더 엄격한 동작을 위한 옵션

명시적 타입
자동 타입 추론

- 문맥적 타입 부여

 

다운 레벨링

엄격도

 - strict

 - noImplicitAny: any로 추론되는 변수에 대해 모든 에러. any 타입은 오류를 발생시킬 확률이 높기 때문에 사용하면 더욱 좋다.

 - strictNullCheck: null, undefined에 대한 처리

 

참고

 

무료 사이트 모음 2021, 자라는 것을 잘하는 개발, 2025.02.06

https://www.typescriptlang.org/ko/docs/handbook/typescript-from-scratch.html, 2025.02.06

https://opentutorials.org/course/5080, 생활코딩, 2025.02.06