[TypeScript] TypeScript 기본 문법 알아보기

기본 문법

런타임 환경에서 동작하는 동적 타입 언어인 JavaScript는 변수가 선언될 때 타입을 정하지 않고 런타임에 그 타입이 결정됩니다. 개발 속도가 빠르다는 장점이 있는 반면 코드의 복잡성이 증가함에 따라 단점으로 바뀔 수 있는데 타입 관련 버그를 컴파일 시점에 발견하기 어렵기 때문에 런타임 오류가 발생할 확률이 높아집니다.

이러한 문제를 해결하기 위해 TypeScript와 같은 정적 타입 언어가 등장했습니다.

 

// JavaScript와 TypeScript 문법
// javsScript 문법은 J로 시작 TypeScript 문법은 T로 시작

// 숫자
const Jnum = 20;
const Tnum: number = 20;

// 문자열
const Jstring = "JavaScript";
const Tstring: string = "typeScript";

// NaN
const Jnan = NaN;
const Tnan: number = NaN;

// infinity
const Jinfinity = Infinity;
const Tnfinity: number = Infinity;

// boolean
const Jboolean = true;
const Tboolean: boolean = true;

// null
const JnullValue = null;
const TnullValue: null = null;

// undefined
const JundefinedValue = undefined;
const TundefinedValue: undefined = undefined;

// 객체
const Jobj = {};
const Tobj: object = {};

// 배열
const Jarr = [];
const Tarr: Array<number | string> = ["S", 3];

// 함수형 
const Jfn = (a)=>{
  console.log(a);
}
// 반환 값이 없는 함수
const Tfn = (a: any): void => {
  console.log(a);
};
// 반환 값이 있는 함수이기 때문에 반환되는 타입을 정의
const Tsum = (a: number, b: number): number => {
  return a + b;
};

 

any와 unknown

TypeScript에서만 사용되는 타입인 any와 unknown은 타입 안정성과 유연성 사이의 균형을 찾기 위해 도입되었습니다. 두 타입 모두 모든 타입을 받지만 차이점이 있습니다.

 

any 타입

• typescript에서 가장 유연한 타입입니다.
• 타입에 모든 값이 할당 될 수 있습니다.
• any를 사용할 때는 타입 검사가 비활성화되어 타입의 변수에 모든 연산과 접근이 허용됩니다.

let value: any;

value = 5;           // 숫자 할당
value = "hello";     // 문자열 할당
value = [];          // 배열 할당
value.foo.bar = 10;  // 오류 없이 속성 접근 및 할당

 

unknown 타입

• any와 유사하게 어떤 값이든 할당될 수 있는 타입입니다.
• 어떤 값이든 할당 될 수 있지만 unknown 타입은 변수에 대한 연산이나 접근을 직접 수행 할 수 없습니다. 
• unknown 타입의 값을 다른 타입의 값으로 사용하려면 명시적으로 타입을 단언하거나 타입 가드를 통해 해당 변수의 타입을 좁혀야 합니다.

let value: unknown;

value = 5;           // 숫자 할당
value = "hello";     // 문자열 할당
value = [];          // 배열 할당

// value.length;     // unknown 타입에는 직접 접근할 수 없기 때문에 에러

if (typeof value === "string") {
    console.log(value.length);  // 타입 가드를 사용하여 안전하게 접근
}

let str: string = value as string;  // 타입 단언을 사용하여 명시적으로 타입 지정

 

any 타입은 TypeScript의 타입 안정성을 무력화시키기 떄문에 가능한 사용을 피하는 것이 좋으며 unknown을 사용하면 런타임 값의 타입을 컴파일 타임에 알 수 없는 경우에도 타입 안정성을 유지할 수 있기 때문에 더 안전한 대안으로 사용을 권장합니다.