TypeScript - 2

#2 OVERVIEW OF TYPESCRIPT

C, C# 등의 코드는 코드를 컴파일해서 0101의 형태로 바꾸어주거나, 어셈블리 코드, 바이트 코드가 되기도 한다.
기계가 실행할 수 있는 다른 종류의 코드로 변환되는 것이다.
반면에 TypeScript는 작성한 코드가 JavaScript로 변환된다.

🤔 변환하는 이유?
브라우저는 TypeScript가 아니라 JavaScript를 이해하기 때문이다.
이때, TypeScript는 개발자가 실수를 하지 않도록 보호를 해준다.

 

TypeScript가 그저 JavaScript로 변환될 뿐이라면 어떤 보호를 해주는걸까?

TypeScript가 제공하는 보호장치는 코드가 JavaScript로 변환되기 전에 발생한다.
TypeScript가 우리가 작성한 코드를 먼저 확인한 후, 변환된 JavaScript 안에서 실수가 일어나지 않도록 확인해주는 것이다.
즉, TypeScript 코드를 작성하고 컴파일하면, 보호장치 없는 일반 JavaScript 코드가 된다.
하지만 TypeScript가 에러가 발생할 것 같은 코드를 감지하면 JavaScript로 아예 컴파일이 안된다.
이런 보호장치는 유저가 코드를 실행하는 런타임에 발생하는게 아니다. 유저는 그저 일반 JavaScript 코드를 사용할 뿐이다.

예시

예시1

const nico = {
  nickname: "nick"
}

nico.hello(); // error

코드 저장 전 에러가 났다고 알려주고 있다.

TypeScript에서 에러가 나면 JavaScript로 컴파일이 되지 않는다.

이렇게 실행 전 에러를 알려주면 실수했다는 것도 알 수 있고 실행이 안될 것 이라는 것도 알 수 있다.

예시2

[1,2,3,4] + false // error

숫자 배열에 boolean을 더할 수 없다는 에러를 표시해준다.

TypeScript에서는 컴파일조차 되지 않는다.

예시3

function div(a,b) {
  return a / b;
}

div("hello"); // error

div 함수는 2개의 입력값이 필요한데 하나만 제공되었다고 에러가 표시된다.

예시4

const player = {
  age: 12
}

player.age = false; // error

age는 숫자에서 boolean타입으로 바꿀 수 없다고 에러를 표시한다.

🤔 이러한 보호장치가 생기는 이유?
타입 추론

타입시스템

TypeScript에는 변수 선언에 두가지 방법이 있다.

1. 타입을 추론하도록 해주는 방법 [변수키워드 변수명 = 할당할 값;]
2. 타입을 명시해주는 방법 [변수키워드 변수명 : 타입 = 할당할 값;]

// 1. 타입 추론
let a = "hello"; // ts에서는 변수 a의 타입을 string으로 인식
a = "hi!!"; // 변수 a의 타입을 string으로 인식하고 있기 때문에 문제 없음
a = 100; // ❗️error => number 타입이 string 타입 변수에 들어갔기 때문에 에러

// 2. 명시적 정의 (니꼬쌤 기준 이건 추천안함)
let b : boolean = "x"; // ❗️error => 변수 b는 boolean 타입이라고 명시했는데 string 타입이 할당되려고 하니까 에러
let c = [1,2,3]; // number[]
c.push("1") // ❗️error => number가 아닌 string을 넣으려하기 때문에 에러. 보통은 하나의 타입만 있는 배열을 만들기 때문. 다른 타입과 섞지 않는다.
let d = []; // 배열 안에 초기에 아무것도 없을 수가 있음. 근데 number만 할당되게 하고 싶음
let e : number[] = []; // 이럴 때에는 명시적 표현을 사용한다.

TypeScript가 타입을 추론하지 못할 때에는 명시해주는 것도 유용하다.
하지만 TypeScript가 타입을 추론할 수 있도록 명시적 표현은 최소한으로 사용해주는 것이 좋다.

const player = {
    name : "nico" // name의 타입을 string으로 추론
}

player.name = 1 // error => number 타입이기 때문
player.hello() // error

TypeScript의 타입들

변수 : 타입 (explicit)

let a : number = 1;
let b : string = "hello";
let c : boolean = true;
let d : number[] = [1,2,3];

optional types

객체의 경우, 데이터 값에 대한 타입을 객체로 작성하고, 매개변수가 옵션인 경우 ? 를 붙여준다.

const player : {
    name: string,
    age?: number, // age: number || undefined
} = {
    name: "nico",
}

+) 외부에서 optional parameter에 접근하려면 먼저 해당 값이 존재하는지 체크해 줘야 한다.

// error
if(player.age < 10) {...}

// ✅
if(player.age && player.age < 10) {...}

Alias (별칭)

만약, player가 계속 반복된다고 한다면 같은 타입의 코드를 반복해서 작성해야할까?
이 경우에는 별칭을 생성하여 타입 재사용을 할 수 있다.

// type으로 Player라는 별칭 생성
type Player = {
    name: string,
    age?: number
}

const nico : Player = {
    name: "nico", // age를 적지 않아도 에러가 나지 않음.
}

const lynn : Player = {
    name: "lynn",
    age: 30
}

인수와 return 값의 타입 지정

playerMaker라는 함수가 string타입으로 name을 받고 Player타입을 return 해야한다고 해보자.

// 타입 Player 지정
type Player = {
    name: string,
    age?: number
}

// 함수 playerMaker는 name이라는 파라미터를 string 타입으로 받고 
// Player라는 타입으로 return 한다.
function playerMaker(name: string) : Player {
    return {
        name
    }
}

const nico = playerMaker("nico");
nico.age = 12;

화살표 함수의 경우,

const playerMaker = (name:string) : Player => ({name})

readonly

읽기전용 (수정을 못한다는 의미)

type Player = {
    readonly name: string, // readonly 속성 적용
    age?: number
}

const playerMaker = (name:string) : Player => ({name})

const nico = playerMaker("nico");
nico.age = 10;
nico.name = "lynn"; // error => 읽기 전용이므로 수정할 수 없다. (보호장치)

이는 배열이나 문자열에서도 가능하다.

const numbers: readonly number[] = [1,2,3,4];
numbers.push(5); // error => readonly number[] 타입에는 push가 없기 때문이다.

const numbers2: number[] = [1,2,3,4];
numbers2.push(5); // readonly 속성을 삭제하면 수정이 가능하기 때문에 5를 push 할 수 있다.

const names: readonly string[] = ['kim', 'an'];
names.push(); // error 
names.map // map이나 filter는 사용가능하다.
names.filter // 왜냐하면, array를 바꾸지 않기 때문이다.

❗️반면, map 이나 filter는 사용이 가능하다. => 기존 array를 바꾸지 않기 때문

Tuple

정해진 갯수의 인자를 순서에 맞는 타입으로 받는 array 지정 가능

• 최소한의 길이를 가져야 한다.
• 특정 위치에 특정 타입이 있어야 한다.

만약, ['nico', 1, true] 와 같은 배열을 만든다고 한다면 string, number, boolean의 자료형이 와야할 것이다.

TypeScript방식으로 작성하면 다음과 같다.

const player: [string, number, boolean] = ['nico', 1, true];
player[0] = 100; // error => 0번째는 string이고 바꾸고자 하는 값은 number이기 때문

readonly 속성을 사용할 때처럼 코드를 string[] , number[] 이런식으로 작성하는게 아니라 [string, number, …]의 형태로 작성하게 된다.

이렇게 되면
1. 항상 정해진 갯수의 요소를 가져야하는 배열을 지정할 수 있다.
2. 내가 원하는 순서에 맍는 타입을 가지게 할 수 있다.

튜플과 readonly를 함께 사용할 수도 있다.

const player: readonly [string, number, boolean] = ['nico', 1, true];
player[0] = 'lynn'; // error => readonly 이므로 아무것도 바꿀 수 없다.

 

다른 타입들

let a : undefined = undefined
let b : null = null
let c = [] // 비어있는 값을 쓰면 any가 기본값

any

TypeScript로부터 빠져나오고 싶을 때 쓰는 타입 (TypeScript의 보호장치로부터 벗어나고 싶을 때)

// 아무 타입이나 될 수 있다.
// TypeScript의 보호장치를 잃고 바보처럼 될 수 있기 때문에 안쓰는 것을 권장한다.

const a : any[] = [1,2,3,4];
const b : any = true
a+b  // 이상한 코드인데도 타스에서 잘 작동한다.

void

아무것도 return 하지 않는 함수를 대상으로 함.
void를 따로 지정해줄 필요는 없고 TypeScript에서 return 값이 없는 경우 알아서 void로 인식한다.

function hello() {
    console.log('x')
}

never

• return하지 않고 오류를 발생시키는 함수인 경우

// 함수가 절대 return하지 않을 때 발생
// 예를들어 함수에서 exception(예외)이 발생할 때 사용
// return하지 않고 오류를 발생

function hello2():never {
    return "X" // error => 
}

function hello3():never {
    throw new Error("XXX")
}

• 타입이 2가지인 경우 절대 실행되면 안되는 경우

// name은 string일수도 있고 number일수도 있는데 그 두가지 경우가 아닐 때에는 never
function hello4(name:string|number) {
    if(typeof name === "string") {

    } else if(typeof name === "number") {

    } else {
        name // name의 타입은 string or number이므로 그 이외의 경우는 발생해서는 안됨
    }
}

unknown
어떤 타입인지 모르는 변수를 받을 때 사용, TypeScript가 타입 확인 작업을 강제로 시킨다.
ex) 만약 api로부터 응답을 받는데 응답의 타입을 모른다면? => 타입 확인을 반드시 해야한다.

let a: unknown;
// TypeScript로부터 보호를 받는다. 어떤 작업을 하려면 변수 a의 타입을 먼저 확인해야 한다.
let b = a+1; // error => a가 무슨 타입인지 모르기 때문에 1과 더할 수가 없다.

if(typeof a === 'number') {
    let b = a+1
}

if(typeof a === 'string') {
    let b = a.toUpperCase();
}