number/string/array
기존 JS에서 사용했던 변수들을 TypeScript로 만들어 보겠습니다.
오른쪽이 js이고 왼쪽이 ts입니다.
ts에서는 기존의 js에서 선언했던 변수에 타입만 명시해주면 됩니다.
만약 string만 들어가게 만들었는데 number타입을 넣으려고 한다면 어떻게 될까요?
오류가발생합니다.
TypeScript를 사용하면 이렇게 특정변수 또는 상수의 타입을 지정할 수 있고
사전에 지정한 타입이 아닌 값이 설정 될 때 바로 에러를 발생시킵니다.
tuple
tuple은 배열과 비슷한 모양입니다. 인덱스별로 서로 다른 타입의 데이터를 넣을 수 있습니다.
타입의 순서를 미리 결정해 놓기 때문에, 올바르지 않는 데이터를 넣으면 오류가 발생합니다.
void/never
- void : 함수에서 아무것도 반환해주지 않을 때 사용
- nenver : 에러를 반환하거나 끝나지 않는 함수의 타입으로 사용
sayHi함수는 return이 없기 때문에 void형태를 return 합니다. 이런경우 void를 명시해줍니다.
never는 에러 또는 끝나지 않는 함수의 타입으로 사용합니다.
enum
- enum : 비슷한 값들끼리 묶어서 숫자 형태로 쓰고 싶을 때 사용
enum 뒤에 데이터셋의 이름을 적고, 중괄호 내에 데이터들(Window, Ios, Android)를 넣습니다.
enum 안의 데이터에 수동으로 값을 주지 않으면 자동으로 0부터 1씩 증가하면서 순서대로 값이 할당됩니다.
수동으로 값을 주게 되면
값을 주지 않는 부분은 상위 아이템에 준 값에서부터 1씩 증가하며 값이 할당됩니다.
오른쪽 js를 보시면 양방향 매핑이 된걸 볼 수 있습니다.
- console.log(Os[10]) -> 'Ios'
- console.log(Os['Ios']) -> 10
또한 enum에는 문자열을 넣을 수도 있습니다.
이경우 양방향 매핑이 아닌 단방향매핑만 됩니다.
eunm타입을 이용해서 enum 안에 있는 데이터를 사용할 수 있도록 변수를 만들어줄 수도 있습니다.
특정값만 입력할 수 있는 것을 강조하고 싶을때, 그 값이 무언가 공통점이 있을 때 enum을 사용할 수 있습니다.
null/undefined
변수 안에 null이나 undefined를 넣어두고 싶다면 아래와 같이 해당하는 타입을 선언해주면 됩니다.
'프론트엔드 > typescript' 카테고리의 다른 글
타입스크립트 - 제네릭 (0) | 2023.10.25 |
---|---|
타입스크립트 - 클래스 (0) | 2023.10.23 |
타입스크립트 - 리터럴타입,유니온/교차타입 (0) | 2023.10.23 |
타입스크립트 - 함수 (0) | 2023.10.23 |
타입스크립트 - 인터페이스(Interface) (1) | 2023.10.22 |