기본 문법 익히기 (2.4 ~ 2.6)

목차

• 2.4 배열 말고 튜플도 있다.
• 2.5 타입으로 쓸 수 있는 것을 구분하자.
• 2.6 유니언 타입으로 OR 관계를 표현하자.

 

 

---

2.4 배열 말고 튜플도 있다.

배열 요소의 타입 지정 방법

• 타입[] 또는 Array<타입>
  • <> : 제네릭 표기법
• 타입 : 요소의 타입

 

const arr1 : string[] = ['a', 'b', 'c'];
const arr2 : Array<number> = [1,2,3]

• string[] : 배열의 모든 요소가 string임
• Array<number> : 배열의 모든 요소가 숫자임

 

 

타입 스크립트는 우리가 정의하지 않아도 요소의 값을 보고 추론해주는데, 문제가 있음

• 위와 같이 타입스크립트는 number[]로 잘 추측해줌
• 하지만, arr[3]은 값이 없어 undefined임에도 toFixed()가 잘 붙음 (빨간줄로 오류 표시가 안뜸)
  • toFixed() : 고정 소수점 표기 메서드

-> 이를 해결하기 위한 방법 : 튜플

 

 

튜플(tuple) : 각 요소 자리에 타입이 고정되어 있는 배열

• 위와 같이 []를 이용해 각 요소의 타입을 지정함
• 타입에 부합하지 않은 값을 넣으면 오류 발생!

 

• 지정되지 않은 위치에 값을 넣을 경우 에러
• 지정 되지 않은 곳은 undefined 타입 (인덱스 요소가 없음)

 

하지만 pop, push, shift, unshift 메서드는 사용 가능

const tuple: [number, boolean, string] = [1, false, "hi"]
console.log(tuple.pop())    // 'hi'
console.log(tuple)          //[1,false]

 

 

단, push()는 undefined되 위치에 잘 들어가지만, 그 위치를 인덱스로 접근하면 오류

 

 

해결 방법 : readonly 수식어

• push 부분에도 오류를 발생해줌

 

readonly를 붙여 위의 toFixed 코드 수정

• 없는 위치에 메소드 사용 시 오류 발생

 

전개(spread) 문법 : ...

연달아 오는 같은 타입을 일일이 써주는건 비효율적

 

...[]타입

const a : [string, number, ...boolean[]] = ['a', 1, true, false, true];
const b : [string, ...number[], boolean] = ['a', 1,2,3, true];
const c : [...string[], number, boolean] = ['a','b' ,'c', 1, false];

• 연달아 오는 건 타입 앞에 ...와, 타입 뒤에[]를 붙여줌

 

const arr1 = ['hi', true];
const arr = [46, ...arr1];

• 타입이 아닌 값에 전재 문법을 사용 가능 -> 타입을 종합적으로 추론해냄

[46, "hi", true]

• 위에 코드의 결과

 

const arr1 = ['hi', true];
const arr = [46, arr1];

• 이렇게 쓰면

[46, ["hi", true]]

• 이런 결과

 

 

• 구조 분해 할당 시 나머지 속성(rest property) 사용

• 타입 추측까지 알아서 해줌

 

 

옵셔널 수식어 ?

: 해당 자리에 값이 있어도 그만, 없어도 그만

 

let tuple : [number, boolean?, string?] = [1, false, 'hi'];

• [number] or [number, boolean] or [number, boolean, string] 

 

• 마지막 줄의 오류 : [number, string]을 대입했기 때문
• 즉, 순서대로 오긴해야 됨

참고) 옵셔널 자리에 undefined도 올 수 있음!

 

 

 

---

2.5 타입으로 쓸 수 있는 것을 구분하자

타입은 값으로 사용할 수 없음

타입으로 사용할 수 있는 값과 사용할 수 없는 값만 구분하자!

• 리터럴 값은 타입으로 사용 가능
• 변수 이름은 타입으로 사용 불가능

 

단, 내장객체는 사용 가능

• Date, Math, Error, String, Object, Number, Boolean 등

const data : Date = new Date();
const math : Math = Math;
const str : String = 'hello';

 

 

하지만, String, Object, Number, Boolean, Symbol은 타입 사용 비추

 --> string, object, number, boolean, symbol 사용

 

이유

타입 Number 간 연산자 사용 불가

 

 

const str1 : String = 'hello';
const str2 : string = str1;

• String 타입 변수를 string 변수에 대입 불가

 

함수를 타입으로

function add (x:number, y:number) {return x+y;}
const add2 : add = (x:number, y:number) => x+y

• 위와 같이 코드를 작성하면

• 이런 에러 발생 : add는 값이지만 타입으로 사용 (타입으로 사용할 수 없는 값임) 
  • 읽어보면 typeof와 같이 사용 가능 : 변수에는 typeof를 붙여 사용

함수 add의 타입

function add (x:number, y:number) {return x+y;}
const add2 : typeof add = (x:number, y:number) => x+y

 

 

 

 

함수의 호출은 타입으로 사용 불가

• 반환값을 타입으로 사용하고 싶은 경우 --> 3.3절

 

클래스를 타입으로 사용 가능

• 심지어 typeof 없이 그냥 가능

class Person {
    name : string;
    constructor(name:string){
        this.name = name;
    }
}

const person:Person = new Person('zero')

 

 

 

---

2.6 유니언 타입으로 OR 관계를 표현하자

파이브 연산자 | : 유니언 타입과 유니언 타입을 표기하기 위해

• 타입을 위한 새로운 연산자

 

유니언 타입 : 하나의 변수가 여러 타입을 가질 수 있는 가능성 표시

let strOrNum : string | number = 'hello';
strOrNum = 123;

• strOrNum 은 string일 수도, number일 수도 / 둘 다 가능

 

(주의) 배열에서의 사용 

• 중괄호 () 꼭 사용  - '문자열 또는 숫자'의 배열

let arr : (number | string)[] = [1,2,'hello'] ;

• 중괄호 없이 number | string[] 로 사용하면
  • 문자열 또는 '숫자의 배열' 이됨

 

함수의 매개변수나 반환값

 function returnNumber (value : string | number) : number {
    return parseInt(value);
}

returnNumber (1);
returnNumber ('1');

• 코드를 위와 같이 작성하면

• 오류 발생
• 자바 스크립트에서는 괜찮지만, 타입스크립트에서는 parseInt()의 인수는 문자열로만 제한
  • parseInt : 문자열을 Int로 반환해주는 메서드

해결

function returnNumber (value : string | number) : number {
    if (typeof value === 'number') {
        return value;
    }
    return parseInt(value);
}

returnNumber (1);
returnNumber ('1');

• if문을 인식하기 때문에 숫자인지 아닌지에 따라 처리

 

유니언의 문법적 특징

• 타입 사이만 | 쓸 수 있는게 아닌 타입의 앞에도 사용 가능

type union1 = |string | boolean | number | null;
type union2 =
    | string
    | boolean
    | number
    | null;

• union1과 union2 는 같은 문법
• union2와 같이 여러 줄에 걸쳐 쓰고 싶은 때 많이 사용됨
  • union1은 별루 안쓰임~~~

 

 

타입 좁히기 : 유니언 타입을 이용한 정확한 타입 찾아내는 기법