const isReactElement = (element: ReactNode): element is ReactElement =>
element !== null && typeof element === 'object' && 'props' in element;const isReactElement = (element: ReactNode): element is ReactElement =>
element !== null && typeof element === 'object' && 'props' in element;interface Article {
title: string;
body: string;
}
function isArticle(body: unknown): body is Article {
let b = body as Article;
return !!b && typeof b.body === 'string' && typeof b.title === 'string';
}interface Article {
title: string;
body: string;
}
function isArticle(body: unknown): body is Article {
let b = body as Article;
return !!b && typeof b.body === 'string' && typeof b.title === 'string';
}모든 promise가 resolve/reject 되기를 기다렸다가 각 promise의 result를 반환한다.
Promise.all과 다른점
reject가 있어도 일단 모두 pending 상태를 벗어나길 기다렸다가 결과값을 반환한다.reject를 따로 하지 않고 반환값을 변경하므로 catch를 타지 않는다.Promise<T>가 아니고 PromiseSettledResult<T>를 반환.PromiseSettledResult는 아래와 같이 생겼다.// fullfiled
{
status: "fullfiled",
value: T
}
// rejected
{
status: "rejected",
reason: any
}// fullfiled
{
status: "fullfiled",
value: T
}
// rejected
{
status: "rejected",
reason: any
}실제로 돌려보면 아래와 같다.
const { name = {} } = user;const { name = {} } = user;but formik's official type def's wrong
wtf
https://github.com/formium/formik/issues/2059#issuecomment-700681150
let val = '123'
isNaN(val) // nah! Argument of type 'string' is not assignable to parameter of type 'number'. ts(2345)
isNaN(123) // nah! Unexpected use of 'isNaN'. (eslintno-restricted-globals)let val = '123'
isNaN(val) // nah! Argument of type 'string' is not assignable to parameter of type 'number'. ts(2345)
isNaN(123) // nah! Unexpected use of 'isNaN'. (eslintno-restricted-globals)then use
Number.isNaN(val) // yay!Number.isNaN(val) // yay!daum 주소검색등 window에 뭔가 끼워넣는 외부 기능 사용시, window.someApi등으로 호출하게 될 때가 있는데, TS에서 당연히 Property 'someApi' does not exist on type 'Window & typeof globalThis'. 라고 뭐라고 한다. 요걸 해결하기 위해 보통은:
(window as any).someApi(window as any).someApi혹은
(<any>window).someApi(<any>window).someApi를 쓰라고 하는데 아래가 더 나은 것 같다.
declare global {
interface Window {
someApi: any; // 혹시 타입 정의를 제공해준다면 somApiType
}
}declare global {
interface Window {
someApi: any; // 혹시 타입 정의를 제공해준다면 somApiType
}
}요게 되는 것은 interface는 merging이 되기 때문.
https://mariusschulz.com/blog/declaring-global-variables-in-typescript
interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
let box: Box = {height: 5, width: 6, scale: 10};interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
let box: Box = {height: 5, width: 6, scale: 10};https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
예를 들어, 첫번째 arg는 보통 string이고 두번째 arg는 보통 number인데 아닐 수도 있고 두번째 arg가 있을 수도 없을 수도 있는 함수의 타입을 정의한다면 아래와 같이 선언할 수 있을 것이다.
type ExampleFn<T, U> = (arg0: T, arg1?: U) => SomeReturnType;type ExampleFn<T, U> = (arg0: T, arg1?: U) => SomeReturnType;근데 쓸 때 마다 아래와 같이 하기는 매우 귀찮은 일이다.
const implmentedFn1: ExampleFn<string, number> = (val: string) => /* ... */const implmentedFn1: ExampleFn<string, number> = (val: string) => /* ... */그래서 ts는 type argument에도 default value를 정해놓을 수 있는데, 함수 default value랑 동일한 형태로, 아래와 같이 하면 된다.
type ExampleFn<T = string, U = number> = (arg0: T, arg1?: U) => SomeReturnType;type ExampleFn<T = string, U = number> = (arg0: T, arg1?: U) => SomeReturnType;이제부턴 굳이 명시할 필요가 생기지 않으면 그냥 편하게 쓸 수 있다.
const implmentedFn2: ExampleFn = (val: string) => /* ... */const implmentedFn2: ExampleFn = (val: string) => /* ... */그러고보니 아예 arg에 타입 어노테이션을 안해도 된다.
const implmentedFn3: ExampleFn = (val) => /* ... */const implmentedFn3: ExampleFn = (val) => /* ... */