π λ¬λ νμ μ€ν¬λ¦½νΈ μ± λ¦¬λ·° | ν¨μ, λ°°μ΄, μΈν°νμ΄μ€
μ΅κ·Ό λ¬λ νμ μ€ν¬λ¦½νΈ μ± μ μ΄μ©ν΄ νμ μ€ν¬λ¦½νΈ μ€ν°λλ₯Ό μ§ννκ³ μλ€.
5μ₯.ν¨μ, 6μ₯.λ°°μ΄, 7μ₯.μΈν°νμ΄μ€ μ±ν°λ₯Ό μ½μΌλ©° μΈμμ μ΄μλ λ΄μ©μ μμ£Όλ‘ μ 리ν΄λ³΄λ € νλ€.
1. ν¨μμ 맀κ°λ³μμ νμ μΆλ‘ λ°©μ
κΈ°λ³Έ ν¨μ 맀κ°λ³μμμλ μ΄κΈ° λ³μ«κ°κ³Ό μ μ¬νκ² νμ μΆλ‘ μ΄ μ΄λ£¨μ΄μ§λ€.
function rateSong(song: string, rating = 0) {
console.log(`${song} gets ${rating}/5 stars`);
}
rateSong("Photograph"); //ok
rateSong("Set Fire to the Rain", 5); //ok
rateSong("Set Fire to The Rain", undefined); //ok
rateSong("At Last!", "100"); // error
songμλ stringνμ μ λͺ μμ μΌλ‘ μ μΈν΄μ€¬μ§λ§ ratingμλ μ΄κΈ°κ°λ§ ν λΉλμ΄μκ³ λ°λ‘ νμ μ λν μ΄μ μ΄ μλ€.
κ·Έλ¬λ νμ μ€ν¬λ¦½νΈλ μμ κ°μ κ²½μ° λ§€κ°λ³μμ μ΄κΈ°κ°μ κΈ°λ°μΌλ‘ νμ μ μ μΆνλ€.
μΈμμ μ΄μλ λΆλΆμ ratingμ νμ
μΆλ‘ μ΄ ν¨μλ₯Ό νΈμΆνλ μ½λμμλ number νμ
μΌλ‘ μ μΆλμ§λ§, ν¨μλ₯Ό νΈμΆνλ(μ¬μ©νλ) μ½λμμλ μ νμ number | undefined
λ‘ μ μΆλλ€λ μ μ΄λ€.
μ¦, ν¨μμ 맀κ°λ³μμ μ΄κΉκ°μ μ§μ νλ©΄ μλμ μΌλ‘ ν΄λΉ νμ
| undefined
λ‘ μ§μ λλ€.
2. ?μΌλ‘ ννλλ μ νμ 맀κ°λ³μμ undefinedλ₯Ό ν¬ν¨νλ μ λμΈ νμ μ μ°¨μ΄
// | undefinedλ₯Ό ν¬ν¨νλ μ λμΈ νμ
function getSingerA(singer: string | undefined) {}
// μ νμ 맀κ°λ³μ
function getSingerB(singer?: string) {}
getSingerA("Greensleeves"); // error
getSingerB("Greensleeves"); // ok
getSingerA(undefined); // ok
getSingerB(undefined); // ok
getSingerA("Sia"); //ok
getSingerB("Sia"); //ok
λ§μ°νκ² νμ μ ?μΌλ‘ νμνλ©΄ undefinedλ₯Ό μ λμ¨νμ μ μΆκ°ν κ²κ³Ό μ μ¬νμ§μμκΉ? λΌκ³ μκ°νκ³ μμλ€.
νμ§λ§ ?λ‘ νμν κ²μ 맀κ°λ³μ μ체λ₯Ό μ νμ μΌλ‘ λ°κ² λ€λΌκ³ μ μνλ κ²μ΄κ³ , μ νμ 맀κ°λ³μ μμ΄ | undefined
λ₯Ό ν¬ν¨νλ μ λμΈ νμ
μΌλ‘ μ μΈνλ κ²μ κ°μ 무쑰건 λ°λ, undefinedλ κ°λ₯νκ²λ νμ
μ μ μΈν κ²μ΄λΌλ μ μμ μ΄ λμ λ€λ₯΄λ€.
3. λ°ν νμ μΌλ‘ void vs undefined vs never
- void: ν¨μμ λ°ν νμ
μ΄ λ¬΄μλλ€. ν¨μκ° λ°ννλ λͺ¨λ κ°μ 무μνλλ‘ μ€μ ν λ μ μ©νλ€.
- ex) μλ°μ€ν¬λ¦½νΈ λ΄μ₯ ν¨μ forEach() λ©μλλ voidλ₯Ό λ°ννλ μ½λ°±μ λ°λλ€.
- undefined: λ§κ·Έλλ‘ undefinedκ° λ°νλλ€λ κ²μ λͺ μμ μΌλ‘ μ μΈν κ².
- never νμ : (μλμ μΌλ‘) νμ μ€λ₯λ₯Ό λ°μμν€κ±°λ 무ν루νλ₯Ό μ€ννλ ν¨μ. μ λ λ°ννμ§ μλλ€.
voidλ μ무κ²λ λ°ννμ§ μλ ν¨μλ₯Ό ννν λ, neverλ μ λ λ°ννμ§ μλ ν¨μμ νμ μ ννν λ μ¬μ©νλ€.
3-1. neverμ λλ€λ₯Έ μ©λ²: 볡μ‘ν 쑰건 νμ νννκΈ°.
μλ₯Ό λ€λ©΄ μ΄λ° κ²½μ°μ΄λ€.
μ΄λ€ ν¨μλ 2κ°μ§μ 맀κ°λ³μλ₯Ό λ°μ μ μλ€. κ·Έλ¬λ number μΈμλ₯Ό λ°μΌλ©΄ stringμ λ°μ μ μκ³ , λ°λλ‘ stringμ λ°μΌλ©΄ numberλ λ°μ μ μλ€.
μ΄λ¬ν 쑰건μ κ°μ§ ν¨μμ νμ μ μ μν λ μλμ κ°μ΄ μ νμ 맀κ°λ³μμ never νμ μ μ΄μ©ν΄ νμ μ μλ₯Ό ν μ μλ€.
interface TextOnly {
number?: never;
string: string;
}
interface NumberOnly {
number: number;
string?: never;
}
type Interface = TextOnly | NumberOnly;
function foo({ number, string }: Interface) {
// ...
}
foo({ number: 1, string: "a" }); // error
foo({ number: 1 }); // ok
foo({ string: "a" }); //ok
4. enumμ μ¬μ©νλ κ²μ μ±λ₯λ©΄μμ μ’μ§ μλ€!
enumμ΄λ μ΄κ±°ν λ³μλ‘ Javascriptμμλ μ 곡νμ§ μλ Typescriptκ° μ체μ μΌλ‘ ꡬννλ κΈ°λ₯μ΄λ€.
enumμ μ¬μ©ν μ½λλ₯Ό μ»΄νμΌνκ² λλ©΄ λ€μκ³Ό κ°μ κ²°κ³Όλ₯Ό μ»μ μ μλ€.
export enum FRUITS {
APPLE = 'apple',
BANANA = 'banana'
};
[μ»΄νμΌ κ²°κ³Ό]
export var FRUITS;
(function (FRUITS) {
FRUITS["APPLE"] = "apple";
FRUITS["BANANA"] = "banana";
})(FRUITS || (FRUITS = {}));
μμ κ°μ΄ μ¦μμ€νν¨μμ ννλ‘ κ°μ²΄λ₯Ό λ§λ€κ² λλλ°, μ΄ μ½λλ λ²λ€λ¬κ° βμ¬μ©νμ§ μλβμ½λλΌκ³ νλ¨νμ§ μμΌλ―λ‘ νΈλ¦¬μμ΄νΉλμ§ μκ³ μ΅μ’ λ²λ€μ ν¬ν¨λλ€. μ¦, κ°λ° νκ²½μμλ§ νμν λΆνμν νμ μ μ μ½λλ‘ μΈν΄ λ²λ€μ ν¬κΈ°κ° μ¦κ°νκ² λλ κ²μ΄λ€.
μ΄λ¬ν enum νμ μ λ체νκΈ°μν λ°©λ²μΌλ‘ const μ΄μμ μ μ¬μ©ν μ μλ€.
export const FruitsType = {
APPLE = 'apple',
BANANA = 'banana'
} as const;
export type FruitsType = keyof typeof FruitsType;
5. λ°°μ΄μ λΆμμ νλ€.
Typescriptμ νμ μμ€ν μ μλ²½νμ§ μλ€. Typescriptμμλ κΈ°λ³Έμ μΌλ‘ λͺ¨λ λ°°μ΄μ λ©€λ²μ λν μ κ·Όμ λν΄ ν΄λΉ λ°°μ΄μ λ©€λ²λ₯Ό λ°ννλ€κ³ κ°μ νλ€. μ¦, μ΄λ€ λ°°μ΄μ ν΄λΉ μΈλ±μ€μ μ€μ λ‘ κ°μ΄ μ‘΄μ¬νμ§ μμλ μ‘΄μ¬νλ€κ³ κ°μ νλ€. (μλ°μ€ν¬λ¦½νΈμμλ λ°°μ΄μ λν΄μλ λΉμ·ν λ°©μμΌλ‘ λμνλ€. λ§μ½, λ°°μ΄μ κΈΈμ΄λ³΄λ€ ν° μΈλ±μ€λ‘ λ°°μ΄ μμμ μ κ·Όνλ©΄ λ νΌλ°μ€ μλ¬κ° μλ undefinedλ₯Ό μ 곡νλ€.)
function withElement(elements: string[]) {
console.log(elements[9001].length); // νμ
μ€λ₯ λ°μνμ§ μμ
}
withElements(["It's", "over"]);
Typescriptλ κ²μλ λ°°μ΄μ λ©€λ²κ° μ‘΄μ¬νλμ§ μλμ μΌλ‘ νμΈνμ§ μμΌλ―λ‘ μμ κ°μ μν©μμ νμ
μ€λ₯λ₯Ό λ°μμν€μ§ μλλ€. λν elements[9001]
λ undefinedκ° μλλΌ string νμ
μΌλ‘ κ°μ£Όλλ€.
μ§κΈκΉμ§ κ°λ°μ νλ κ³Όμ μμλ μ€λ Ή μμ κ°μ μν©μ΄ μκ²ΌλλΌλ νμ μ€λ₯κ° λ°μνμ§ μλ κ²μ λν΄ ν° μλ¬Έμ κ°μ§ μμμ κ² κ°λ€. νμ§λ§ μ΄ μ± μ ν΅ν΄ μμ λ₯Ό μ ν΄λ³΄λ νμ μ€ν¬λ¦½νΈλ₯Ό κΈ°μ μ μΌλ‘ λΆμμ νλ€κ³ νλ κ²μ μλ―Έλ₯Ό μ΄ν΄ν μ μμκ³ ν₯λ―Έλ‘μ λ€.
μ΄λ² ννΈμ μμ λ₯Ό ν΅ν΄ νμ μ€ν¬λ¦½νΈμ μλ°μ€ν¬λ¦½νΈκ° μλ²½νμ§ μλ€λ κ±Έ λ μ μ΄ν΄νκ² λμκ³ , μ΄ μ¬μ€μ μκ³ λλ μμΌλ‘ μ΄λ° μ½λ μμ±ν λ μ‘°κΈ λ μ κ²½ μ°κ² λ κ² κ°λ€.
μ°Έκ³
https://beta.reactjs.org/reference/react/useLayoutEffect
https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-useEffect%EC%99%80-useLayoutEffect-%EB%B9%84%EA%B5%90%EC%8B%9C%EB%A6%AC%EC%A6%88
https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking