๐Ÿ’™ Typescript/TypeHero

[Typescript] TypeHero : Beginner ๋ฌธ์ œ ํ’€์ด

์„ ๋‹ฌ 2024. 1. 16. 00:38
๋ฐ˜์‘ํ˜•

 

 

 

 


Generic Type Constraints

https://typehero.dev/challenge/generic-type-constraints

type AllowString<T extends string> = T;
type AllowNumber<T extends number> = T;

type CreateLogger<T extends (a: number) => void> = {
	log: T;
	exit: () => void;
};

 

 

 


Index Signatures

https://typehero.dev/challenge/index-signatures

type GroceryList = {[item: string]: number};

type InappropriateActionBySituation = {[action: string]: Array<string>};

type CharactersById = {[id: number]: {[props:string]: number | string}};

 

 

 


Indexed Types

https://typehero.dev/challenge/indexed-types

type TheCoolestCarEverMade = Cars[4];
type TruckDriverBonusGiver = Donations["Taylor Swift"];

 

 

 


Keyof

https://typehero.dev/challenge/keyof

type CasettesByArtist = typeof casettesByArtist
type Artist = keyof CasettesByArtist;

 

 

 


Literal Types

https://typehero.dev/challenge/literal-types

type LiteralString = 'chocolate chips';
type LiteralTrue = true;
type LiteralNumbers = 1|2|3|4|5|6;
type LiteralObject = {
	name: 'chocolate chips',
  inStock: true,
  kilograms: 5,
};
type LiteralFunction = (a:number, b:number) => number;

const literalString = 'Ziltoid the Omniscient';
const literalTrue = true;
const literalNumber = Math.random() > 0.5 ? 1 : 2;
const literalObject =   {
    origin: "string",
    command: "string",
    item: "string",
    time: "string"
  };
const literalFunction = (a: number, b: string) => a > 1 ? a : b;
const almostPi = 3.14159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651328230664709384460955058223172535940812848111745028410270193852110555964462294895493038196442881097566593344612847564823378678316527120190914564856692346034861045432664821339360726024914127372458700660631558817488152092096282925409171536436789259036001133053054882046652138414695194151160943305727036575959195309218611738193261179310511854807446237996274956735188575272489122793818301194912983367336244065664308602139494639522473719070217986094370277053921717629317675238467481846766940513200056812714526356082778577134275778960917363717872146844090122495343014654958537105079227968925892354201995611212902196086403441815981362977477130996051870721134999999837297804995105973173281609631859502445945534690830264252230825334468503526193118817101000313783875288658753320838142061717766914730359825349042875546873115956286388235378759375195778185778053217122680661300192787661119590921642019891337

 

 

 


Mapped Object Types

https://typehero.dev/challenge/mapped-object-types

type MovieInfoByGenre<T> = {
  [K in keyof T]: {
		name: string; year: number; director: string;
	};
};

 

 

 


Primitive Data Types

https://typehero.dev/challenge/primitive-data-types

const playSong = (artistName: string, year: number) => {
  return `${artistName} was released in the year ${year}`;
};

const artistName: string = 'Frank Zappa';

const age: number = 52;

interface Musician {
  artistName: string;
  age: number;
  deceased: boolean;
}

const musicianInfo = ({ artistName, age, deceased }: Musician) => {
  return `${artistName}, age ${age}${deceased ? ' (deceased)' : ''}`;
};

musicianInfo({
  artistName,
  age,
  deceased: true,
});

 

 

 


Type Aliases

https://typehero.dev/challenge/type-aliases

// We completed the first alias (`Name`) for you to see as an example
type Name = string;

// Now try replacing `unknown` with a primitive data type that might be appropriate for `Year`
type Year = number;
type Count = number;
type IsOperational = boolean;

type Kilograms = number;
type Payload = {
  name: Name;
  mass: Kilograms;
};

 

 

 

 


Default Generic Arguments

https://typehero.dev/challenge/default-generic-arguments

type ApiRequest<D, M = 'GET'> = {data: D, method: M};

type TSConfig<T = {strict: true}> = T;

 

 

 


Type Unions

https://typehero.dev/challenge/type-unions

// Part 1: Meters
type Meters = {
  unit: 'meters';
  value: number;
};

type Miles = {
  unit: 'miles';
  value: number;
};

type Feet = {
  unit : 'feet';
  value: number;
}

type Distance = Meters | Miles | Feet;

/////////////////////////////////////////////////
// Part 2: position
type Position = 'top' | 'topLeft' | 'topRight' | 'left' | 'center' | 'right' | 'bottomLeft' | 'bottom' | 'bottomRight';
๋ฐ˜์‘ํ˜•