TypeScript 기본문법편

임효진·2023년 2월 19일
0

기본타입 : number, string, boolean, undefined, null

  • 변수에 바로 undefined 또는 null을 할당할 수 없다, 두 타입을 직접 할당하면 두 값만 넣을 수 있기 때문이다. 아래 코드를 참고하자
let nm : undefined // ❌
let nm : number | undefined // 🙆🏻

let human : null // ❌
let human : string | null // 🙆🏻
  • 무언가가 있고 없을 때, undefined을 쓴다.

기본타입 : unknown, any, void, never, object

// any 어떤 타입이든 가능하기 때문에 불가피한 상황을 제외하고 사용하지 말자.
let everything : any = 0;
everything = 'hello'

//void 아무런 값도 리턴하지 않을때
function print() : void {
    console.log('hello')
    return;
}

**함수에서 타입 이용하기 (JS → TS )**

//간단한 함수
function addNum(a : number, b : number): number {
return a + b
};

function fetchNum(id : string): Promise<number> {
    return new Promise((resolve, reject)=>{
        resolve(100);
    });
}

함수 타입 이용(Spread, default, optional)

  • 옵셔널을 활용하면 인자를 전달할 수도 있고, 전달하지 않을 수도 있는 조건이 가능하다.
//optional parameter
function printName(firstName : string, lasName? : string) {
    console.log(firstName);
    console.log(lasName);
}
printName('Blake', 'Kile');
printName('Joe');
printName('Jaime', undefined);
  • 디폴트를 활용하면 기본 값을 지정해줄 수 있다.
    옵셔널과 다른 점은 옵셔널에서는 전달하지 않으면 undefined가 될 수도 있지만
    디폴트에서는 전달하지 않으면 기본 값으로 전달이 된다.
//Default parameter
function PrintMessage(message : string = 'default message') {
    console.log(message)
}
PrintMessage();
  • 레스트 파라미터를 이용해서 인자를 배열 형태로 받아올 수 있다.
// Rest parameter
function addNumbers(...numbers:number[]):number {
    return numbers.reduce((a,b)=>a + b);
}

배열과 튜플, 언제 튜플을 사용해야할까?

  • 불변성 유지를 위해 readonly를 많이 사용한다
function printArray(fruits : readonly string[]) {
fruits.push() //<- error
}
  • Tuple은 배열이긴 배열인데, 서로 다른 타입을 가질 수 있는 배열이다.
    • 튜플 사용은 권장하지 않는다. 인덱스 접근이 가독성이 떨어진다.
    • 오브젝트나 클래스 형태로 사용하는 것을 권장한다.
//Tuple -> interface, type alias, class 사용을 권장
let student : [string,number];
student = ['name', 123];
student[0] // name
student[1] // 123
const [name, age] = student; //<- 구조분해로
profile
프론트 요정임

0개의 댓글