[TIL] 220429 typeScript - 개요 및 타입

koseony·2022년 4월 29일

TIL typescript

TIL(Today I Learn)

목록 보기

9/19

1. TypeScript 개요

'programming Language' 언어이다.
'compiled Language' 이다.

❗컴파일 언어는 런타임에서 에러가 발생하기 전에 컴파일 타임에 미리 에어응 찾아서 고칠 수 있다.

Compiled language	Interpreted language
컴파일 필요 O	컴파일 필요 X
컴파일러 필요 O	컴파일러 필요 X
컴파일하는 시점 O	컴파일하는 시점 X
컴파일된 결과물을 실행	코드자체를 실행
컴파일 결과물을 실행하는 시점	코드를 실행하는 시점 O(런타임)

2. type annotation

타입을 지정해주는걸 type annotation이라고 한다.

let a: number;

a = 'kwak';	//에러

a = 31; //가능

function hello(b: string) {}

hello('kwak');	//가능
hello(31);	//에러

3. TypeScript Types

primitive types

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

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

(ES2015 기준) 6가지

boolean

number

string

symbol(ES2015)

null

undefined

1. blooean

true 값을 가진 Boolean 래퍼 객체가 생성되면서 프리미티브 타입인 isNotOk 변수에 할당하려고 하지만 에러가 발생한다.
따라서 리터럴 값으로 프리미티브 타입을 사용한다.

2. number

javaScript 와 같이, TypeScript 의 모든 숫자는 부동 소수점 값 입니다.

TypeScript는 16진수 및 10진수 리터럴 외에도, ECMAScript 2015에 도입된 2진수 및 8진수를 지원합니다.

NaN

1_000_000과 같은 표기 가능
let decimal: number = 6; // 10진수 리터럴
let hex: number = 0xf00d; // 16진수 리터럴
let binary: number = 0b1010; // 2진수 리터럴
let octal: number = 0o744; // 8 진수 리터럴
let NotANumber: number = NaN;
let underscoreNum: number = 1_000_000;

3. string

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

JavaScript와 마찬가지로, TypeScript는 문자열 데이터를 둘러싸기 위해 큰 따옴표(")나, 작은 따옴표(')를 사용합니다.
let name: string = "kwak";
name = 'lee';

let fullName: string = 'kwak hoseon';
let age: number = 31;
let sentence: string = `Hello, My name is ${ fullName }.

I'll be ${age + 1} years old next month.`;

console.log(sentence);

4. symbol

ECMAScript 2015의 Symbol입니다.

new Symbol로 사용할 수 없습니다.

Symbol을 함수로 사용해서 symbol 타입을 만들어낼 수 있습니다.
console.log(symbol('foo') === symbol('foo'));

5. null & undefined

Undefined & Null

In TypeScript, both undefined and null actually have theri types undefined and null respectively.
TypeScript 에서, undefined와 null은 실제로 각각 undefined 및 null 이라는 타입을 가집니다.

Much like void, they're not extremely useful on their own:
void와 마찬가지로, 그 자체로는 그다지 유용하지 않습니다.

둘 다 소문자만 손재합니다.
// 이 변수들에 할당할 수 있는 것들은 거의 없다.
let u: undefined = undefined;
let n: null = null;

undefined & null art subtypes of all other types.

설정을 하지 않으면 그렇습니다.

number에 null 또는 undefined를 할당할 수 있다는 의미입니다.

하지만, 컴파일 옵션에서 '--strictNullChecks'사용하면, null과 undifined는 void나 자기 자신들에게만 항상할 수 있습니다.
- 이경우, null과 undefined를 할당할 수 있게 하려면, union type을 이용해야 합니다.
let name: string = null
let age: number = undefined;
// strictNullChecks => true
// Type 'null' is not assignable to type 'string'
let name: string = null; (x)
// null => null || void, undefined => undefined || void
// Type 'null' is not assignable to type 'undefined'
let u: undefined = null; // (x)
let v: void = undefined; // (o)
let union: string | null | undefined = 'str';

null in JavaScript

null 이라는 값으로 할당된 것을 null 이라고 합니다.

무언가가 있는데, 사용할 준비가 덜 된 상태.

null 이라는 타입은 null 이라는 값만 가질 수 있습니다.

런타림에서 typeof 연산자를 이용해서 알아내면, object 입니다.
let n: null = null;
console.log(n);	// null
console.log(typeof n);	// object

undefined in JavaScript

값을 할당하지 않은 변수는 undefined라는 값을 가집니다.

무언가가 아예 준비가 안된 상태

object의 property가 없을 때도 undefined입니다.

런타임에서 typeof 연산자를 이용해서 알아내면, undefined입니다.
let u: undefined = undefined;
console.log(u);	// undefined
console.log(typeof u);	// undefined

6. object

// create by object literal
const person1 = {name: 'kwak', age: 31}

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

// create by object.create
const person2 = Object.create({name: 'kwak', age: 31});

object

a type that represents the non-primitive type

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

non-primitive type

not number, string, boolean, biginit, symbol, null, or undefined.

let obj: object = {};
obj = {name: 'kwak'};
obj = [{name: 'kwak'}];
obj = 31; 	//Error
obj = 'kwak';	//Error
obj = true; //Error
obj = 100n; //Error
obj = Symbol(); //Error
obj = null; //Error
obj = undefined; //Error

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