Javascript에서 Typscript 개념으로 점프하는 방법을 알아야 합니다.

정말 배우고 싶나요?
정말 !
시작해 보세요

다음은 알아야 할 개념 목록입니다.

1.유형 및 유형 주석

• 기본 유형: 문자열, 숫자, 부울, 임의, void, 정의되지 않음, null 등의 차이점을 이해합니다.

• 유형 주석: 유형을 명시적으로 선언하는 방법을 알아보세요(예: age: number = 30;).

• 유형 추론: TypeScript는 컨텍스트에서 유형을 추론할 수 있지만 명시적 유형을 사용해야 하는 경우와 추론에 의존해야 하는 경우를 이해하는 것이 중요합니다.

• Union 유형: 유형은 여러 유형의 조합일 수 있습니다(예: 값 설정: 문자열 | 숫자).

• 리터럴 유형: 특정 값이 될 수 있는 유형(예: 방향: '왼쪽' | '오른쪽';).

2. 인터페이스 및 유형 별칭

• 인터페이스: 객체 모양을 정의하는 데 사용됩니다(예: 인터페이스 사용자 { 이름: 문자열; 나이: 숫자 }).
• 유형 별칭: 사용자 정의 유형을 생성할 수 있습니다(예: 유형 ID = 문자열 | 숫자;).
• 인터페이스와 유형의 차이점: 인터페이스는 확장 가능하지만 유형 별칭은 더 유연합니다(기본 요소, 공용체, 교차점 등을 정의할 수 있음).

3. 제네릭

• 일반 함수: 여러 유형으로 작업할 수 있는 함수(예: 함수 ID(arg: T): T { return arg; }).
• 일반 인터페이스/클래스: 인터페이스와 클래스에 제네릭을 적용합니다(예: 인터페이스 Box { 값: T; }).

4. 유형 어설션 및 캐스팅

• 유형 어설션: 유형에 대해 실제보다 더 많이 알고 있음을 TypeScript에 알립니다(예: value = someValue를 문자열로 지정).
• Null이 아닌 어설션: ! 값이 null 또는 정의되지 않음(예: someVar!.doSomething())이 아님을 TypeScript에 알리는 것입니다.

5. 구조적 타이핑(Duck Typing)
TypeScript에서 유형은 구조적입니다. 즉, 이름이 아닌 속성을 기준으로 유형을 비교합니다. 두 유형이 동일한 구조를 가질 경우 동일한 유형으로 간주됩니다.

6. 열거형

• 숫자 및 문자열 열거형: 명명된 상수 집합을 정의할 수 있습니다(예: 열거형 방향 { Up, Down, Left, Right }).
• Const Enums: 역방향 매핑이 필요하지 않은 경우 더 효율적인 열거형 형식입니다(예: const enum Color { Red, Green, Blue }).

7. 유형 축소

• 유형 가드: typeof, instanceof 또는 사용자 정의 유형 조건자를 사용하여 변수 유형의 범위를 좁힙니다.
• 차별화된 공용체: 공용체 유형을 공통 속성(구별자)과 결합하여 유형을 좁힙니다(예: Circle = { kind: "circle"; radius: number }; 유형).

8. 고급 유형

• 교차 유형: 여러 유형을 하나로 결합합니다(예: AdminUser = User & Admin; 유형).
• 매핑된 유형: 유형의 속성을 변환할 수 있습니다(예: ReadOnly = { readonly [P in keyof T]: T[P]; } 유형). 유틸리티 유형: 부분, 선택, 생략, 기록 등과 같은 일반적인 유형 변환을 단순화하는 내장 유형

9. 모듈 및 네임스페이스

• ES 모듈: TypeScript는 ES6 모듈 구문(예: 가져오기/내보내기)을 지원합니다. 모듈 해결과 기본 내보내기와 명명된 내보내기의 차이점을 이해하는 것이 중요합니다.
• 네임스페이스: TypeScript에도 자체 네임스페이스 시스템이 있지만 일반적으로 최신 코드베이스용 ES 모듈을 선호하는 것은 권장되지 않습니다.

10. JavaScript 라이브러리 처리

• DefinitelyTyped: 자체 유형을 제공하지 않는 JavaScript 라이브러리에 대한 유형 정의를 설치하고 사용하는 방법을 알아보세요(예: @types/lodash를 통해).
• 타사 라이브러리에 대한 유형 선언: 사용 가능한 유형이 없을 때 라이브러리 또는 전역 객체에 대한 사용자 정의 유형 선언(*.d.ts 파일)을 작성하는 방법을 알아보세요.

11. 클래스와 상속

• TypeScript 클래스: JavaScript 클래스와 유사하지만 추가 유형 검사가 있습니다.
• 액세스 수정자: 공개, 비공개, 보호 키워드는 클래스 구성원의 가시성을 제어합니다.
• 읽기 전용: 속성을 읽기 전용으로 표시합니다(예: 읽기 전용 ID: 숫자).
• 추상 클래스 및 메서드: 추상 클래스는 직접 인스턴스화할 수 없으며 하위 클래스로 지정되어야 합니다.

12. 비동기/대기 및 약속
TypeScript는 async/await 및 Promises를 완벽하게 지원하지만 유형 주석을 추가하면 Promise 또는 async 함수와 같은 유형 관련 문제를 방지하는 데 도움이 될 수 있습니다.

13. 데코레이터
실험적 기능: 데코레이터는 클래스 및 클래스 멤버에 주석을 달거나 수정하기 위한 특수 구문입니다. Angular와 같은 프레임워크에서는 유용하지만 TypeScript에서는 아직 실험적입니다.

14. 엄격한 유형 검사 옵션

• 엄격 모드: 더 엄격한 유형 검사 옵션(예: strictNullChecks, noImplicitAny)을 활성화합니다.
• tsconfig.json: 이 파일을 사용하여 TypeScript를 구성하여 컴파일러 옵션을 활성화 또는 비활성화하는 방법을 알아보세요.

15. TypeScript와 JavaScript 상호 운용성

• JavaScript 코드 작업: TypeScript는 JavaScript와 완벽하게 호환됩니다. 기존 JavaScript 프로젝트에 TypeScript를 점진적으로 도입하고 TypeScript에서 JavaScript를 계속 호출할 수 있으며 그 반대도 마찬가지입니다.
• JSDoc 주석: JavaScript에서 JSDoc 스타일 주석을 사용하여 TypeScript에 유형 정보를 제공할 수 있으며 이는 혼합 JS/TS 코드베이스에 유용합니다.

16. 오류 처리
TypeScript는 컴파일 시 null 또는 정의되지 않은 속성에 액세스하는 등 일반적인 오류를 포착하는 데 도움이 됩니다. 적절한 유형 주석과 함께 TypeScript에서 try/catch를 사용하는 방법을 이해하는 것이 중요합니다.

17. TypeScript 구성(tsconfig.json)

• 컴파일러 옵션: 모듈 해상도, 엄격성 설정, 대상 환경을 포함한 컴파일러 설정을 구성하는 방법을 알아보세요.
• 소스 맵: 브라우저나 Node.js에서 TypeScript를 더 쉽게 디버깅할 수 있도록 소스 맵을 설정하세요.

18. 유틸리티 기능 및 유형

• keyof, typeof, instanceof: 이러한 유틸리티 연산자와 이를 사용하여 유형을 추출하고 조작하는 방법을 이해합니다.
• 색인 서명: 개체의 키 유형과 값을 동적으로 정의할 수 있습니다(예: [키: 문자열]: 임의).

19. 조건부 유형
TypeScript를 사용하면 조건에 따라 유형을 정의할 수 있습니다(예: 유형 IsString = T 확장 문자열 ? true : false;).

20. TypeScript 버전 관리 및 호환성

• 새로운 기능: 빠르게 발전하는 언어인 새로운 TypeScript 버전으로 최신 상태를 유지하세요. 템플릿 리터럴 유형, 유형 조건자, 더욱 엄격한 유형 검사와 같은 새로운 기능을 통해 코드를 개선할 수 있습니다.

이러한 TypeScript 관련 개념을 익히면 정적 유형 시스템을 포함한 TypeScript의 모든 기능을 활용하여 일반 JavaScript에 비해 향상된 코드 품질, 유지 관리성 및 확장성을 얻을 수 있습니다.

나에 대해 더 알고 싶으시면 검색창에 sallbro라고 적어주세요...

위 내용은 Javascript에서 Typscript 개념으로 점프하는 방법을 알아야 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!