TypeScript - Basic Syntax(기본 문법)

* 이 글은 제로초님의 타입스크립트 강의를 참고하였습니다. 

 

 타입스크립트에 대한 모든 정보는 공식문서를 참고하면 되지만, 이렇게 따로 정리하는 이유는 공식문서에 쓰여져 있는 모든 문법들이 매  사용되는 것이 아니라는 점과 그 중에서도 자주 쓰이고, 중요하게 생각되는 문법들을 따로 정리할 필요가 있다고 생각되었기 때문이다.

 

그렇기 때문에 타입스크립트의 대한 자세한 정보를 알고 싶다면, 공식문서를 참고하는 것이 더 좋은 방법이라 생각이 된다. 아래 주소는 타입스크립트의 공식 문서 사이트이다. 

 

https://www.typescriptlang.org/docs/home.html

Documentation · TypeScript

 

1. Basic shape

- 자바스크립트의 원시 데이터 타입은 Boolean, String, Number, Null, Undefined, Symbol, 이렇게 총 6개이다. 

- 변수의 이름 : 변수의 데이터 타입을 써주는 것이 보통의 원칙이다. 

- 데이터 타입을 써 줄때는 대문자가 아닌 소문자로 써야한다. * 매우 중요 

 

2. Array

- 배열은 2가지로 변수의 데이터 타입을 써줄 수 있다. 

- Tuple이라는 걸 사용해서 배열 내에 개수와 데이터 타입을 엄격하게 정해줄 수 있다. 

- 원하는 데이터를 변수의 데이터 타입에 써주면 원하는 데이터만을 넣어줄 수 있도록 정해줄 수 있다. 

 

3. 상수 

- const를 써서 객체를 선언하더라도 객체 내부에 변수를 이용해 내부 값을 바꿀 수 있는 특성을 지니고 있기 때문에, 객체 내의 내부 값을 바꾸지 못하도록 상수를 선언해 주는 방식은 배열이나 객체에서 유용하게 쓰일 수 있다. 

 

4. 객체

- 1번처럼은 보통 쓰이지 않고, 2번 or 3번처럼 객체를 선언하는 방법이 많이 쓰인다.

- 변수 뒤 ?를 쓰는 것은 데이터가 있을지 없을지 확실하지 않는 경우 또는 나중에 데이터가 들어올지 아닐지 애매모호한 경우에 쓰일 수 있다. 

 

5. Enum 

- TS 코드 -

- JS로 컴파일된 코드 -

- Red = 0, Green = 1, Blue = 2 이다. 

- Color[0] === 'Red' 이다. 

- 더 보충할 예정이다.

 

6. 함수 

- 기본 함수를 타입스크립트를 사용하였을 때는 아래와 같다. 

   function 함수이름(함수인자:함수인자타입): 리턴타입 {}

- 리턴 값의 타입을 | 을 이용하여 여러 타입의 데이터를 반환할 수 있다.

- 익명함수, 화살표 함수도 기본 함수와 같은 방식으로 처리한다. 

- 고차 함수가 되었을 때는 조금 더 복잡해 진다. 방식은 아래와 같다. 

function 함수이름(함수인자:함수인자타입): (리턴데이터:리턴데이터타입) => 리턴데이터타입 { 

return (리턴데이터:리턴데이터타입) => {
   return리턴 데이터
}

 

7. any

- any는 기존의 자바스크립트로 코딩하는 방식과 같다고 생각하면 된다. 

 

8. 타입을 강제로 바꾸는 법 +Tip

- 타입을 강제로 바꿀 일은 거의 없지만, 대부분 남이 쓴 라이브러리를 가져와 사용할 때 실수로 잘못 정의된 타입을 바꿔야하는 경우 사용된다. 

- 보통은 'unknown as 바꾸고 싶은 타입' 방식으로 사용된다. 

- 만약 바꾸고 싶은 타입이 상속관계라면 'unknown'을 기입하지 않아도 된다. 

---

< 참고자료 >

 

[강의] 웹 게임을 만들며 배우는 TypeScript  #제로초

https://www.typescriptlang.org/docs/home.html

 

<TypeScript> chapter 1, Basic syntax end

 

---