Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개발의변화

우아한 타입스크립트 2-2 본문

카테고리 없음

우아한 타입스크립트 2-2

refindmySapporo 2023. 11. 8. 23:24
반응형

값 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
.
반응형