[ Typescript ] Typesctipt 타입 종료, 다양한 예제 실습

Typescript

요즘 IT 기업들의 채용정보를 살펴보다 보면 상당수의 기업이 TypeScript를 원하거나 우대하는 것을 확인 할 수 있습니다. 면접준비를 하면서 Typescript 뭔지 왜 사용할지 정리해봤습니다.

 

 

간단한 예제 실습 

 

간단한 더하기 함수를 만들어, 다양한 변수를 입력해 타입 오류 어떻게 나오는데 실습해봅니다.

우선 이미 익숙한 js 더하기 함수부터 만들어보면

 

index.js

function add(num1, num2){
  console.log(num1 + num2);
}

add();  // Nan
add(1); // NaN
add("a", "b"); // ab
add(1,2); // 3
add(1, "a") // 1a

슷자와 문자 더하는 것도 성공적으로 컴파일!

 

이제 같은 더하기 함수를 ts으로 수정해 타입 오류를 확인해보겠습니다. 변수 타입을 미리 슷자로 정해서 문자, null 등 다른 현식으로 입력해면 슷자 아니거나 모든 변수 아는 경우 오류가 발생하는 것을 볼수 있습니다.

 

index.ts

function add(num1:number, num2:number){
    console.log(num1+ num2);
}

add(); // Expected 2 arguments, but got 0
add(1); // Expected 2 arguments, but got 1
add(1,2); // 3

add("a", "b"); // Argument of type 'string' is not number
add(1, "a");  // Argument of type 'string' is not number
add(null, null);  // Argument of type 'null' is not number

 

 

---

 

타입스크립트 기본 타입

 

string : 문자열 타입

let car:string  = "bmw";

 

number : 슷자 타입

let num:number = 2;

 

boolen: true, false 타입

let isOpen:boolen = true;

 

* Array : 배열 타입, 배열 타입은 다양합니다.

 

// 슷자로 구성된 배열, number[] or Array<number> 사용

let a:number[] = [1,2,3];
let a:Array<number> = [1,2,3];

let a:number[] = [1,2,3,"a"]; 
let a:Array<number> = [1,2,3,"a"];

// 문자열 추가되면 오류 발생
// Type 'string' is not assignable to type 'number'.

 

문자열으로 구성된 배열, string[] or Array<string> 사용

let s:string[] = ["a","b","c"];
let s:Array<string> = ["a","b","c"];

// 문자열 아닌 변수 입력되면 오류 발생
// Type 'number' is not assignable to type 'string'.

let s:string[] = ["a","b","c", 1];
let s:Array<string> = ["a","b","c", true];

 

 

 

** Tuple : 배열과 비슷하지만 배열 안에 요소들 인덱스 서로 다를때 사용됩니다.

let t:[name:string,age:number,IsStudent:boolean] = ["Tom", 25, true];

다양한 기능들과 같이 사용 가능합니다.

console.log(t[0].toLowerCase());

 

** void는 함수에서 아무것도 반앙하지 않을때 아니면 return 값이 없는 할수에서 자주 사용됩니다.

void는 어떤 값을 가지지 않는 것을 의미하며 return하지 않는 함수의 return 값 type으로 설정 가능합니다.

function sayHello():void {
  console.log("HI");
}

 

enum은 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입입니다.  분야별로 종류를 정의하여 명확하게 사용할때 또는 하드코딩의 실수를 줄이기 위해서 enum을 자주 사용됩니다.

 

enum은 기본으로 0부터 1씩 증가하는 값을 갖습니다

enum Auth {
    admin = 0, // 관리자를 0으로 표현
    user = 1,  // 회원은 1로 표현
    guest = 2  // 게스트는 2로 표현
}

console.log(Auth.admin);  // 0
console.log(Auth.user);   // 1
console.log(Auth.guest);  // 2

숫자 값을 지정해줄 수 있으며 정의되지 않은 값은 이전 값에서 1씩 증가하게 됩니다.

enum System {
    admin = 10,
    users = 500,
    guest 
}

console.log(System.admin) // 10
console.log(System.users) //  500
console.log(System.guest) //  501

문자열을 지정

enum Languages {
    korean = 'ko',
    english = 'en',
    japanese = 'jp',
    chiense = 'cn'
}

console.log(Languages.korean);   // "ko"
console.log(Languages.english);  // "en"
console.log(Languages.japanese); // "jp"
console.log(Languages.chiense);  // "cn"

 

---