TypeScript Basic Types 정리

01.Boolean

let isDone: boolean = false;
isDone = true;

console.log(typeof isDone); // boolean

// 아래와 같이 리터럴 방식으로 직접 primitive타입을 사용하는 것이 일반적.
let isOk: Boolean = true;
console.log(typeof isOk); // boolean

// 잘못된 사례
let isNotOk: Boolean = new Boolean(true);
console.log(typeof isNotOk); // boolean

02.Number

• JavaScript와 같이, TypeScript의 모든 숫자는 부동 소수점 값 입니다.
• TypeScript는 2진수, 8진수, 10진수, 16진수 모두 지원합니다.
• NaN 사용 가능 / Not-A-Number(숫자가 아님)
• 1_000_000과 같은 표기 가능

// 10 진수 리터럴
let decimal: number = 6; 
// 16진수 리터럴
let hex: number = 0xf00d; 
// 2진수 리터럴
let binary: number = 0b1010; 
// 8진수 리터럴
let octal: number = 0o744; 
// NaN
let notANumber: number = NaN;
// underscore를 활용해서 백만 표기 가능
let underscorNum: number = 1_000_000;

03.String

• javaScript와 마찬가지로 TypeScript는 문자열 데이터를 둘러싸기 위해 큰 따음표("")나, 작은 따음표('')를 사용합니다.

let name: string = "mark";
name = 'anna';

Tempalte String

• 행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열
• 이 문자열은 backtic(=backquote) 기호에 둘러쌓여 있습니다.
• 포함된 표현식은 '${expr}' 와 같은 형태로 사용합니다.

• javascript

let fullName = "Mark Lee";
let age = 39;
let sentence = "Hello, My name is" + fullName +

"I'll be" + (age +1) + "years old next month.";
console.log(sentence);

• typescript

let fullName: string = "Mark Lee";
let age: number = 39;
let sentence: string = `Hello, My name is ${fullName}

I'll be ${age +1} years old next month.`;
console.log(sentence);

---

04.Symbol

• new Symbol로 사용 불가능 합니다.
• Symbol을 함수로 사용해서 symbol 타입을 만들 수 있습니다.
• 고유하고 수정 불가능한 값으로 만들어 준다.
• 주로 접근을 제어하는데 쓰는 경우가 많다. (접근을 막거나 허용할 때 많이 쓴다.)
• 소문자로 시작하는 symbol 타입을 지정할 수 있다.
• 함수로 사용할 때 대문자로 사용
• 타입으로 사용할 때는 소문자로 사용

// Symbol을 사용하려면 tsconfig.json에서 lib 설정.
"lib": ["ES2015", "DOM"],

console.log(Symbol('foo') === Symbol('foo')); // false

// 함수로 사용할 때는 대문자 Symbol
const sym = Symbol();

const obj = {
  // 타입으로 사용할 때는 소문자 symbol
 [sym]: "value",
};

obj[sym]; // obj["sym"]

05.Null & Undefined

• typescript에서 undefined와 null은 실제로 각각 undefined 및 null 이라는 타입을 가집니다.
• void와 마찬가지로 그 자체로는 그다지 유용하지 않습니다.
• 둘다 소문자만 존재합니다.

// 이 변수들에 해당할 수 있는 것들은 거의 없다
let u: undefined = undefined;
let n: null = null;

• null또는 undefined를 모두 할당 할려면 union type을 사용해야 합니다.

// union 문법 (String 또는 null의 데이터 타입을 모두 허용함)
let union: string | null = null;
union = "Mark";

JavaScript에서의 null

• null이라는 값으로 할당된 것을 null이라고 한다.
• 무언가가 있는데 사용할 준비가 덜 된 상태
• null 이라는 타입은 null 이라는 값만 가질 수 있다.
• 런타임에서 typeof 연산자를 이용하면 object 타입 입니다.

let n: null = null;
console.log(n) // null
// javascript
console.log(typeof n) // object 
// typescript
console.log(typeof n) // null 

JavaScript에서의 undefined

• 값을 할당하지 않은 변수는 undefined라는 값을 가진다.
• 무언가가 아예 준비가 안된 상태
• 런타임에서 typeof 연산자를 이용해서 알아내면 undefined 입니다.

let u: undefined = undefined;

console.log(u); // undefined
console.log(typeof u); // undefined

06.Object

• primitive type이 아닌 것을 나타내고 싶을 때 사용하는 타입

primitive type

• number, string, boolean, bigint, symbol, null, undefined

// create by object literal
const person1 = {name: 'Mark', age: 39};

// person1 is not "object" type.
// person1 is "{name: string, age: number}" type.

// create by Object.create
const person2 = Object.create({name: 'Mark', age: 39});

let obj: object = {};
obj = { name: "Mark"} ;
obj = [ { name: "Mark"} ];
obj = 39; // Error
obj = "Mark"; // Error
obj = true; // Error
obj = 100n; // Error
obj = Symbol(); // Error
obj = null; // Error
obj = undefined; // Error

primitive 타입을 사용하지 못하도록 하는 제약조건

declare function create(o:object | null): void;

create({ prop: 0 });
create(null);
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

// Object.create
Object.create(0); // Error

07.Array

• 원래 JS에서 array는 객체입니다.
• 항상 공통요소인 item들의 모임
• 사용방법
• Array<타입>
• 타입[]

// type annotation
// 배열 표현방법에 집중

// 1. 권장
let list: number[] = [1, 2, 3];

// 2.
let list2: Array<number> = [4, 5, 6];
// 요소들을 공통의 타입으로 묶을 수 있어야 array라 표현하는 것이 좋다.

// 배열의 타입이 다를 경우 union 사용
let list3: (number | string)[] = [ 1, 2, 3, "4"];

08.Tuple

• 항상 item의 순서와 타입이 일치 해야하며 길이는 고정적이다.

// 앞 뒤로 다른 타입을 대괄호에 넣어줌.
let x: [string, number];

// 순서, 타입, 길이가 처음 설정한 대로 작성해야함.
x = ["hello", 39];
// x = [10, "hello"]; // Error

// 길이 : 2(length) 이상은 값이 들어갈 수 없도록 undefined로 지정됨.
// x[2] = "world"; // index length Error

const person: [string, number] = ["Mark", 39]

const [first, second] = person; // 분해 할당
// first = string, second = number
// const [first, second, third] = person; // 길이 오류

09.Any

• 모든 데이터 타입을 수용
• 어떤 타입이어도 상관없는 타입이다.
• 최대한 사용하지 않는게 권장사항이다.
• 이유는 컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문이다.
• 그래서 컴파일 옵션 중에는 any를 써야하는데 쓰지 않으면 오류를 뱉도록 하는 옵션도 있다.

nolmplicitAny

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

function returnAny2(message: string): any { // type guide (string)
console.log(message);
}

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

any1.toString();

let looselyTyped: any = {};

// any는 계속해서 개체를 통해 전파된다.
// 타입 안정성을 잃는 결과를 가져온다.
const d = looselyTyped.a.b.c.d;

function leakingAny(obj: any) {
const a = obj.num; // any
const b = a + 1; // any
return b; // any
}
const c = leakingAny({num: 0});

// 누수 방지
function leakingAny2(obj: any) {
const a: number = obj.num; // number
const b = a + 1; // number
return b; // number
}
const c2 = leakingAny2({num: 0});

// c.indexOf("0");

10.Unknown

• 응용 프로그램 작성 시 모르는 변수의 타입을 묘사해야 하는 경우 (타입을 지정하기 애매할때 사용한다.)
• any와 짝으로 any보다 Type-safe한 타입
• any와 같이 아무거나 할당할 수 있다.

declare const maybe: unknown;

const aNumber: number = maybe; //Type 'unknown' is not assignable to type 'number'.

// 타입가드
if(maybe === true) {
  const aBoolean: boolean = maybe; // boolean(true) 타입
  // const aString: string = maybe; // Error => boolean
}

// typeof 타입가드
if(typeof maybe === 'string') {
const aString: string = maybe;
// const aBoolean: boolean = maybe; // Error => string
// unknown타입이라서 뭔지 잘 모르겠으니까 너가 타입을 정확히 지정해줘 라고 말하는것과 같다.
}

• unknown은 무조건 타입을 좁혀서 사용해야 하는 의무가 있는 반면 any는 타입을 좁혀서 사용하지 않아도 되서 자유롭다는 차이점이 있다.
• 그래서 any보다는 unknown을 사용하는것이 좀 더 안전하게 코딩을 할 수 있는 방법이다.

11.Never

• never 타입은 모든 타입의 subtype이며 모든 타입에 할당 할 수 있다.
• 하지만 never에는 그 어떤 것도 할당 할 수 없다.
• any 조차도 never에게 할당 할 수 없다.
• 잘못된 타이블 넣는 실수를 막고자 할 때 사용하기도 한다.

function error(message: string): never {
	throw new Error(message); // hrow를 사용하면 더이상 진행 되지 않는다.
}

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

function infiniteLoop(): never {
  // 무한루프이면 넘어가지 않기 때문에 never 사용
	while(true) { }
}

declare const a: string | number;

if(typeof a != "string") {
  	// a가 string이 아닌경우에는 아무것도 할당하지 못한상태 => never
	// string | number일 때는 string이 아니라 number만 남게되어 number로 할당.
	a;
}

// 조건부 타입 generic
// string 이면 T, 아니면 never
type Indexable<T> = T extends string ? T & {[index: string]: any} : never;

type Objectindexable = Indexable<{}>

12.Void

• 어떤 타입도 가지지 않는 빈 상태.
• 값은 없고 타입만 존재. 소문자로 사용.
• 일반적으로 변수에 어노테이션하는 것이 아니라 값을 가지지 않는 undefined를 반환할때 return 타입으로 사용.
• undefined가 있기 때문에 TS에서는 많이 사용되지는 않음.

// void
// void라는 타입으로 추론이 됨.
function returnVoid(message: string) {
console.log(message);
return ; // 또는 return undefined;
}
const r = returnVoid('리턴이 없다.'); // r의 타입은 void
// 정상적인 사용방법, 아무것도 타입을 할당하지 않겠다는 의미.
returnVoid('리턴이 없다.');
// 리턴부분에 달아서 아무것도 하지 않겠다고 명시적으로 표현할 때 사용