Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS(유데미) TIL 1일차

프로젝트를 진행하며 typescript를 배우기는 했으나 주먹구구식으로 해서 조금 더 이론을 잡아보기로 했다. 해당 강의가 너무 기초적인 것부터 해서 약간 답답해서 앞부분을 빠르게 넘어가겠다.

Section2 : Typestcript 기본 & 기본타입

type

• number : 1, 5.3, -10

• string : 'HI' , "HI", HI

• boolean : true, false

• object : { age: 30 }

• Array : [1,2,3]

• Tuple : [1,2] (길이와 타입이 고정)

• enum : enum {NEW,OLD} (열거형, 레이블)

• any : *

• union

• leternal : 값 자체를 타입으로 사용

• alias
  원시 타입은 모두 소문자
  any을 사용하는 경우 : 어떤 값이나 종류의 데이터가 어디에 저장될지 전혀 알 수 없는 경우를 대비하거나 런타임 검사를 수행하는 경우 특정값에 수행하고자 하는 작업의 범위를 좁힐때

	let number;
    number1 = 5; (X)
    
    let number : number;
    number1 = 5; (O)
    
    let number = 5; (O)

자바스크립트 타입 (예. typeof 'Max' => 'string')과 타입스크립트 타입 (예. const name: string = '...')의 차이
타입스트립트 타입은 컴파일 중에 확인되는 반면, 자바스크립트 타입은 런타임 중에 확인된다.

// object 예제

// error
const person : object = {
  name : 'john',
  age: 25
}
//object에 대한 정보가 없으므로 어떤 타입의 속성도 지원하지 않는다.
console.log(person.name);


// {} : 객체타입 역할
//**객체 타입**을 타입스크립트 표기법으로 표현한 것. 객체를 생성한 것이 아님.
const person : {
  name: string;
  age: number;
} = {
  name : 'john',
  age: 30
}
console.log(person.name);

enum Role{ ADMIN , READ_ONLY, AUTHOR}; // 0,1,2
// enum Role{ ADMIN=5 , READ_ONLY, AUTHOR}; 5,6,7
// enum Role{ ADMIN=5 , READ_ONLY=100, AUTHOR=100};
// enum Role{ ADMIN='ADMIN' , READ_ONLY=100, AUTHOR=100};

const product = {
  id: 'abc1',
  price: 12.99,
  tags: ['great-offer', 'hot-and-new'],
  tupleEX : [2, 'author']
  enumEX : 0;
  details: {
    title: 'Red Carpet',
    description: 'A great carpet - almost brand-new!'
  }
}

//객체타입
{
  id: string;
  price: number;
  tags: string[];
  tupleEX : [number, string] // tuple
  enumEX : Role.ADMIN
  details: {
    title: string;
    description: string;
  }
}

product.role = [ 0, 'admin'] (O)
product.role = [ 0, 'admin', 'user'] (X)

Union ( | )

function combine(input1: number|string, input2: number|string){
	let result;
    if(typeof input1 ==='number' && typeof input2 === 'number'){
    	result = input1 + input2;
    }else{
    	result = input1.toString() + input2.toString();
    }
    return result;
}

const conbinedAges = combine(30,26);
console.log(conbinedAges);

const conbinedNames = combine('anna','max');
console.log(conbinedNames);

leternal

/*
function combine(input1: number|string, input2: number|string, resultConversion: string){
	let result;
    if(typeof input1 ==='number' && typeof input2 === 'number'){
    	result = input1 + input2;
    }else{
    	result = input1.toString() + input2.toString();
    }
  
  	if ( resultConversion === 'as-number')
    	return +result;  
  	else
    	return result.toString();
}


function combine(input1: number|string, input2: number|string, resultConversion: string){
	let result;
    if((typeof input1 ==='number' && typeof input2 === 'number) || resultConversion === 'as-number'){
    	result = +input1 + +input2;
    }else{
    	result = input1.toString() + input2.toString();
    }
}
*/

function combine(input1: number|string, input2: number|string, resultConversion: 'as-number' | 'as-text'){ // **이게 리터널타입!**
	let result;
    if((typeof input1 ==='number' && typeof input2 === 'number) || resultConversion === 'as-number'){
    	result = +input1 + +input2;
    }else{
    	result = input1.toString() + input2.toString();
    }
}

const conbinedAges = combine(30,26,'as-number');
console.log(conbinedAges);

const conbinedStringAges = combine('30','26','as-number');
console.log(conbinedStringAges);

const conbinedNames = combine('anna','max','as-text');
console.log(conbinedNames);

alias

type Conbinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';

function combine(input1: Conbinable, input2: Conbinable, resultConversion: ConversionDescriptor){
    let result;
    if((typeof input1 ==='number' && typeof input2 === 'number) || resultConversion === 'as-number'){
        result = +input1 + +input2;
        }else{
      result = input1.toString() + input2.toString();
    }
  	return result;
}

타입 알리어스 및 객체 타입

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
//또는
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}