[Typescript] 초기세팅, 설치 / 기본문법(number, string, tuple, array, enum)

Bewell·2023년 12월 5일
0
post-thumbnail

타입스크립트 세팅

  • 단순한 타입 검사만 하고 싶다면 $ tsc --noEmit
  • $ npx tsc --init을 통해 tsconfig.json 파일 생성

    컴파일 옵션을 설정할 수 있는 다양한 값들이 나온다

    이처럼 모듈시스템도 직접 설정할 수 도 있다





  • ts파일을 만들고 타입추론을 바로 확인할 수 있다

$ npx tsc --noEmit 명령어를 통해서 터미널에서도 타입검사를 할 수 있다




  • $ npx tsc명령어를 통해 ts코드를 js로 변환할 수 있다.


  • 타입스크립트는 자바스크림트의 변수 , 매개변수 , 리턴값에 타입을 정의하는 것
const a = (x, y) => x + y
const a: (x: number, y: number) => number = (x, y) => x + y

//	type으로 타입을 선언하는 방식 = 타입 애일리어스(type alias)
type A = (x: number, y: number) => number
const a: A = (x, y) => x + y

//	interface로 함수 타입 정의
interface A {
  (x: number, y: number): number
}
const a: A = (x, y) => x + y

----

const arr: number[] = [1, 2, 3]
const arr: Array<number> = [1, 2, 3]

//	튜플
const arr: [string, number] = ['abc', 123]

const obj: { name: string, age: number } = { name: 'zzz', age: 99 }






  • 자바스크립트 객체 후미에 as const를 추가해주면서 타입을 강화할 수 있다






const obj = {a: 1, b: 2}
type Key = keyof obj
  • 이렇게 자바스크립트 객체에 keyof를 바로 사용할 경우에는 'obj' refers to a value, but is being used as a type here. Did you mean 'typeof obj'? 경고가 발생한다
  • 이를 해결하기 위해서는 아래와 같이 typeof를 추가하면서 객체의 key타입을 추출할 수 있다
const obj = {a: 1, b: 2}
type Key = keyof typeof obj






  • enum이란 여러값들에 미리 이름을 정하고, 열거할때 쓰는 타입이다
  • Readonly값으로 이미 정의된 enum 속성에 대해 값을 재할당 할 수 없다
enum EDirection {
  Up,	//	0부터 순서대로 할당된다
  Down,
  Left,
  Right,
}

EDirection.Down = 123	//	[오류] 읽기 전용 속성이므로 'Down'에 할당할 수 없습니다.


0개의 댓글