Typescript(new) - 2

다시 처음부터 되짚어보는 Typescript

객체타입

TS는 객체의 형태를 설명하는 애너테이션이 당연히 있는데 일반적인건 함수의 파라미터에서 객체를 쓸 수도 있다

function printName(person:{first:string,last: string}):void {
	console.log(`${person.first} ${person.last}`)
}

printName({first:"Tomas",last:"Jenkins"})

이렇게 적을경우 함수는 파라미터를 객체로 허용한다.

또 이런식으로도 사용하는데

const dog:{name:string, breed: string, age:number} = {
  name: "Elton",
  breed: "Australian Shepherd",
  age: 5
}
function printName():{name:string, breed: string, age:number} {
	return {  
    	name: "Elton",
  		breed: "Australian Shepherd",
  		age: 5
    }
}

따라야 할 패턴으로 지정하고 해당 패턴을 따르게 하는 것이다. {}에 {} 식으로 해서 좀 알기 어려울 수 있지만 충분히 적용된다.

초과 프로퍼티

function printName(person:{first:string,last: string}):void {
	console.log(`${person.first} ${person.last}`)
}

printName({first:"Mick",last:"Jagger",age:32}) // 이럴경우 age에서 오류가난다 하지만!

const singer = {first:"Mick",last:"Jagger",age:32, isAlive:true};

printName(singer) // 에러가나지 않는다

일반적으로 여기 객체를 변수로 가지고 있다면 함수에 필요한 프로퍼티인 성씨와 이름뿐만아니라 나이와 생존여부까지 가지고 있는데 TS는 객체 안에 성씨와 이름이 있는지만 확인한다.

직접 객체 리터럴을 작성했을 때처럼 추가 확인을 하지 않는다!
필요한 프로퍼티가 전달되는지 아닌지만 딱 보고 나머지는 그냥 같이 있는걸로 해버린다...
그래서 사전에 별도의 변수로 정의하는 과정을 걸칠경우 지정된 프로퍼티 외에는 그냥 무시하게 된다

타입 별칭 생성

코드를 작성하면서 항상 똑같은 생각이 반복해서 작성해야되는 코드가 1000개 10000개가 된다면 일일이 작성하는 것이 아닌 유연한 생각을 해야한다. 함수를 새로작성하거나 변수를 만들거나 등으로

let coordinate: {x:number, y:number} = {x: 34, y:2};
function randomCoordinate():{x: number; y: number} {
	return {x:Math.random(), y:Math.random()};
}
function doublePoing(point: {x: number y: number}):{x: number; y: number} {
	return {x:point.x *2, y:point.y *2};
}

이럴경우 대신 type을 사용하면 된다

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

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

function randomCoordinate():Point {
	return {x:Math.random(), y:Math.random()};
}
function doublePoing(point: Point):Point {
	return {x:point.x *2, y:point.y *2};
}

중첩 객체

{
	title: "Unchainer Melody",
    artist : "Righteous Brothers",
    numStreams: 12873321,
    credits: {
    	producer : "Phil Spector",
        writer: "Alex North"
    }
}

객체에 객체가 있고 한다면 포맷팅을 한다해도 함수 파라미터 안에 해당 타입들을 정의하려고 하면 아주 눈으로 보기에 복잡해진다
그럴경우

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

을 만들어서 해도 문제 없다. 중첩되는 경우는 많으니까 말이다. 객체안에 객체가 있든 배열이 있든 가능하다.

선택적 프로퍼티

프로퍼티를 선택적으로 만들 수 있는데

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

아까 사용한 Point타입 별칭에 z의 타입을 선택적으로 넣는 방법이다! 뒤에 ?를 넣어주면 된다.
그럼 타입 애너테이션 전에 필수는 아니라고 TS에 전달되는 것!

readOnly 제어자

TS에서 사용하는 제어자로 객체 내의 특정 프로퍼티를 표시하거나 배열이나 클래스에 접근할 때 사용한다
객체의 프로퍼티를 readonly로 표시하면 Typescript에서는 우리가 프로퍼티에 쓰기를 해서 변경할 때 경고를 함!

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

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

user.id = 2932932 // 에러발생

읽기 전용이기 때문에 변경할 수 없다는 에러를 확인할 수 있다

교차타입 ( intersection type)

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

type Circle = {
  radius: number;
}

type Colorful = {
  color: string;
}
type ColorfulCircle = Circle & Colorful;

const happyFace: ColorfulCicle = {
  radius: 4,
  color: "yellow"
}

이렇게 어떤것도 추가하지 않고 교차시켜 새로운 타입 별칭을 만들 수 있다. 그럼 교차할 때 즉석해서 넣고 싶다면 어떻게 할까?? 그냥 뒤에 객체를 써넣으면 된다.
type Name = ~ & ~ & {isAlibe: boolean}처럼.. 하지만 코드가 지저분해지고 보기 안좋아지니 잘 구성하자