친구에게 쉽게 시작하는 타입스크립트 책을 받게 되어서 그동안 잘 모르고 사용했던 타입스크립트를 제대로 공부하며 남기기로 결심했습니다.
1. 타입스크립트?
자바스크립트에 타입을 부여한 언어입니다.
타입을 부여함으로써 에러의 사전방지와 코드 가이드 및 자동완성이 용이해지는 장점이 있어 많은 개발자들이 사용하는 언어입니다.
1-1. 에러의 사전방지
function sum(a, b){
return a + b
}인자 2개를 넘겨 받아 합을 구하는 sum() 함수 입니다. sum(10,20)을 넘기면 30이 반환 되겠죠. 근데 만약 sum(10, "20")을 넘기면 어떻게 될까요? 아마 문자열1020 반환될것입니다.
자바스크립트에 익숙하다면 당연하게 생각할 수 있지만, 자바나 스위프트, C++등 변수에 데이터 타입을 명시하는 언어를 사용하는 사람이 보기엔 이상한 결과일 수 있습니다.
이러한 부분이 타입이 없어 유연하기에 쉽게 개발할 수 있는 자바스크립트의 장점이자 단점 입니다.
function sum(a: number, b: number): number{
return a + b
}sum()함수를 타입스크립트로 바꾼 코드입니다.
파라미터 a,b는 숫자고, 반환값도 숫자라는 뜻입니다.
이렇게 해놓으면 sum(10, "20") 을 입력하면 IDE에서 미리 경고를 해주어서 에러를 사전에 방지할 수 있습니다.
1-2. 코드 가이드 및 자동완성
자바스크립트도 자동완성 잘 되는데?? 라고 하시는 분이 계실수 있습니다. 하지만 타입을 지정해주면 좀 더 강력한 가이드를 해줍니다.
function sum(a, b){
return a + b
}
let total = sum(10,20);
total.toFixed(2);이런 코드가 있습니다.
toFixed()는 숫자타입일때 사용할 수 있는 내장 API입니다. 만약 total의 값이 30이라면 30.00을 반환 해주는 역할을 합니다.
- 자바스크립트
보다시피 아무런 가이드를 해주지 않습니다.
- 타입스크립트
이런것이 가능한 이유는 타입을 명시해서 그렇습니다.
자바스크립트의 특성상 total변수는 문자열일지, 숫자일지, 진리값일지 알 수 없습니다.
하지만 타입스크립트는 파라미터와 반환값 모두 숫자라고 명시해 놨기 때문에 total변수는 숫자일 수 밖에 없고 total. 까지 입력하면 number타입에서 사용할 수 있는 내장 API를 보여 줄 수 있는겁니다.
이러한 기능을 사용해 생산성을 높여나갈 수 있습니다.
2. 타입정의
타입을 정의 할 때 사용할 수 있는 타입 종류는 여러가지가 있습니다. 그중 주요 데이터 타입인 아홉가지에 대해 알아 보겠습니다.
2-1. 문자열:string
let name: string = "kim";2-2. 숫자:number
let age: number = 20;2-3. 진리:boolean
let isLogin: boolean = false;2-4. 객체:object
let person: object = { name: "kim", age: 20 };조금 더 자세하게 명시하고 싶다면
let person: { name: string; age: number };이렇게 정의 할 수 있습니다.
2-5. 배열:Array
배열의 타입을 정의 하는데는 두가지 방법이 있습니다.
let blogs: Array<string> = ['티스토리', '네이버', '벨로그'];
let blogs: string[] = ['티스토리', '네이버', '벨로그'];2-6. 튜플:tuple
튜플은 특정 형태를 가진 배열입니다. 길이가 고정되고 각 요소 타입이 정의된 배열을 말합니다.
let items: [string, number] = ['hello', 20];만약 ['hello', 'world']를 입력하면 타입이 맞지 않기때문에 에러가 발생합니다.
2-7. any
any는 말 그대로 아무 데이터나 취급합니다. 유연함을 취하려고 할 때 사용하는 타입입니다.
let name:any = "kim";
name = 10;보다시피 any로 정의 했기에 초기값이 문자열 타입이어도 이후에 다른 데이터 타입을 할당할 수 있습니다.
2-8. null, undefined
null은 의도적인 빈 값, undefined는 변수 선언 시 값을 할당하지 않으면 할당되는 초기값 입니다.
let empty:null = null;
let notAssigned: undefined;3. 함수의 타입정의
3-1. 파라미터의 타입정의
function sum(a: number, b: number){
return a + b
}a와b를 더한 값을 반환하는 함수입니다. 숫자만 계산하고 싶기에 파라미터뒤에 타입을 붙여주면 함수를 사용할때 다른 타입을 입력할 시 에러가 발생합니다.
3-2. 반환값의 타입정의
반환값에도 타입을 정해줄 수 있습니다.
function sum(a: number, b: number): number{
return a + b
}와 같이 말이죠
Swift의 타입명시와 비슷한 구조를 띕니다.
3-3. 옵셔널
자바스크립트에서는 파라미터와 인자의 개수가 맞지 않아도 실행이 됩니다.
하지만 타입스크립트에서는 파라미터와 인자의 개수를 맞춰주어야 합니다.
하지만 만약 파라미터의 개수만큼 인자를 넘기고 싶지 않다면 어떻게 해야 할까요?
function sayMyName(firstName:string, lastName:string): string {
return firstName + lastName;
}성과 이름을 파라미터로 받고 합쳐서 반환해주는 함수입니다.
이 경우에는 무조건 두 개의 인자를 넘겨야 합니다. 하나의 인자만 넘긴다면
2개의 인자가 있어야 하는데 1개만 받았다는 에러가 발생합니다.
이때 사용하는것이 옵셔널입니다.
이와 같이 선택적으로 받을 파라미터에 ?를 붙여주면 에러가 사라집니다.
이제 sayMyName()를 호출할때 두번째 인자를 넘겨줘도되고 안 넘겨줘도 됩니다.
이상으로 타입스크립트의 변수와 함수에 타입을 정의하는 방법을 기록했습니다. 차근차근히 책을 읽어서 타입스크립트의 다른 내용도 포스팅 하도록 하겠습니다.
