You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
classPerson{name: string;constructor(name: string){this.name=name;}greet(){console.log(`Hello, my name is ${this.name}.`);}}constp=newPerson("Ray");p.greet();
classPerson{name: string;constructor(name: string){this.name=name;}greet(){// 로깅 로직 추가console.log("LOG: Entering method.");console.log(`Hello, my name is ${this.name}.`);console.log("LOG: Exiting method.")}}
classPerson{name: string;constructor(name: string){this.name=name;}greet(){// 로깅 로직 추가console.log("LOG: Entering method.");console.log(`Hello, my name is ${this.name}.`);console.log("LOG: Exiting method.")}hello(){// 로깅 로직 추가console.log("LOG: Entering method.");console.log(`Hello, my name is ${this.name}.`);console.log("LOG: Exiting method.")}}
classPerson{name: string;constructor(name: string){this.name=name;}// great이 loggedMethod의 인수로 전달된다.
@loggedMethodgreet(){console.log(`Hello, my name is ${this.name}.`);}
@loggedMethodhello(){console.log(`Hello, my name is ${this.name}.`);}}constp=newPerson("Ray");p.greet();// Output://// LOG: Entering method.// Hello, my name is Ray.// LOG: Exiting method.
typeHasNames={names: readonlystring[]};functiongetNamesExactly<TextendsHasNames>(arg: T): T["names"]{returnarg.names;}// 우리가 원하는 타입:// readonly ["Alice", "Bob", "Eve"]// 하지만 실제 추론된 타입:// string[]constnames1=getNamesExactly({names: ["Alice","Bob","Eve"]});// 하지만 우리는 정확하게 아래처럼 되길 원합니다. 하지만 `as const`를 항상 붙이는 것은 잊기 쉽습니다.// readonly ["Alice", "Bob", "Eve"]constnames2=getNamesExactly({names: ["Alice","Bob","Eve"]}asconst);//////////////// TypeScript 5, const Type Parameters 이후 //////////////////////////typeTS5_HasNames={names: readonlystring[]};functionts5_getNamesExactly<constTextendsHasNames>(arg: T): T["names"]{// ^^^^^returnarg.names;}// 추론된 타입: readonly ["Alice", "Bob", "Eve"]// TypeScript 4.'as const'가불필요constnames=ts5_getNamesExactly({names: ["Alice","Bob","Eve"]});
The text was updated successfully, but these errors were encountered:
TS 2.0에서 enum literal type이 도입. enum 자체를 union으로 사용하여 subset을 만들 수도 있음.
// Color is like a union of Red | Orange | Yellow | Green | Blue | VioletenumColor{Red,Orange,Yellow,Green,Blue,/* Indigo, */Violet}// Each enum member has its own type that we can refer to!typePrimaryColor=Color.Red|Color.Green|Color.Blue;functionisPrimaryColor(c: Color): c is PrimaryColor{// Narrowing literal types can catch bugs.// TypeScript will error here because// we'll end up comparing 'Color.Red' to 'Color.Green'.// We meant to use ||, but accidentally wrote &&.returnc===Color.Red&&c===Color.Green&&c===Color.Blue;}
TS 5.0에서는 계산된 각 멤버에 고유한 타입을 생성하여 모든 enum을 union enum으로 만들 수 있음.
enumE{Blah=Math.random()}consta: E.Blah=10
enum vs union type
// enumenumFruit{APPLE='APPLE',BANANA='BANANA',KIWI='KIWI'}// union typetypeFruit='apple'|'banana'|'kiwi'
enum의 경우 js object로 컴파일되기 때문에 작은 차이지만 번들 사이즈에 영향을 줄 수 있음.
namespaces 방식에서 modules 방식으로 전환 -> scope lifting의 효과를 가져옴
namespace 방식은 IIFE의 형태로 컴파일되어 하나의 object에 property들로 추가됨.
아래와 같이 object->property로 접근해야 해서 overhead가 생김. (Non-local accesses to exports of that namespace are implicitly fully qualified, incurring the overhead of an object access)
// Namespace definitionnamespaceMyNamespace{exportconstmyVariable=10;}// Accessing the exported memberconstvalue=MyNamespace.myVariable;
TypeScript 5
Decorators
Before
Use Decorator
주의할 점
class 내부
에서만 사용할 수 있다.runtime에 호출
된다.실제 활용 사례
에러 클래스 생성 및 로깅 로직은 decorator로 재사용 가능하도록 활용
const Type Parameters
TS Playground
The text was updated successfully, but these errors were encountered: