[Typescript] Type

pds·2022년 12월 12일
0

Typescript Study

목록 보기
1/4

타입스크립트 핸드북을 읽고 얻은 내용을 바탕으로 학습한 내용을 기록합니다.


Typescript?

자바스크립트 확장 언어로 자바스크립트에 타입이 부여됨

microsoft 에 의해 개발/관리되는 오픈소스 언어

microsoft/Typescript


왜 쓸까

js문법 그대로 사용하면서 정적 타입만 가짐

js는 타입을 알고 있지만 동적 언어라 특정 자료형을 특정지어주지 않고

타입이 고정되어 있지도 않으며 실행하는 시점에 판단함.

코드보완, 수정이 어렵고 앱 규모가 커져 많은 소스코드가 있을 때 잘못된 타입을 사용했을 경우 런타임 도중 의도치 않은 동작을 유도할 수 있게 됨

타입스크립트를 사용하면 정적타입 을 지원하기 때문에 컴파일 시점에 의도치 않은 오류를 미리 확인할 수 있다.

타입을 통해 특정 함수나 변수의 의도를 명확하게 기술할 수 있어 가독성을 높이고 디버깅을 쉽게 한다.



Types

기본적으로 타입을 명시하지 않고 바로 할당해도 타입을 알아서 추론하며

이후에 재할당 시에 최초 할당 타입을 가진걸로 인식됨

변수의 타입을 명시적으로 지정하기 위하여 타입 표기를 추가할 수 있으며 이는 선택 사항이다.


Primitive Type

string

boolean

number

type MyType = {
  str: string;
  bool: boolean;
  num: number;
}

String, Number 같은 wrapper 타입도 유효하나 사용하지 않는다


any

쓰지마


Array

  const array: number[] = [1,2,3];
  const array2: Array<number> = [1,2,3];

  type MyObj = {
    num: number;
    str: string;
  }
  const array3: MyObj[] = [{num: 1, str: "hell"}];

Function

typescript에서는 함수의 입력 및 출력 타입을 지정할 수 있다.
매개변수에 타입이 표기되었다면, 해당 함수에 대한 인자는 검사가 수행됨

파라미터 타입 표기

function preHell(str: string) {
	return "hell " + str;
}

preHell(123); // Argument of type 'number' is not assignable to parameter of type 'string'.

리턴 타입 표기

function parseNumber(str: string): number {
	return parseInt(str, 10);
}

리턴타입을 타입스크립트가 알아서 추론해서 굳이 안써도 되지만
애초에 타입스크립트를 왜 쓰는지 생각을 잘 해보자
빨간줄 뿐만 아니라 우리 눈을 위함이고 문서화를 위함이라고 할 수 있다.


Object

객체 타입을 정의하려면 해당 객체의 속성들과 그에 대한 타입을 명시해주기만 하면 된다.

// 매개 변수의 타입은 객체로 표기되고 있습니다.
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

Optional

없을 수도 있는 속성에 대해 지정한다.

type MyType = {
	str: string;
    num?: number;
}
const obj: MyType = {str: "hello"};
const obj2: MyType = {str: "hello", num: 25};

Union Type

서로 다른 두 개 이상의 타입으로 구성해 무엇이든 하나의 타입을 가질 수 있게 해준다.

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");

주의점

TypeScript에서 유니언을 다룰 때는 해당 유니언 타입의 모든 멤버에 대하여 유효한 작업일 때에만 허용된다.
유니온 타입의 속성이 공통으로 가진 프로퍼티라면 별도의 분기처리 없이 사용가능

function hi(val: string | number) {
  /**
	Argument of type 'string | number' is not assignable to parameter of type 	 'string'.
	Type 'number' is not assignable to type 'string'.ts(2345)
   */
	return parseInt(val, 10);
}

type & interface

별도의 커스텀 타입을 정의하여 활용할 때 사용

차이

Interface는 선언 병합이 가능하지만, Type Alias는 그렇지 않다.

interface는 동일한 이름으로 여러번 선언해도 컴파일 시점에 합칠 수 있다.

자바스크립트 객체의 유연한 확장과 연결될 수 있게 확장에 열려있도록 하게끔 interface를 설계했다고 한다.

둘의 성능차이에 대한 typescript 깃허브 페이지 문서도 다음에 읽어보자

결과만 말하면 되도록 interface 사용을 하라는 것이다.


Type Assertion

컴파일러에게 특정 타입 정보의 사용을 강제할 수 있다.

컴파일러가 가진 타입 정보를 무시하고 프로그래머가 원하는 임의의 타입을 값에 할당하고 싶을 수 있을 때 타입 단언(type assertion)을 사용한다.

컴파일 시 사라지는 정보이고 런타임에서는 전혀 영향이 없는데

잘못 사용하면 컴파일 시에는 괜찮아보였다가 런타임 때 이상한 값을 사용해 터질 수도 있으니 주의해야 한다.

  type A = string | number;
  function a(val: A) {
    (val as string).padStart(5, "A");
  }

너무 간단한 예제라 와닿지는 않지만 함수에 파라미터로 두 가지의 타입이 들어올 수 있게 의도되어있어

만약 다른 개발자가 number를 통해 이 함수를 사용했다고 가정하면 런타임 시 터진다.


null & undefined

strictNullChecks

설정하지 않으면 어떤 값이 null또는 undefined일 가능성이 있더라도

해당값에 평소와 같이 접근할 수 있고 모든 타입의 변수에 대응될 수 있다.

따라서 설정을 하지 않으면 딱히 타입스크립트를 사용하는 이유가 없다고 봐도 된다.

  function a(x: string | undefined) {
    return x.length; // 'x' is possibly 'undefined'.ts(18048)
  }

typescript 사용시 기본으로 설정되어있는 strict: true를 false로 변경해보니 진짜 빨간줄이 안뜬다.


tsconfig strict option

The strict flag enables a wide range of type checking behavior that results in stronger guarantees of program correctness. Turning this on is equivalent to enabling all of the strict mode family options, which are outlined below. You can then turn off individual strict mode family checks as needed.

Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior.


not null Assertion (느낌표)

TypeScript에서는 명시적인 검사를 하지 않고도 타입에서 null과 undefined를 제거할 수 있는 특별한 구문을 제공한다.
표현식 뒤에 !를 작성하면 해당 값이 null 또는 undefined가 아니라고 타입 단언하는 것

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

단 반드시 인자가 null 또는 undefined가 아닌 경우에만 사용해야 한다!

위의 함수 예제에서는 파라미터에 직접 타입을 지정해 사용해서 와닿지 않겠지만

외부 또는 다른 곳의 특정 타입에 대한 객체를 사용할 때 아마

형식적으로는 nullable하지만 실제로는 그렇지 않은 경우가 있을 것 같다.

그럴 때 사용하면 될 것 같다!


Reference

profile
강해지고 싶은 주니어 프론트엔드 개발자

0개의 댓글