FrontEnd/TypeScript21 아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript 키워드 TOP 10! 소개 Typescript는 Microsoft에서 개발한 정적 타입을 지원하는 JavaScript의 상위 집합 언어입니다. Typescript는 JavaScript의 기능을 확장하고 개선하여 개발자들이 더욱 안정적이고 확장 가능한 애플리케이션을 만들 수 있도록 도와줍니다. 이번 블로그 포스트에서는 Typescript의 주요 키워드 중 상위 10개를 예시 코드와 함께 자세히 알아보겠습니다. 1. any any 키워드는 변수의 타입을 명시적으로 지정하지 않고, 어떤 타입이든 할당할 수 있도록 합니다. 이는 동적 타입 언어인 JavaScript와의 호환성을 유지하기 위해 사용됩니다. 예시 코드를 살펴보겠습니다. let variable: any = 10; variable = 'Hello World'; consol.. 2023. 6. 23. 예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴 예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴 디자인 패턴은 소프트웨어 개발에서 자주 사용되는 문제 해결 방법을 정형화한 것입니다. 이러한 패턴은 코드의 재사용성, 유지보수성, 확장성을 향상시키는 데 도움이 됩니다. 타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 개발자가 코드를 더욱 안정적으로 작성할 수 있게 해줍니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 '옵저버 패턴'에 대해 알아보겠습니다. 1. 옵저버 패턴이란? 옵저버 패턴은 객체 간의 일대다 의존성을 정의하는 디자인 패턴입니다. 이 패턴은 한 객체의 상태가 변경되면, 그 객체에 의존하는 다른 객체들에게 자동으로 알림을 보내고 상태 변화에 대한 처리를 할 수 있도록 합니다.. 2023. 6. 22. 예시코드와 함께 알아보는 타입스크립트 디자인패턴: 싱글톤 패턴 소개 디자인 패턴은 소프트웨어 개발에서 자주 사용되는 문제 해결 방법을 정형화한 것입니다. 이러한 패턴은 코드의 재사용성, 유지보수성, 가독성을 향상시키는 데 도움이 됩니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 싱글톤 패턴에 대해 알아보겠습니다. 싱글톤 패턴은 오직 하나의 인스턴스만을 생성하고, 이를 전역에서 접근할 수 있도록 하는 패턴입니다. 본문 1. 싱글톤 패턴이란? 싱글톤 패턴은 클래스의 인스턴스를 하나만 생성하고, 이를 전역에서 접근할 수 있도록 하는 디자인 패턴입니다. 이 패턴은 여러 곳에서 동일한 인스턴스에 접근해야 하는 경우 유용합니다. 예를 들어, 로그 기록을 관리하는 클래스나 설정 정보를 저장하는 클래스 등이 싱글톤 패턴으로 구현될 수 있습니다.. 2023. 6. 22. 예시코드와 함께 알아보는 타입스크립트 디자인패턴: 팩토리 패턴 소개 디자인 패턴은 소프트웨어 개발에서 자주 발생하는 문제를 해결하기 위한 일련의 해결책입니다. 이러한 패턴은 개발자들 사이에서 공통된 언어와 구조를 제공하여 코드의 가독성과 유지보수성을 향상시킵니다. 타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 개발자들이 코드를 더욱 안정적으로 작성할 수 있게 도와줍니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 팩토리 패턴에 대해 알아보겠습니다. 본문 1. 팩토리 패턴이란? 팩토리 패턴은 객체를 생성하는 인터페이스를 정의하고, 이를 서브 클래스가 결정하게 하는 패턴입니다. 이 패턴은 객체의 생성과정을 캡슐화하여 클라이언트 코드와의 결합도를 낮추고, 유연성과 확장성을 높이는데 도움을 줍니다. 팩토리 패턴은 다음.. 2023. 6. 22. 타입스크립트 정리하기 6. 함수 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 6. 함수 6-1. 기본 파라미터와 옵션 파라미터 옵션 파라미터 타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다. 단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다. function buildName(firstName:string, lastName?:string){ //.... } function buildNameInvalid(firstName?.. 2020. 4. 19. 타입스크립트 정리하기 5. Enum 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 5. Enum 5-1. 특정한 값을 가진 Enum enum의 기본값은 각 요소가 풀어질 때 숫자 값이 할당된다. enum MimeType { JPEG, PNG, PDF } MimeType의 PDF를 사용하게 되면, 값은 2가 된다. 이 때, 각 요소에 값을 할당할 수 있다. enum MimeType { JPEG = 'image/jpeg', PNG = 'image/png', PDF = 'application/pdf' } 이제 MimeType의 PDF를 사용하게 되면, 값은 'ap.. 2020. 4. 19. 타입스크립트 정리하기 4. 배열 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 4. 배열 4-1. 배열에서 Object 찾기 - find() 사용 const inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 6} ] function findCherries(fruit) { return fruit.name === 'cherries'; } inventory.find(findCherries); // {name: 'cherri.. 2020. 4. 19. 타입스크립트 정리하기 3. 타입스크립트의 주요타입 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 3. 타입스크립트의 주요 타입 3-1. String Literal Types String Literal Types는 문자열이 가질 수 있는 특정 값을 한정할 수 있다. let myFavoritePet: "dog"; myFavoritePet = "dog"; // OK myFavoriyePet = "rock"; // Error: Type '"rock"' is not assignable to type '"dog"'. 타입의 이름을 주어 enum과 같은 역할을 할 수 있다. type .. 2020. 4. 13. Type Script 정리 - 2. 타입스크립트를 언제 또 왜 사용해야 하는가? 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 2-1. 안전성 타입스크립트는 정적 분석을 통해 타입에러를 잡아낸다. function double(x: number) : number { return 2*x; } double('2'); // ~~~ Argument of type '"2"' is not assignable to parameter of type 'number'. 2-2 가독성 타입스크립트는 에디터에서 상황에 맞는 문서를 제시한다. 2-3. 자동완성 타입스크립트는 에디터가 자동으로 소스코드를 지정한 형태로 포맷을 자.. 2020. 4. 13. 이전 1 2 3 다음 반응형
