Typescript 들어가기

🐣 왜 타입스크립트인가?

• 자바스크립트의 경우 타입 시스템이 없는 동적 프로그래밍 언어로, 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있다. 약한 타입 언어라고도 표현할 수 있는데 비교적 유연하게 개발할 수 있는 환경을 제공하는 반면에 런타임 환경에서 쉽게 에러가 발생할 수 있다는 단점이 있다.

• 타입스크립트의 경우 정적 타입 검사자로, 이러한 자바스크립트에 강한 타입 시스템을 적용해서 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 확인할 수 있다.

🐣 기본 타입

Typescript는 Javascript와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용하여 더 편리하게 사용할 수 있다.

Boolean 불리언

let isDone: boolean = false;

Number 숫자

let value: number = 6;

String 문자열

let color: string = "green";
let welcome: string = `Hello my name is ${name}!!`

Array 배열

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

Tuple 튜플

요소의 타입과 개수가 고정된 배열을 표현할 수 있다
예시로, number와 string 쌍으로 있는 값을 나타내고 싶을 때 아래와 같이 작성할 수 있다

let x: [string, number];
x = ["hello", 1]; //초기화 성공
x = [1, "hello"]; //초기화 오류

console.log(x[0]); //"hello"

Enum 열거

enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다
enum은 기본적으로 0부터 시작하여 멤버의 번호를 매긴다.
멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수도 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log(c); // 1

//값을 수동으로 설정
enum Color {Red = 1, Green = 2, Blue = 4} 

매겨진 값을 사용하여 enum 멤버의 이름을 알아낼 있다.

enum Color {Red, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // Blue

Any

알지 못하는 타입을 표현해야 할 때 사용한다.
사용자로부터 받은 데이터 등의 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 바랄때 any타입을 사용할 수 있다.

let notSure: any = 4;
notSure = "maybe a string";
notSure = false; // bool

any 타입은 타입의 일부만 알고 전체는 알지 못할 때 유용하게 사용할 수 있다.

let list: any[] = [1, true, "free"];
list[1] = 100;
console.log(list); // [1, 100, "free"]

Void

void는 어떠한 타입도 존재할 수 없음을 나타낸다. any와 반대 개념이라고 생각할 수 있다. 보통 함수에서 반환값이 없을 때 반환 타입을 표현하기 위해 사용한다.

function alertFunc(): void {
  console.log("warning");
}

Null and Undefined

null과 undefined 각각 자신의 타입 이름이다. 기본적으로 null과 undefined는 다른 모든 타입의 하위 타입이긴하지만, --strictNullChecks를 사용하면 아래와 같이 any와 각자 자신의 타입에만 할당 가능하다. 만약에 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined로 사용할 수 있다.

Union 유니언 : 2개 이상의 타입을 허용하는 경우 (| vertical bar를 통해 타입을 구분한다

let u: undefined = undefined;
let n: null = null;

let val: number | null = null; // null 허용

Never

never 타입은 절대 발생할 수 없는 타입을 나타낸다. 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 사용된다. 아래는 never타입의 몇가지 예시이다.

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다
function error(message: string): never {
  throw new Error(message);
}


function infiniteLoop(): never {
  while(true){...}
}

Object 객체

object는 number, string, boolean, bigint, symbol, null, undefined 와 같이 원시타입이 아닌 타입을 나타낸다.
컴파일러 옵션에서 엄격한 타입검사(strict)를 true로 설정하면 null은 포함하지 않게된다.

let obj: object = {};
let arr: object = [];
let func: object = function() {};
let nullValue: object = null;
let date: object = new Date();

여러 타입의 상위 타입이기에, 보다 정확하게 타입을 지정하기 위해 아래와 같이 객체 속성(properties)에 대한 타입을 개별적으로 지정할 수 있다.

let user: (name: string, age: number) = {
  name: "홍길동",
  age: 30
};

🐣 인터페이스 (Interface)

인터페이스(interface)는 타입스크립트 여러 객체를 정의하는 일종의 규칙이며 구조이다. 뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다.

기본적 사용법

interface IUser {
  name: string,
  age: number,
  isPerson: boolean
}

let user: IUser = {
  name: '홍길동',
  age: 30,
  isPerson: true
}

let user2: IUser = {
  name: '홍길동2'
  age: 30
} // IUser에 정의되어있는 isPerson을 초기화하지 않았으므로 error

? 사용하여 선택적 속성으로 정의하기
속성을 필수가 아닌 속성으로 정의할 수 있다.

interface IUser {
  name: string;
  age: number;
  isPerson?: boolean;
}

let user2: IUser = {
  name: '홍길동2',
  age: 30
} // 정상 작동(o)

사용 예제

interface ISquare {
    color?: string;
    width?: number;
}

function createSquare(square: ISquare): {color: string; area: number} {
    let newSquare = {color: "white", area: 100}; // 초기값
    if (square.color) {
        newSquare.color = square.color;
    }
    if (square.width) {
        newSquare.area = square.width * square.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});
console.log(mySquare); // {color: "black", area: 100}

🐣 함수 (Function)

함수의 타이핑 (Typing the function)

함수의 각 파라미터와 함수의 반환 타입을 정해줄 수 있다. 반환 타입은 반환문을 보고 파악할 수 있으므로 생략 가능하다.

function add(x: number, y: number): number {
  return x + y;
}

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x+y };

선택적 매개변수와 기본 매개변수

Javascript에서는 모든 매개변수가 선택적이고, 그냥 둔다면 그 값은 undefined가 된다. Typescript에서도 선택적으로 매개변수를 설정하고 싶다면 위에서 언급했듯이, 매개변수 이름 끝에 ?를 붙이면 된다.

function myName(firstName: string, lastName?: string) {
  if(lastName) return firstName + " " + lastName;
  else return firstName;
}

사용자가 값을 입력하지 않거나 undefined로 했을때 할당될 매개변수 값을 정해놓을 수도 있다.

function myName(firstName: string, lastName = "Kim") {
  if(lastName) return firstName + " " + lastName;
  else return firstName;
}

let result = buildName("Bob");  // "Bob Kim" 반환 (o)

---

[References]
공식문서 https://typescript-kr.github.io/