타입스크립트 정리3 : 객체 타입, 배열 타입

객체 리터럴

타입스크립트의 객체 리터럴은 자바스크립트와 같다. 중괄호를 사용.

(객체 리터럴: 객체의 프로퍼티를 직접 key: value 형식 데이터를 입력하는 방식)

const dog = {
		name: "Elton",
		breed: "Australian Shepherd",
		age: 0.5
}

객체는 여러 프로퍼티로 구성되어 있고, 각각 프로퍼티 값은 다른 타입을 갖고 있다

(name은 문자열, age는 숫자)

TypeScript에서는 객체를 설명하는 애너테이션을 만들 수 있다

객체의 형태를 설명하는 것.

일반적인 것은 함수 파라미터의 애너테이션을 작성한다.

const printName = (name: { first: string, last: string }) => {
		return `Name: ${first} ${last}`;
}

printName({first: 'Will', last: 'Ferrell'});
//Name: Will Ferrell

반환 타입(Return type)이나 변수에도 같은 작업을 할 수 있다.

반환타입에 애너터이션

function randomCoordinate(): { x: number; y: number } {
		return { x: Math.random(), y: Math.random() };
}

함수가 반환할 객체의 형태를 미리 고정해 놓는 것이다. 저기에 맞지 않으면 오류 표시가 난다.

변수 자체에 애너테이션 하기

let coordinate: { x: number; y:number } = { x: 32, y: 2 }

앞에 중괄호가 따라야 할 패턴으로 지정하는 부분, 뒤에 중괄호가 거기에 따른 변수.

초과 프로퍼티

함수의 파라미터 타입이 정해진 경우에, 정해져 있지 않은 초과 프로퍼티를 넣으면 어떻게 될까?

const printName = (name: { first: string, last: string }) => {
		return `Name: ${first} ${last}`;
}

printName({first: "Mick", last: "Jagger", age: 499 })  // -> age부분에 오류 표시가 뜬다.

const singer = {first: "Mick", last: "Jagger", age: 499, isAlive: true }
printName(singer); // -> 오류가 뜨지 않는다!

만약 함수 파라미터를 객체 리터럴로 직접 넣으면, 초과 프로퍼티가 있는 경우에 오류표시가 뜬다

즉, 불필요한 프로퍼티는 전달하지 못하게 만든다.

그러나 파라미터로 넣을 객체를 미리 정의해놓고 변수명을 함수에 넣으면 오류가 뜨지 않는다. 이 경우엔 무시해버린다.

Type Alias 타입 별칭

타입을 재사용하고 이름을 지정하는 방법을 말한다

여러 프로퍼티를 가지는 객체 타입 같은 복잡한 타입에 이런 작업을 한다

반복되는 같은 타입을 일일이 다 적어주지 않고 그냥 따로 빼서 변수로 만들면 된다

type 키워드

type Person = {
	name: string;
	age: number;
}

const sayHappyBirthday = {person: Person} => {
		return `hey ${person.name}, congrats on turning ${age}!`;
}

이런 식으로도 쓸 수 있다

type Point = {
	x: number;
	y: number;
}

let coordinate: Point = { x: 32, y: 2 };

function randomCoordinate(point: Point): Point { // 들어가는 파라미터도 미리 지정해둔 타입, 나오는 리턴값도 미리 지정해둔 타입.
		return { x: Math.random(), y: Math.radom() };
}

객체 뿐만 아니라 원시 타입으로도 가능하다

type MyNum = number;
let age: MyNum = 24234;

Nested Objects 중첩 객체

객체 안에 객체가 또 있는 형태

type Song = {
  title: string;
  artist: string;
  numStreams: number;
  credits: { producer: string; writer: string };
};

function calculatePayout(song: Song): number {
  return song.numStreams * 0.0033;
}

const mySong: Song = {
  title: "Unchained Melody",
  artist: "Righteous Brothers",
  numStreams: 12873321,
  credits: {
    producer: "Phil Spector",
    writer: "Alex North",
  },
};

calculatePayout(mySong);

중첩된 객체 형태도 똑같이 객체 안에 객체의 프로퍼티 값의 타입을 지정해줄 수 있다.

위에서 지정해둔 Song의 프로퍼티 중 하나라도 없으면 오류표시가 뜬다

선택적 프로퍼티 생성

위에서 지정해둔 Song의 프로퍼티 중 하나라도 없으면 오류표시가 뜬다

그러나 특정 프로퍼티는 있어도 되고 없어도 되게끔 선택적으로 설정할수도 있다

type Point = {
  x: number;
  y: number;
  z?: number;  // z는 있어두 되고 없어두 오류표시가 나지 않는다.
};

타입을 설정할때 뒤에 ? 물음표 표시를 넣어주면 된다.

이렇게 하면 z 프로퍼티가 없어도 오류표시가 나지 않는다.

readonly 제어자

readonly 제어자(modifier) 가 있다

타입스크립트에서 사용하는 제어자로 객체 내의 특정 프로퍼티를 표시하거나

또는 배열이나 클래스에 접근할 때 사용한다

readonly라고 설정해둔 프로퍼티를 우리가 변경할 때 경고를 띄워준다

type User = {
  readonly id: number;
  username: string;
};

const user: User = {
  id: 12837,
  username: "catgurl",
};

console.log(user.id);
user.id = 23523;  // -> 여기서 오류표시가 뜬다. 읽기 전용인데 바꾸려고 한다고.

다만 id에 숫자가 아닌 객체나 배열로 설정해 놓으면,

그 객체와 배열을 추가 갱신 변경할 수 있다. 참조하는 것이기 때문.

하지만 원시 타입인 숫자 프로퍼티를 재할당 하는 것은 불가능하다.

intersection type 교차타입

여러 타입을 앰퍼샌드 기호(&)로 결합한다

이미 지정해둔 타입들을 동시에 적용되도록 쓸 수 있다.

type Circle = {
  radius: number;
};

type Colorful = {
  color: string;
};

type ColorfulCircle = Circle & Colorful;  // 이렇게 하면 위의 두 프로퍼티를 동시에 만족해야 한다는 뜻.

const happyFace: ColorfulCircle = { 
  radius: 4,
  color: "yellow",  // 이렇게 둘 다 있어야 한다
};

type Cat = {
  numLives: number;
};
type Dog = {
  breed: string;
};

type CatDog = Cat &
  Dog & {   // 미리 지정해둔 두 프로퍼티에다 새로운 조건 하나를 더 추가한다. age
    age: number;
  };

const christy: CatDog = {
  numLives: 7,
  breed: "Husky",
  age: 9,     // 그러면 이렇게 세 조건을 만족해야 한다.
};

배열 타입

타입스크립트에서는 함수 파라미터, 반환 값, 변수를 애너테이션 처리함으로써

타입스크립트에 배열임을 알려 줄수 있다

const activateUsers: [] = []  // 빈 배열로 설정한다는 뜻

activateUsers.push("steve") // 오류표시가 뜬다. 빈 배열로 설정했기 때문.

const inActivateUsers: [] = [1] // 오류표시가 뜬다. 빈 배열로 설정했기 때문.

let names: string[] = ["hello", "world"]; // 문자열로 된 배열이라는 뜻

let ages: number[] = [24, 32, 19, 29];  // 숫자로 된 배열

//다른 방식
let names: Array<string> = ["hello", "world"];

let ages: Array<number> = [24, 32, 19, 29];

const activeUsers: string[] = []
activeUsers.push("steve")
activeUsers.push(12)  // 오류표시가 뜬다. 문자열이 아니기 때문.

const bools: boolean[] = [];  // 불리언도 가능하다.

ㄷ

배열 타입

원시형이 아닌 커스텀 타입으로도 선언할수 있다.

type Point = {  // 객체 형식을 정한 타입
  x: number;
  y: number;
};  

const coords: Point[] = [];   // 미리 정해놓은 객체로 된 배열이라는 뜻.
coords.push({ x: 23, y: 8 });  // Point에 맞는 형태로 된 객체만 push 된다
coords.push({ x: 23, y: '8' }); // Point 형태에 맞지 않으면 오류 표시가 뜬다.

다차원 배열

배열 속 배열 형태를 타입으로 정하는 법

[][] 대괄호를 두번 쓴다

배열 속 배열 속 배열 3중이라면 [][][] 세번도 가능하다.