일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- node.js
- GRID
- MongoDB
- Flutter
- frontend
- graphQL
- CLONE
- pug
- 리액트
- CSS
- 자바스크립트
- API
- clonecoding
- ECMAScript
- express
- react
- Session
- DART
- ES6
- JavaScript
- Component
- backend
- TypeScript
- javscript
- form
- NextJs
- nodejs
- HTML
- heroku
- Mongoose
- Today
- Total
Enjoy Programming
typescript default type 본문
오늘부터 타입스크립트 공식문서를 하나씩 정리해본다.
공홈은 뭔가 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 |