Enjoy Programming

typescript default type 본문

JavaScript/TypeScript

typescript default type

LEETAEEON 2021. 8. 22. 02:45

오늘부터 타입스크립트 공식문서를 하나씩 정리해본다.

공홈은 뭔가 ui가 나랑 맞지않아서 gitbook으로 읽는다~ 

https://typescript-kr.github.io/pages/basic-types.html

 

TypeScript 한글 문서

TypeScript 한글 번역 문서입니다

typescript-kr.github.io

 

자 오늘 정리할 내용은 기본타입에 대해서 알아보자.

자바스크립트와 거의 유사하다.

먼저

- Boolean -

 let isDone: boolean = false;  뭐 설명할게 없다.

 

- Number -

마찬가지다. 일단 자바스크립트 처럼 모두 부동 소수 값이다. typescropt는 16진수, 10진수 리터럴에 더불어

ECMAScript2015에서 나온 2진수, 8진수 리터럴도 지원한다.

 

- String -

 

역시 자바스크립트의 업그레이드이기에 비슷하다. 그리고 template literal도 역시 사용가능하다.

 

- Array -

배열 타입은 두가지 방법으로 쓸 수 있는데

let list : number[] = [1,2,3];

또는 제네릭 배열타입을 쓰는 것이다.

let list : Array<number> = [1,2,3];

 

- Tuple -

오랜만에 듣는 tuple이다. 기본적으로 자바스크립트는 튜플이 없다. 튜플이란 길이와 타입이 고정된 배열을 의미한다.

파이썬에서는 (1, 2, 3) 이런거다

그럼 타입스크립트로 튜플은 어떻게 만들까?

 

let a : [string, number]; 이렇게 만들어 주면 된다.

 

a는 배열인데 두개의 배열요소만 갖고 그 배열의 첫번째 요소는 string, 두번째 요소는 number! 라고 미리

선언해주는 것이다.

여기에 더해 각각의 요소에 접근할때 타입이 정해져있기에 숫자로 선언된  a[1] 요소에 a[1].substring(2) 이런게 먹히지 않는다.

 

- Enum -

자 등장한 enumerated type이다. enum은 열거형으로 상수들의 집합을 정의할 수 있다.

enum Color {Red, Green, Blue}

let c: Color = color.Green;

기본적으로 enum은 0부터 시작해서 요소들의 번호를 매긴다. 멤버중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있다.

enum Color {Red=1, Green, Blue} 이런식으로 혹은 모든 값을 수동으로 설정할 수 있다.

유용한 점은

let colorName: string = Color[2] 이렇게 해서 해당 번호와 일치하는 이름을 찾아 낼 수 있다.

 

- Any = 

앱을 만들때 알지 못하는 타입을 표현해야 할 수 있다.

이 값들은 사용자로부터 받은 데이터나 서드파티 라이브러리 같은 동적 컨텐츠에서 올 수 있는데

이 경우 타입 검사를 하지 않고 그 값들이 컴파일 시 함께 컴파일되길 원할 때 any타입을 사용 할 수 있다.

void와는 반대되는 개념이라고 보면 될 듯 하다.

이해가 안간다면 직접 코드로 써서 테스트해보면 무슨 얘기인지 이해가 간다.

또한 any타입은 타입의 일부만 알고 전체를 알지 못할 때 유용하다.

예를 들어 다른 여러타입이 섞인 배열을 다룰 수 있다.

let list = any[] = [1, true, "free"]

list[1] = 100; 이런식으로

 

- Void -

C에서 많이 봤던 Void타입~! 어떤 타입도 존재 하지 않는다~ 보통 함수 반환 값이  없을때 많이 쓴다.

 

const App = (): void => console.log();

void는 변수의 타입으로 선언하는 것은 유용하지 않다. 이유는 변수에는 null(--strictNullChecks를 사용하지 않을 때에만 해당)

또는 undefined만 할당할 수 있기 때문이다.

 

- Null and undefined - 

null 과 undefined 둘 다 각각 자신의 타입 이름으로 사용한다. 그 자체로 유용한 경우는 거의 없다.

let a : undefined = undefined;

기본적으로 이 타입들은 다른 모든 타입의 하위 타입이다. 그래서 다른 타입에도 할당 할 수 있다. but!

--strictNullChecks를 사용하면 오직 자신의 타입에만 할당 가능하다. (undefined는 void에 할당 가능하다)

이 경우 string or null or undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefinedㄹ르 사용할 수 있다.

 

- Never - 

never타입은 절대 발생할 수 없는 타입이다.

예로 never는 함수표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.

변수도 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면  never타입을 얻을 수 있다.

never타입은 모든 타입에 할당 가능한 하위타입이다. but 어떤 타입도 never에 할당 할 수 있거나, 하위 타입이 아니다.

심지어 any도 never에 할당할 수 없다.

 

- Object -

objecdt는 원시( number, string, boolean, bigint, symbol, null, undefined)가 아닌 나머지 타입을 의미한다.

 

Objecdt타입을 쓰면 Object.create같은 API가 더 잘 나타난다.

 

- type assertions -

typescript자체 보다 개발자가 값에대해 더 잘 알때 사용한다.

which entity 의 실제 타입이 현재 타입보다 더 구체적일 때 발생한다.

type assertions는 다른 언어의 형변환과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다.

런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용한다.

두가지의 형태가 있는데

1. "angle-bracket" 

let value : any = "this is ";

let strLength: number = (<string>value).length;

 

2. as

let value: any = "this";

let strLength: number = (value as string).length;

어떤 것을 사용해도 무방하나

!!!!! 중요한것은 JSX(REACT) 와 함께 사용할 때는 as 스타일의 단언만이 허용된다! 잘 알아 두자~!

 

또한 중요한 점은 typescript는 var를 사용하지 않는다~!~!

이제 이따 한숨자고 다시 포스팅 하겠다.

'JavaScript > TypeScript' 카테고리의 다른 글

Generic - [작성중]  (0) 2022.05.16
typescript interface  (0) 2021.08.23
event And Typescript  (0) 2021.08.02
React Props and Typescript  (0) 2021.08.01
Typescript and react : STATE  (0) 2021.07.07