Javascript type vs Typescript type

static types : 개발 중간에 타입을 확인(ts)
dynamic types : 런타임 후 타입을 확인(js)

typescript는 기본적으로 javascript의 자료형과 다른 type을 추가적으로 제공한다.

• ecmascript 표준에 따른 기본 자료형 6가지
  - boolean, Number, String, Null, Undefined, Symbol, Array(object형)
• 추가 type
  - Any, Void, Never, Unknown/Enum/Tuple(object 형)
  

Primitive Type

• 실제 값을 저장하는 자료형으로 오브젝트와 레퍼런스 형태가 아니다.
• 자바스크립트 처리 방식 덕분에 primitive type의 내장 함수를 사용 가능하다
• boolean, number, string, symbol, null, undefined
• literal 값으로 primitive 타입의 서브 타입을 나태낼 수 있다.
• 래퍼 객체 형태로 생성 가능 // new Boolean(false); ->object 형
• primitive type은 모두 소문자로 기재!

boolean

let isDone:boolean = false;

// let isNotOk:boolean = new Boolean(true); //error

number

• 모든 숫자는 부동 소수점 값!
• 16진수, 10진수, 2진수 , 8진수 지원
• NaN, 1_000_000 표기 가능

string

• 텍스트 형식 참조/ "", '' 사용
• template string 행에 걸쳐 있거나 표현식을 넣을 수 있는 문자 ${} 형태 사용

symbol

• ecmascript 2015의 symbol
• new Symbol 사용할 수 없다
• Symbol은 함수로 사용해서 symbol 타입을 생성

//primitive 값을 담아서 사용
console.log(Symbol('foo')=== Symbol('foo'));//false

//고유하고 수정불가능한 값으로 만들어준다
//접근 제어용으로 사용
const sym = Symbol();
const obj = {
  [sym]:"value"
};

obj[sym]

null&undefined

• null :무언가 있는데 사용할 준비가 덜 된 상태
  //런타임 후 typeof object

• undefined : 준비가 안 된 상태
  //object에 property가 없을 때도 undefined

• 자체로 그다지 유용하지 않다 둘다 소문자만 존재한다.

• 설정을 하지 않으면 undefined와 null은 다른 모든 타입의 서브타입으로 존재한다. 따라서, 컴파일 옵션에서 --stricNullChecks를 사용하면, null, undefined, void는 자신들에게만 할당할 수 있게 된다

• 이 경우에 할당을 하려면 union type을 이용해야함

let union:string | null = null;
union = 'Mark'

type guard : 코드를 작성할 때 컴파일러가 타입을 올바르게 추론할 수 있도록 에러를 예방하는 방법

object

• 객체,개체, 값을 가진 곳을 가리키는 정보

object literal type :const objc:object = {name:"mark"};

• primitive 가 아닌 것을 나타냄
• 객체 표현 : {},[{}]

Array

• 객체,공통 요소의 모임

let list:(number|string)[] = [1, 2, 3,'4']; //더 많이 사용
let list_1:Array<number> = [1,2,3]

Tuple

let x: [string,number];

x = ['hello', 39] //항상 순서 타입 길이 일치해야함


const person: [string, number] = ['mark', 39];

any

• 어떤 타입이든 상관없이 어떤 것이든 가능 - 정확하게 알고 사용할 것! 타입에러 주의
• 최대한 쓰지 않는 게 핵심, any를 써야하는데 오류를 뱉도록 하는 옵션: nolmplicitAny

function returnAny(message:any):any{
  console.log(message);
}

const any1 = returnAny("아무거나 리턴")

any1.toString();

let looselyTyped: any ={};
//any는 개체를 통해 전파, 타입 안전성을 잃을 수 있다 
const d = looselyTyped.a.b.c.d;

unknown

• 모르는 변수의 타입을 묘사해야할 때.
• 미래 코드를 읽는 사람에게 이 변수가 무엇이든 될 수 있음을 알려주는 타입을 제공하기 위해 unknown타입을 제공
• typescript 3.0 버전부터 지원
• 아무거나 할당할 수 있으나 타입을 확정해주지 않으면 할당하거나 사용할 수 없다.
• 타입 에러를 막기위해 any보다 사용하길 권장!

declare const maybe: unknown;
const aNumber: number = maybe; //error  
//타입 지정
if(maybe === true){
  const aBoolean: boolean = maybe;
  const aString:string = maybe;//error, 여기선 maybe는 boolean 타입!
}

if(typeof maybe === 'string'){
  const aString:string = maybe;
}

좀더 이해가 필요

never

• 모든 타입의 서브 타입으로 모든 타입에 할당할 수 있다.
• never에는 어떤 것도 할당할 수 없다.(any 포함)
• 잘못된 타입을 넣는 실수 방지

function error(message:string): never{
  throw new Error(message);
}

function fail(){
  return error("failed");
}

let a:string = 'hello';

if(typeof a !== 'string'){
  a;//never type
 }

declare const a:string |number;

if(typeof a !== "string"){
  a;//number type
}

좀더 이해가 필요

void

• 어떤 타입도 가지지 않는 상태,소문자

//이 함수의 return 값을 사용하지 않겠다.
function returnVoid(message:string):void{
  console.log(message)

  return undefined;
}
//r은 void type
const r = returnVoid('리턴이 없다...');

좀더 이해가 필요