TypeScript 문법

이 글은 코딩앙마님의 유튜브를 보고 정리한 내용입니다.

문자

let car:string = 'bmw';

---

숫자

let age:number = 30;

---

boolean

let isAdult:boolean = true;

---

배열

배열에 정해진 타입만 추가할 수 있다.

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

let week1:string[] = ['mon', 'tue', 'wed'];
let wekk2:Array<string> = ['mon', 'tue', 'wed'];

---

튜플 (Tuple)

배열과 비슷한 형태이지만 인덱스별로 타입이 다를 때 사용하면 된다.

0번 인덱스와 1번 인덱스는 타입이 달라서 사용할 수 있는 메서드도 다르다.

ex: b[0].toLowerCase() 는 가능하지만 b[1]에서는 사용할 수 없다.

let b:[string, number];
b = ['z', 1];
// b = [1, 'z'] 불가능

---

void, never

sayHello같이 함수가 아무 것도 반환하지 않을 때 void 타입을 사용한다. 

error를 반환하거나 끝나지 않는 함수를 사용할 때 never 타입을 사용한다.

function sayHello():void{
	console.log('hello');
}

function showError():never{
	throw new Error();
}

function infLoop():never{
	while (true) {
    	// do something...
    }
}

---

enum

비슷한 값들 끼리 모아 둔 것이라고 생각하면 된다.

Window부터 0이라는 값이 순차적으로 할당되게 된다.

만약 Ios에 4라는 값을 할당하게 되면 Android는 5를 할당하게 된다.

enum Os {
	Window,
    Ios,
    Android
}

enum은 양방향 랩핑이어서 console.log(Os[1])을 하게 되면 Ios가 출력되게 된다. 반대로 console.log(Os['Ios'])를 하게 되면 10이 출력되게 된다.

enum Os {
	Window = 'win',
    Ios = 'ios',
    Android = 'and'
}

let myOs:Os;

myOs = Os.Window

enum은 특정 값만 입력할 수 있도록 하고 싶을 때 사용하면 된다.

---

null, undefined

let a:null = null;
let b:nudefined = undefined;

---

object

let user:object;

---

interface

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
	name: string;
    age: number;
    gender? : string; // gender는 있어도 되고 없어도되는 옵션이다.
    readonly birthYear : number; // 읽기 전용 속석으로 수정이 불가능하다.
    [grade:number] : string; // number를 키로 사용하고 string을 값으로 받는 프로퍼티를 여러 개 사용할 수 있다.
	[grade:number] : Score; // 값으로 Score에 있는 문자열만 사용할 수 있다.
}

let user : User = {
	name : 'suhyeok',
    age : 27
    birthyear: 1996
}

user.age = 28;

// 숫자를 더하는 함수
interface Add {
	(num1:number, num2:number): number;
}

const add : Add = function(x, y){
	return x + y;
}

add(10, 20);

// 나이를 입력받아 성인인지 판단하는 함수
interface IsAdult {
	(age:number):boolean;
}

const a:IsAdult = (age) => {
	return age > 19;
}

a(27) // true

//implements
interface Car {
	color: string;
    wheels: number;
    start(): void;
}

class BMW implements Car {
	color;
    wheels = 4;
    constructor(c:string){
    	this.color = c;
    }
    start(){
    	console.log('go...');
    }
}

const b = new BMW('blue');

// extends
interface BENZ extends Car {
	door: number;
   	stop(): void;
}

const benz : BENZ = {
	color: 'black',
    wheels: 4,
	door : 5,
    start(){
    	console.log('go...');
    },
    stop(){
    	console.log('stop...');
    }
}

---

함수

function add(num1: number, num2: number): number{
	return num1 + num2;
}

function hello(name?: string) {
	//name은 없어도 되지만 사용할 땐 undefined이거나  string으로 사용해야 한다.
	return `Hello, ${name || 'world'}`;
}

const result = hello();

function hello(name: string, age?: number): string {
// 옵셔널한 값이 무조건 뒤에 있어야 한다. 
	if (age !== undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    } else {
    	return `Hello, ${name}`;
    }
}


function add(...nums: number[]) {
// 나머지 매개변수
	return nums.reduce((result, num) => result + num, 0);
}

add(1, 2, 3);