타입스크립트 타입 1 [패스트캠퍼스 챌린지 14일차]

First Type Annotation

JS와 차별되는 TS가 가진 고유의 기능

type이라는 요소가 코드 상에 드러나는 방식

Type Annotation

타입을 지정해주는 것
선언한 타입에 맞지 않는 값을 할당하면 에러 발생(빨간 줄은 항상 확인)

변수명 : 타입

→이렇게 명시하는 것으로 타입을 선언할 수 있다

let a: string;

let b: number = 33;

// b는 인자. 함수의 매개변수
// 매개변수로 넘버만 들어올 수 있다고 선언
function hello(b: number) {}

TypeScript Types vs JavaScript Types

차이점

TS

Static Types

set during development

JS

Dynamic Types

resolved at runtime

---

For programs to be useful, we need to be able to work with some of the simplest units of data : numbers, strings, structures, boolean values...

In TS, we support the same types as you would expect in JS,
with an extra enumeration type thrown in to help things along
(TS에선 추가적으로 열거타입이 제공됨)

---

TS에서 프로그램 작성을 위해 기본 제공하는 데이터 타입

사용자가 만든 타입은 결국 이 기본 자료형들로 쪼개짐

JS 기본 자료형 포함 (superset)

기본 자료형 6가지

(ECMAScript 표준)

boolean

number

string

null

undefined

symbol

array : object 형 (기본 자료형 x)

추가 제공 타입

(TypeScript)

any

void

never

unknown

enum

tuple : object 형

Primative Types

오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형

Primative 형의 내장 함수를 사용 가능한 것은 자바스크립트 처리 방식 덕분

6가지( ES2015 기준)

boolean

number

string

symbol (ES2015)

null

undefined

---

Literal 값으로 Primitive 타입의 서브 타입을 나타낼 수 있다

true;
'hello';
3.14;
null;
undefined;

또는 래퍼 객체로 만들 수 있다 (primitive type 아니라 object임)

→TS에서는 이렇게 사용하는 걸 권장하지 않음

new Boolean(false); 
// type of new Boolean(false) : 'object'

new String('world');
// typeof new String('world') : 'object'

new Number(42); // typeof new Number(42) : 'object'

Type Casing

TS에서 the core primitive types은 모두 소문자 lowercase

• It can be tempting to think that the types of Number, String, Boolean, Symbol, or Object are the same as the lowercase versions recommended above
• These types do not refer to the language primitives however, and almost never should be used as a type
  → 저 밑줄 친 녀석들은 language primitives를 나타내지 않으며 타입으로 사용해서는 안됨
• Instead, use the types number, string, boolean, object and symbol → 소문자로 사용하자 이거다

boolean

1. 기본

let isDone: boolean = false;
isDone = true;
console.log(typeof isDone); //boolean

1. 기본

let isOk: Boolean = true;

1. 빨간 줄 뜸

   보통 new Boolean(true); 이런 코드 사용하지 않고

   true;
   이렇게 직접 리터럴 값으로 primitive 타입을 사용하는 게 일반적인 방식

let isNotOk: boolean = new Boolean(true);
/* 
true값을 가진 불리언 래퍼 객체가 생성되면서 
primitive 타입인 isNotOk 변수에 할당하려고 하는데
    에러!
    'Boolean' 형식은 'boolean' 형식에 할당할 수 없습니다.
  boolean'은(는) 기본 개체이지만 'Boolean'은(는) 래퍼 개체입니다. 
  가능한 경우 'boolean'을(를) 사용하세요.ts(2322)
*/

number

JS와 같이 TS의 모든 숫자는 부동 소수점 값

TS는 16진수, 10진수 리터럴 외에도,
ES2015에 도입된 2진수 및 8진수를 지원

NaN (얘도 일종의 숫자)

1_000_000 같은 표기 가능

//10진수 리터럴
let decimal: number = 6;
//16진수 리터럴
let hex: number = 0xf00d;
//2진수 리터럴
let binary: number = 0b1010;
//8진수 리터럴
let octal: number = 0o744;

let notANumber: number = NaN;

let underscore: number = 1_000_000;

string

다른 언어에서와 마찬가지로 텍스트 형식을 참조하기 위해 string 형식을 사용

JS처럼 TS는
문자열 데이터를 둘러싸기 위해 큰 따옴표나 작은 따옴표를 사용 " " , ' '

let name: string = "mark";

name = 'anna';

Template String ES6

행에 걸쳐 있거나 표현식을 넣을 수 있는 문자열

이 문자열은 backtick(backquote) 기호에 둘러쌓여 있음

포함된 표현식은 ${expr}과 같은 형태로 사용

let fullName: string = `Bob Bobbington`;
let age: number = 38;

let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;

Template String을 사용하지 않는 경우

let secondSentence: string =
  "Hello, my name is" +
  fullName +
  ".\n\n" + //개행
  "I'll be" +
  (age + 1) + //JS표현식
  " years old next month.";

symbol

ES2015

new Symbol로 사용할 수 없음

Symbol을 함수로 사용해서 symbol 타입을 만들어낼 수 있음

함수로 사용할 때는 대문자, 타입으로 사용할 때는 소문자

console.log(Symbol('foo') === Symbol('foo'));
// false 
// 같은 함수 같은 값의 인자를 넣었지만 이 둘은 다른 심볼임

primitive type의 값을 담아서 사용

고유하고 수정 불가능한 값으로 만들어줌

그래서 주로 접근을 제어하는 데 쓰는 경우가 많았음

let sym = Symbol();

let obj = {
    [sym] : "value"
};
console.log(obj[sym]); // "value"

---

심볼에서 무너짐
저거 자바스크립트 공부할 때 안 배웠나?

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online