JS에 타입 지정하는 방법

TypeScript 문법에는 js와 유사한 부분도 있고, 완전히 새로운 문법도 있습니다. 여기에서는 js와 유사한 문법들을 위주로 다루도록 하겠습니다.

타입 지정하는 방법

1. 변수

const 변수명: 타입 = 값;

let a: number = 1;
a = 2;
// a = 'hello'  < type error 발생
let b: string = 'hello';
let c: boolean = true;
let d: undefined;
let e: null = null;

const msg: string = '타입스크립트를 배워보자';
const num: number = 100;

2. 함수

- 선언 방법:

function 함수명(변수: 타입) {
	//...
}

- 변수가 단순할 때:

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

// 명시적으로 타입을 지정하는 것도 가능
//function sum(x: number, y: number): number {
//    return x + y;
//}

임의의 여러 인자를 받아오는 경우 :

• 스프레드 연산자를 이용해서 배열에 담아줍니다.
• 만약 아래와 같이 인자들을 모두 더해주는 함수일 경우 reduce 메소드를 사용하면 됩니다.

const sum = (...numbers: number[]): number => {
    return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum2(1, 2, 3, 4, 10))

3. 배열 & 문자열(1): 타입을 한 가지만 정의할 때

배열에서 타입 지정하는 방법
1. type[ ]
2. Array<type>

- 숫자:

let numArr: number[] = [1, 2, 3, 4, 5];
//let numArr: Array<number> = [1, 2, 3, 4, 5];

- 문자:

let strArr: string[] = ['apple', 'banana', 'melon'];
// let strArr: Array<string> = ['apple', 'banana', 'melon'];

3. 배열 & 문자열(2): 타입을 여러 개 정의할 때

let arr: Array<string | number> = ['apple', 'banana', 'melon', 1];

let arr2: (number | boolean | string)[] = [1, true, 'string'];

3. 배열 & 문자열(3): 어떤 타입이든 상관없을 때

let arr: any[] = [1, 2, 3, 'wow', true, null];

4. 객체(1): 객체 타입으로만 지정할 때

let obj: object = {
    name: 'Rara',
    grade: 1,
};

4. 객체(2): 키 값에 타입을 지정할 때

const OlimpicNewGame: readonly [{name: string, type: string}, boolean] = [{name2: '쇼트트랙', type: '혼성'}, true];

5. 길이 또는 키 고정: Readonly

Readonly는 이후 포스터에서 다룰 TS 고유 문법과도 관련이 있습니다.

• 배열에서 사용하면 배열의 길이가 고정되어 배열의 길이가 넘어가는 새로운 값을 추가하게 되었을 때 오류가 발생합니다.

const drink: readonly [string, number] = ['사이다', 1000];
drink2.push('음료수');

에러:
Property 'push' does not exist on type 'readonly [string, number]'

• 객채에서는 키의 이름을 다르게 작성하거나 새로운 키를 추가하게 되면 오류가 발생합니다.

const OlimpicNewGame: readonly [{name: string, type: string}, boolean] = [{name2: '계주', type: '혼성'}, true];

에러:
Object literal may only specify known properties, but 'name2' does not exist in type '{ name: string; type: string; }'. Did you mean to write 'name'?