타입스크립트 util

홍범선·2023년 10월 30일

타입스크립트

목록 보기

26/34

Required Type

interface Dog{
  name: string;
  age? : number;
  country? : string;
}

const requiredDog: Dog= {
  name: '모찌',
} //이렇게만 입력해줘도 에러 안남 이유는 age, country가 optional이니까

const requiredDog2: Required<Dog>= {
  name: '모찌',
  age:7,
  country:'한국'
}  // 전부다 작성해야지 에러 사라진다. required가 하는 것은 generic에다 넣은 type이 전부 다 필수가 되도록 한다.

requiredDog는 에러가 나지 않는다. 왜냐하면 age, country가 optional이기 때문에 작성해도되고 안해도 되기 때문이다.
반면에 requiredDog2는 name만 있을 시 에러가 난다.
왜냐하면 required가 하는 것은 generic에다 넣은 type이 전부 필수가 되도록 하는 것이기 때문이다.
그래서 모두 다 작성해야지 에러가 사라진다.

readonly

interface Cat{
  name: string;
  age: number;
}

const nyaong: Cat = {
  name: '냐옹이',
  age: 8
}

nyaong.name = '코드팩토리'; // 가능하다.

const bori: Readonly<Cat> = {
  name:'보리',
  age: 7,
}

// bori.name = '아이유'; //readonly이기 때문에 객체를 변경할 수 없다. 이것은 TS만 가능하다. JS에서는 안된다.
// JS에서는 Object.freeze를 사용한다.

nayong의 name속성은 변경가능하다.
반면에 bori에 name은 변경 불가능하다. 왜냐하면 Readonly로 하였기 때문이다.
Readonly는 타입스크립트에서만 사용가능하고 자바스크립트에서는 Readonly라는 문법이 없다.
같은 기능으로 Object.freeze를 사용한다.

Pick Type

interface Post{
  title: string;
  content: string;
  createdAt: Date;
}

function createPost(post : Post): Post{
  return post;
}

createPost({
  title:'요즘 개발자 나이',
  content:'qweqwe',
  createdAt: new Date(),
})

createPost함수는 파라미터로 Post타입의 post를 입력받고 Post타입을 반환하는 것이다.
이렇게하면 interface에 Post로 구성된 프로퍼티들을 작성해야 에러가 발생하지 않는다.

function createPost2(post: Pick<Post, 'title' | 'content'>) : Post{
  return{
    ...post,
    createdAt: new Date(),
  }
}
createPost2({
  title:'요즘 개발자 나이',
  content:'qweqwe',
})

스프레드 연산자를 사용해서 title,content,createdAt을 넣고 그 다음 createdAt을 new Date로 덮어씌운다.
그렇게 되면 createPost2할 때 createdAt을 안써도 된다고 생각하는데 이 때 Pick을 사용해야 한다.
Pick은 고를 타입을 넣고, title과 content만 고르면 된다.

Omit타입

function createPost2(post: Omit<Post, 'createdAt'>) : Post{
  return{
    ...post,
    createdAt: new Date(),
  }
}
createPost2({
  title:'요즘 개발자 나이',
  content:'qweqwe',
})

Pick타입에서 Post타입에서 사용할 타입을 골랐다면
Omit타입은 Post타입에서 사용하지 않을 타입을 고르는 것이다.
여기서는 createdAt타입을 사용하지 않을 것이니 작성해주면 된다.

여기서 Pick Omit은 객체만 가능하다. 객체 프로퍼티를 적어줘야 하니까

Exclude타입

type NoString = Exclude<string|boolean|number, string>; 
// NoString은 string boolean number타입이였는데 
//string을 제외하여 number boolean이 됨

type NoFunction = Exclude<string | (() => void), Function>; 
// string과 function이였는데 function타입을 제외하여 string만 남는다.

Pick와 Omit은 객체만 사용가능 했지만
Exclude는 type만 가능하다.

Extract타입

type stringOnly = Extract<string|boolean|number, string>;

type functionOnly = Extract<string | (() => void), Function>;

Exclude와 반대되는 개념이다.
Exclude는 해당 타입을 제외하였다면 Extract는 해당 타입만 추출하는 것이다.
그래서 stringOnly는 string타입이되고
functionOnly는 function타입이 된다.

NonNullable

type NonNull = NonNullable<string | number | boolean | null | undefined | object>; 
// 여기서 null, undefined는 null이 될 수 있기 때문에 제외하여 string | number | boolean | object만 된다.

여기서 null, undefined는 null이 될 수 있기 때문에 제외하여 string | number | boolean | object만 된다.

parameter 타입

function sampleFunction(x: number, y: string, z: boolean){

}
type Params = Parameters<typeof sampleFunction> 
// [x: number, y: string, z: boolean]
type Params2 = Parameters<(one:number) => void>
// [one: number]

class paramter 타입

class Idol{
  name: string;
  age: number;

  constructor(name:string, age:number){
    this.name = name;
    this.age = age;
  }


}

type ConstructorParamType = ConstructorParameters<typeof Idol>

ConstructorParamType => [name: string, age: number]이 된다.
Idol 클래스의 타입을 가져오기 위해서 typeof를 사용한다.

return Type

type ReturnTypeSample = ReturnType<() => string>; 
//string타입을 반환하고 있으니 ReturnTypeSample은 string타입이 된다.

type FunctionSign = (x: number, y: number) => number;

type ReturnType2 = ReturnType<FunctionSign> // number타입이된다.

템플릿 타입

type CodeFactory = 'Code Factory';

type codeFactoryUpper = Uppercase<CodeFactory>; 
//CODE FACTORY

type codeFactoryLower = Lowercase<codeFactoryUpper> 
//code factory

type codefactoryCapital = Capitalize<codeFactoryLower> 
//Code factory 첫번쨰 글자만 대문자

type codeFactoryUnCapital = Uncapitalize<codefactoryCapital>  
//Code factory 첫 번째 글자 소문자