[TypeScript] 기본적인 타입 지정 방법
ZAEYON• 2023년 4월 2일 작성
1. TypeScript 역할
타입스크립트는 자바스크립트의 상위집합(superset) 언어입니다.
즉, 타입스크립트는 자바스크립트의 기능들을 모두 포함하면서 자체 타입 시스텝 기능을 제공합니다.
순수 자바스크립트는 코드를 실행하기 전까진 특정 객체가 어떤 값을 가지고 어떤 동작을 수행하는지 알 수 없습니다. 따라서 코드를 작성하는 동안 코드가 어떤 동작 결과를 보일지 예측하기 어렵습니다.
이러한 문제에 대해 타입스크립트의 정적 타입 시스템은 작성된 코드에서 사용된 값들의 형태와 동작에 대해 설명해주고 프로그램이 제대로 작동하지 않을때 우리에게 알려주는 역할을 합니다.
2. 기본적인 타입 지정 방법
• 변수 타입 지정
변수를 선언할때 변수의 타입을 지정할 수 있습니다.
이는 선택사항이며 타입 표기가 추가되어 있지 않을땐 타입스크립트는 자동으로 변수의 타입을 추론합니다.
위와 같이 타입 표기는 항상 변수의 뒤쪽에 작성합니다.// string 변수 타입 표기 const name: string = "이재연"; // number 변수 타입 표기 const age: number = 26; // string 원소 배열 타입 표기 const strArray1: string[] = ["a", "b", "c", "d", "e"]; const strArray2: Array<string> = ["a", "b", "c", "d", "e"]; // number 원소 배열 타입 표기 const numArray1: number[] = [1, 2, 3, 4, 5]; const numArray2: Array<number> = [1, 2, 3, 4, 5]; // 모든 임의 값에 할당가능한 any 타입 표기 let obj: any = { x: 0 };
• 함수 타입 지정
함수의 매개변수와 반환값에 대해 타입을 지정할 수 있습니다.
반환 타입을 표기하지 않아도 타입스크립트는 return 문을 바탕으로 반환 타입을 추론할 것이므로 크게 중요하지 않습니다.// 함수의 매개변수 타입 표기 const introduce = (name: string) => { console.log("안녕, 내 이름은 " + name + "이야."); }; // 함수의 반환값 타입 표기 const getAge = (): number => { return 26; };
• 객체 타입 지정
객체의 프로퍼티들과 각 프로퍼티의 타입을 나열하여 타입을 지정할 수 있습니다.
각 프로퍼티의 타입 표기 또한 선택사항으로 타입이 지정되지 않은 프로퍼티는 any 타입으로 간주합니다.
const introduce = (info: { name: string; age: number }) => { console.log( "안녕, 내 이름은 " + info.name + "이고 나이는 " + info.age + "이야" ); }; // 프로퍼티 이름 뒤에 ?를 추가하여 해당 프로퍼티를 선택적인 타입(옵셔널)로 지정할 수 있습니다. const getUser = (info: { name: string; age?: string }) => { //... }; // age 값을 생략해도 함수를 호출할 수 있습니다. getUser({ name: "이재연" });