아카이브

ParametersParameters는 대상 함수 타입에서의 매개변수 타입들을 불러옵니다.type typeParameter = Parameter returnType>만약 미리 선언된 함수를 사용한다면, 대신 typeof 연산자를 사용할 수 있습니다.function addToCart(id: string, quantity: number = 1): boolean { // ... return true;}type AddToCartParameters = Parameters;// type AddToCartParameters = [id: string, quantity: number | undefined]ReturnTypeReturnType은 대상 함수 타입에서 반환값의 타입을 불러옵니다.type typeReturn..

PickPick은 기존에 존재하던 타입에서 특정 요소만 선택해 구성되는 새로운 타입입니다.type typePick = Pick;생성된 타입은 다음과 같이 선택한 요소들만 지니게 됩니다.interface Product { id: string; name: string; price: number; membersOnly?: boolean;}type ProductInfo = Pick;const product: ProductInfo = { name: "shirt"; price: "120";}OmitOmit은 기존에 존재하던 타입에서 특정 요소만 제외해 구성되는 새로운 타입입니다.type typeOmit = Omit;생성된 타입은 다음과 같이 선택하지 않은 요소들만 지니게 됩니다.interface ..

TS 프로젝트를 빌드하면, 프로젝트 내의 .ts 파일들에 대해 각각 .js 파일들이 생성됩니다.파일의 수가 적다면 문제되지 않지만, 파일의 수가 많아지면 파일들을 한눈에 보기 어려워집니다. 빌드된 JS 파일들의 생성 위치를 미리 정해두면 간단하게 정리할 수 있는데,이 때 수정해야 하는 파일이 tsconfig.json입니다.outDiroutDir는 빌드된 파일이 생성되는 위치를 지정합니다.". / "는 현재 ts파일과 같은 위치를 나타냅니다. 때문에 기본값으로 ts파일과 같은 위치에 js파일이 생성됩니다.만약 outDir를 ". / dist" 로 설정하면, 모든 js파일들이 dist라는 폴더 안에 생성됩니다. ※ 사용할 때는 주석 처리를 해제해야 합니다!rootDirrootDir는 빌드될 파일 범위의 기준..

Record 타입은 제네릭 타입으로, dictionary나 map과 같이 key와 value에 해당하는 값을 받습니다.type typeRecord = RecordRecord는 다음과 같이 각각의 요소에 대한 세부사항을 작성하는데 사용됩니다.interface CatInfo { age: number; breed: string;}type CatName = "miffy" | "boris" | "mordred";// Recordconst cats: Record = { miffy: { age: 10, breed: "Persian" }, boris: { age: 5, breed: "Maine Coon" }, mordred: { age: 16, breed: "British Shorthair" },};const bori..

keyof는 딕셔너리 형태로 선언되어 있는 객체의 key값을 반환하는 키워드입니다.이를 이용하면 interface 타입과 같이 여러 타입으로 구성되어 있는 타입의 각 요소들을 쉽게 사용할 수 있습니다.interface Character { id: string; name: string; price: number; membersOnly?: boolean;}// 다음과 같은 코드를type characterProperty = 'id' | 'name' | 'hp' | 'mp';// keyof를 사용해서 간단하게 나타낼 수 있습니다.type characterProperty = keyof Character;typeof는 대상 변수의 타입을 반환하는 키워드입니다.JS의 typeof는 타입을 문자열로 반환하지만,..

UnionUnion은 두 개 이상의 타입을 동시에 받을 때 사용합니다.enum ClothingSize { S = 'S', M = 'M', L = 'L', XL = 'XL',}interface Product { id: string; name: string; price: number; membersOnly?: boolean;}interface ClothingProduct extends Product { sizes: ClothingSize[]; color: string;}interface ShoeProduct extends Product { sizes: number[]; handmade: boolean;}위에서 정의된 두 가지 interface 타입은 공통된 요소가 있지만 size, co..

아래 코드는 cart 변수에 string[ ] 타입을 부여했습니다.const cart: string[] = [ 'c001', 'c001', 'c002',];interface User { username: string; email: string; cart: string[];}const user: User = { username: 'rayi', email: 'jusmint3@gmail.com', cart,}이 때 cart 변수의 타입을 바꾸려면 cart가 선언된 모든 구문을 찾아 string[ ]을 수정해주어야 합니다.만약 더 복잡한 형태의 타입으로 정의되어 있다면, 이런 방식으로는 유지보수가 어려울 수 있습니다. 복잡한 타입에 이름을 붙여 간단하게 표기하기위해, type 구문을 사용할 수 ..

Literal은 변수의 값 자체를 타입으로 하는 방식입니다.Literal 타입은 주로 const 변수를 선언했을 때 볼 수 있습니다.const는 값이 바뀔 일이 없기 때문에, 값 자체를 타입으로 두어도 무방하기 때문입니다.let variable1 = 'var1';const variable2 = 'var2';Literal 타입은 함수의 매개변수 타입으로도 설정할 수 있습니다.Literal 타입 변수는 일반 타입의 변수를 받는 함수에 사용할 수 있지만,반대로 일반 타입은 literal 타입의 변수를 받는 함수에 사용할 수 없습니다.let small = 90; // type : numberconst large = 100; // type : 100const printSize = (size: number) =..