개발의변화
우아한 타입스크립트 2-2 본문
값 vs 타입
값: 프로그램이 처리하기 위해 메모리에 저장하는 모든 데이터
객체 역시 값, 함수도 역시 값 자바스크립트는 모든 것이 객체이고 값 (런타임에 객체로 변환하기 때문)
커스텀 타입
type Person = {
name: string;
age: number;
}
interface Person {
name: string;
age: number;
}
값 공간과 타입 공간의 이름은 서로 충돌하지 않기 때문에 타입과 변수를 같은 이름으로 정의할 수 있는데 타입스크립트가 자바스크립트의 슈퍼셋인 것과 관련이 있다.
type으로 선언한 내용은 자바스크립트 런타임에서 제거되기 때문에 값 공간과 타입 공간은 서로 충돌X
하지만 타입과 값의 공간을 혼동할 수 있는 어려움이 있기에 클래스와 enum을 활용하면 된다.
특히 enum은
enum Direction {
Up,
Down,
Left,
Right,
}
타입 공간에서 타입을 제한도 하지만 자바스크립트 런타임에서 실제 값으로도 사용 가능하다
enum MyColors {
BLUE = "#00000FF",
YELLOW = "#FFFF00",
MINT = "#2AC1BC"
}
function mintColor(palette : {MINT: string}) {
retiurn palette.MINT;
}
mintColor(MyColors)
여기서 MyColors는 객체같이 동작하는 것을 가능하다.
즉 타입으로만 사용되는 요소는 컴파일 이후 사라지고 어떠한 심볼은 컴파일를 사용해서 변환해도 파일에 남아 잇다는 것이다.'
enum을 사용해야 하는가? const enum을 써야 하는가? 은 개인의 취향인 것 같다.
타입을 확인하는 방법
typeof, instanceof 그리고 타입 단언을 사용해서 타입을 확인할 수 있다.
typeof는 연산하기 전에 피연산자의 데이터 타입을 나타내는 문자열 반환 -> Boolean,null,undefined,Number,BigINt,String,Symbol)과 Funciton(함수), 호스트 객체 그리고 object객체
typeof 20022 // number
typeof "woowahan"// string
typeof true // boolean
typeof {} // object
interface Person{
first: string;
second : string;
}
const person : Person = {first: "zig", last: "song"}
function email(options: {person: Person; subject: string; body: string}) {}
const v1 = typeof person;
v2 =typeof email
type T1 = typeof person; //타입은 Person
type T2 = typeof email; //options:{person:Person} => void
person 변수가 Interface person 타입으로 서ㄴ언 -> 타입공간에서의 Typeof person은 Persond을 반환
email 함수는 타입 공간에서 Typeof 연산자로 값을 읽을 때 함수 시그니처 타입을 반환
class Developer {
name: string;
sleepingTime: number;
constructor(name: string, sleepingTime: number) {
this.name = name;
this.sleepingTime =sleepingTime;
}
}
const d = typeof Developer;
type T = typeof Developer;
타입 단언은 개발자가 해당 타입을 더 잘파악할 수 있을 때 사용 강제 형 변환과 유사한 기능
validateInputTest(loaded_text as string);
원시타입
타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 자바스크립트와 대응되면서 차이점이 있다
자바스크립트에서 값은 타입, 변수는 별도의 타입X
호출 시그니처: 타입스크립트에서 함수 타입을 정의할 때 사용하는 문법
함수 타입은 해당 함수가 받은 매개변수와 반환하는 값의 타입으로 설정된다.
type add = (a: number, b: number) => number;0
.