타입스크립트 강의 복습

• JS에서 타입안정성을 부여한 코드
• 자바와 C# 은 당연히 타입을 사용함

니콜라스 타입스크립트 강의로 TS 복습
밑 내용은 스파르타코딩클럽 강의내용
목표는 프로젝트 중 한개 TS로 변환하기

1주차

자바스크립트의 단점

• 약한 타입 체크
• 실행시간에 결정되는 변수 타입
• 물렁물렁한 객체

타입스크립트

• 컴파일시간에 변수에 타입을 체크합니다
  • vscode에서 바로 오류를 알려줌
  • 실행시키지 않아도 빨간줄..

• 자바스크립트는 생성자클래서의 변수를 밖에서도 접근가능하다
• 타입스크립트는 private, public 접근가능
  • 접근하고싶으면 getter 함수를 따로 작성

• 타입스크립트는 정적언어 즉, 컴파일하여 기계어로 변환해야한다
• 자바스크립트는 동적언어 브라우저에서 해석, 실행한다

타입스크립트 주요 명령어

• 주요 명령어
  • tsc —-init
    • tsconfig.json이 생성되는 명령어입니다!
    • tsconfig.json에 대해서는 다음 강의 때 자세히 말씀드릴게요!
  • tsc index.ts
    • index.ts를 컴파일 합니다!
    • .ts는 TypeScript 파일의 확장자에요!
  • tsc src/*.ts
    • src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일 합니다!
  • tsc index.js --declaration --emitDeclarationOnly
    • @types 패키지를 위한.d.ts 파일 생성을 하는 명령입니다!
    • TypeScript로 작성된 모듈이 아니라 JavaScript로 작성된 모듈에 타입 선언을 제공할 때 유용하게 쓰여요!

☑️ 옵션 매뉴얼

• https://www.typescriptlang.org/ko/tsconfig

☑️ compilerOptions - target 옵션

• 해당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션이에요!
• es5 로 설정하면 CommonJS 버전으로 컴파일되구요!
• es2016(=es7) 로 설정하면 ES2016 버전으로 컴파일이 됩니다!
  • 최신 브라우저는 보통 ES2016을 지원하니 이렇게 설정하시는 것을 추천드려요!
• 단, 이것을 정할 때는 TypeScript가 어느 환경에서 실행이 되어야하는지를 고려하셔야 해요!
  • 만약, 내가 만든 프로젝트가 생각보다 레거시한 환경에서 동작해야 된다면? → es5
  • 그렇지 않다면 → es2016

☑️ compilerOptions - module 옵션

• TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정합니다!
• 모듈을 가져오고 내보내는 방식을 결정하는 옵션이라고 생각하시면 됩니다!
• target 옵션과는 서로 독립적인 관계니 프로젝트의 요구사항에 따라 옵션을 설정하시면 됩니다!

☑️ compilerOptions - outDir 옵션

• 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정합니다!
• 예를 들어, "outDir": "dist"로 설정하면 컴파일된 파일들이 dist 폴더에 저장되죠!
• 5) compilerOptions - strict 옵션
  • 엄격한 타입 검사 옵션을 모두 활성화하는 옵션이에요!
  • TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있어요.
  • 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정이 되어요.
    • strictNullChecks
      • 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션이에요!
    • strictFunctionTypes
    • strictBindCallApply
    • strictPropertyInitialization
    • noImplicitAny
      • 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any타입을 부여하지 않도록 해요.
      • 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있죠!
    • noImplicitThis
    • alwaysStrict
  • 당연하게도, 해당 옵션은 꼭 true로 설정하시는 것을 권장드려요.

☑️ compilerOptions - sourceMap 옵션

• 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션이에요!
• 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있죠.
• 코드 디버깅에 매우 큰 도움이 되기 때문에 개발 환경에서는 꼭 true로 설정하시는 것을 권장드려요.
  • 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있어요!

☑️ include , exclude 옵션

• tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션이에요!
• “include": ["src/*/"]
  • src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미에요!
• "exclude": ["node_modules", "dist"]
  • node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미에요!

d.ts 파일

@types 라이브러리

• 타입스크립트는 @types 라이브러리를 통해 외부라이브러리에 대한 타입정보를 제공한다

• 즉 javascript 라이브러리를 타입스크립트에서 쓰려면 해당 라이브러리에 대한 .d.ts 파일만 제공하면 된다.

3주차

타입을 왜 제대로 알아야 하는가?

• 오류 방지 및 타입 안정성
• 가독성과 이해하기 좋은 코드가 된다 -> 원활한 협업이 된다.

기본타입 흝어보기

• boolean
  • 3가지 이상일 때, enum 또는 string 사용
• number
• string
• 배열
  • 기본타입에 []가 붙은 형태
• 튜플
  • 여러타입의 원소를 넣고싶을 때
• enum
  • 카테고리화 시킬 많지 않은 수의 데이터
• readonly
  • 클래스나 인터페이스의 속성을 불변으로 하는것
  • const?? 클래스안에 const를 사용할 수 없다.

any, unknown, union

• any
  • 슈퍼타입.. 다된다.
  • 타입스크립트를 쓰는 이유가 사라진다
• unknown
  • 이 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 함.
  • any 보다 조금 안전
  • let a: string
  • let a = unknownValue as String < 와 같이 명시
• union
  • type a = string|number
  • function aa(vaue:a) {} 과 같이 사용한다.

4주차

enum과 literal

• enum은 간단한 상수 값을 그룹화해서 관리를 할 때 적합해요!
  enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER"}
  • number와 string만 가능
• 객체 리터럴
  const obj = { a: [1,2,3], b: 'b', c: 4 }
  • 유연한 구조
  • 어떠한 값도 대입 가능
  • 런타임 에러 방지

☑️ enum을 쓰면 좋은 경우

• enum은 간단한 상수 값을 그룹화해서 관리를 할 때 적합해요!
• 또한, enum은 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건이 있어요.

☑️ 객체 리터럴을 쓰면 좋은 경우

• 객체 리터럴은 멤버의 값이나 데이터 타입을 맘대로 변경할 수 있어요!
• 복잡한 구조와 다양한 데이터 타입을 사용해야 할 때는 객체 리터럴을 사용하세요!