8/2 til 타입스크립트강의

이승준·2023년 8월 4일
0

1주차

자바스크립트의 단점

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

타입스크립트

  • 컴파일시간에 변수에 타입을 체크합니다
    • vscode에서 바로 오류를 알려줌
    • 실행시키지 않아도 빨간줄..
  • 자바스크립트는 생성자클래서의 변수를 밖에서도 접근가능하다
  • 타입스크립트는 private, public 접근가능
    • 접근하고싶으면 getter 함수를 따로 작성
  • 타입스크립트는 정적언어 즉, 컴파일하여 기계어로 변환해야한다
  • 자바스크립트는 동적언어 브라우저에서 해석, 실행한다

타입스크립트 주요 명령어

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

☑️ 옵션 매뉴얼

☑️ 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은 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건이 있어요.

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

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

0개의 댓글