본문 바로가기
Frontend/TypeScript(완)

[TS] TS 연습하기1

by VictorMeredith 2023. 4. 12.

TypeScript

//Primitive Variable
const 이름:string = 'Lee';
//Array
let 어레이:string[] = ['어레이1', '어레이2']
//Object
let 오브젝트:{name : string, name2 : number} = {name : 'Lee', name2 : 123};


// 중요한 것은 온 갖 곳에 다 ts 타입질을 안해도 된다.
// 타입스크립트는 대부분 알아서 자동으로 해준다구요.
let 테스트 = '테스트라구';
// 테스트 = 123; 이거 에러난다구요 ts가 자동으로 테스트:string 해주기 때문이다.


// 연습 
let project:{member : string[], days : number, started : boolean} = {
  member : ['kim', 'lee'],
  days : 30,
  started : true
}


// Union Type - Primitive
let 회원:number|string = 'lee';
회원 = 3; // 가능

// Union Type - Array
let 회원들:(number|string)[] = [1,2,3];
회원들.push(3);
회원들.push('가능'); 

// Union Type - Object
let 옵젝:{a : string|number} = {
  a : 3,
}
옵젝['a'] = '가능';


//Unknown : 모든 자료형을 허용해줌
let 이루움:unknown = '123' //any보다는 안전함 (다른 변수에 들어갈 수는 없으므로 오염을 방지함)
이루움 = '가능'; 
// 옵젝 = 이루움 이거 불가능

//Union Type의 연산
let 나이:string|number;
// 나이+1 ; // +1 연산은 숫자 또는 문자에 다 가능하므로 이런건 에러 뿜어준다.


//function1 (Arrow)
const 함수 = (x:number):number=>{ //파라미터 타입선언이 있으면 반드시 파라미터를 넣어야한다.
  return x * 2
} 
//function2 (Declare)
function 함수2(x:number):number{
  return x + 2
}
//function3 (void)
const 보이드 = (x:number):void=>{
  1+1
}
// function4 (optional parameter)
const 함수4 = (x?:number):void =>{ //x가 optional이지만, 들어오지 않으면 undefined 된다. (x:number|undefined) 와 같다.
  2+2
}


//type narrowing
function 함수5(x:number|string):void{ //애매한 타입을 가지고 있는 경우 확정을 해주어야 한다.
  if(typeof x === 'number'){ //타입을 엄격하게 narrowing
    console.log(x+3)
  }
  else{
    console.log(x+3)
  }
}
함수5('가능');
함수5(3);

//type narrowing2
const 내함수 = (x:number|string):void =>{
  let array:number[] = [];
  if(typeof x === 'number'){
    array.push(x)
  }
  else{
    console.log('x가 숫자가 아닌데요')
  }
}


//type assertion : 타입 덮어씌우기
const 내함수2 = (x:number|string):void =>{
  let array:number[] = [];
  array[0] = x as number; // x라는 변수를 number로 덮어씌운다. 
}
// assertion 문법의 용도(아무데나 다 쓰면 안됨) :
// 1. Narrowing 할 때 씀(여러개 Union 중에서 확정을 할 때만 사용해야됨)
// 2. 타입을 변경할 때 쓰면 안된다.
// 3. 어떠한 타입이 들어올 지 너무나 확실할 때 
// 4. 평소에는 많이 쓰지말고 디버깅/비상용에서 사용하자

'Frontend > TypeScript(완)' 카테고리의 다른 글

[TS] TS연습하기4  (0) 2023.04.12
[TS] TS 연습하기3  (0) 2023.04.12
[TS] TS 연습하기2  (0) 2023.04.12
[TS] 타입스크립트 변수 문법 빠르게 정리하기  (0) 2023.04.10
[TS] MERN에서 TS 사용하기  (0) 2023.04.10

댓글