[03] Type Script Type

HJ-C·2022년 4월 20일
0

TypeScript

목록 보기
3/9
post-thumbnail


Type Narrowing

  • 타입스크립트 프로그램에서 변수는 덜 정확한 타입에서 더 정확한 타입으로 변할 수 있다. 이 과정을 Type Narrowing으로 타입 에러를 피하기위해 사용

조건문 사용

	function Def(x :number | string){
      if(typeof x === 'number'){
        return x+1
      }
      else if(typeof x === 'string){
      	return x+1
      }
      else{
        return 0
      }
    }
  • typeof(타입가드)뿐만 아니라 in, instanceof 키워드도 사용 가능

Type Narrowing 활용

(1) null & undefined 체크

&& 기호로 비교할 때 자료형을 넣으면 && 사이에서 처음 등장하는 falsy값(null,undefined,NaN)들을 찾고 아니면 마지막 값을 남겨줌

	functiuon User(strs : string | undefined) {
      if ( strs && typeof strs === 'string'){
        console.log(s);
      }
    }
  • if문 조건식 안에 falsy 값이 남으면 if문은 실행되지 않는다
  • if(변수 != null) 조건식을 써도 null,undefined를 필터할 수 있다

(2) in 연산자로 object narrowing

	type Fish = { swim : string };
	type Bird = { fly : string };
	function Zoo(animal : Fish | Bird) {
      if('swim' in animal) {
        return animal.swim
      }
      return animal.fly
    }
  • in 연산자로 키값을 통해 narrowing 함

(3) literal type narrowing

type Car = {
  wheel : '4개',
  color : string
}
type Bike = {
  wheel : '2개',
  color : string
}

function 함수(x : Car | Bike){
  if (x.wheel === '4개'){
    console.log('the car is ' + x.color)
  } else {
    console.log('the bike is ' + x.color)
  }
}

Type Assertion

  • Assertion(가정 설정문)은 프로그램 안에 추가하는 참,거짓을 미리 가정하는 문이다.
    TypeScript에서는 참,거짓 이외의 다른 타입에 대해서도 "미리 가정"한다
  • 개발자가 코드를 작성하는 시점에서, 타입에 대해 100% 확실할 수 있을 때 사용
	function Def(x:number | string){
      return (x as number) +1
    }

Type Aliases

  • 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입변수를 의미한다
  • 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 동일
// string 타입을 사용할 때
	const name : string = 'Choi';

//타입 별칭을 사용할 때 
	type MyName = string;
	const name : MyName = 'Choi';

// object 타입도 저장 가능
	type Person = {
      name : string,
      age : number,
    }
	let student : Person = {name : 'Choi', age:20}

관례적으로 변수의 첫번째 문자는 대문자로 한다.


Readonly

  • readonly 키워드는 속성옆에 사용해 읽기 전용 속성이 되어 속성을 다른 값으로 쓸 수 없다. 다른 값을 설정하려고 시도하면 컴파일 과정에서 오류 메시지 출력
	type Person = {
      readonly name : string,
    }

	let student : Person ={
      name : 'Choi'
    }

student.name = 'Kim' //readonly Error발생

Type 특징

(1) 속성 몇개가 선택사항

  • 속성중 선택해서 사용하고 싶은 경우 새로운 type을 만드는게 아닌 물음표연산자 추가
	type Person = {
      name? : string,
      age : number,
    }
let student : Person = {
  age : 20
}

(2) type 합치기

  • OR 연산자를 통해 Union type 생성 가능
	type Name = string;
	type Age = number;
	type Tot = Name | Age // string | number

(3) type 재정의

  • type 키워드는 재정의가 불가능하다
  • 재정의를 하려면 interface 사용

함수에 Type Alias 지정

  • function 함수 = (파라미터 타입) => 타입
	type Num = (x : number, y : number) => number
	let A : Num = function(x,y){
      return x + y
    }

Methods에 Type Alias 지정

	let Info ={
      name : string,
      age : number,
      PlusCount : ( x :number) => number,
      ChangeName : () = >void
    }

Literal Type

  • TypeScript에는 문자열과 숫자, boolean 세 가지 리터럴 타입이 있는데 이를 사용하면 문자열이나 숫자에 정확한 값을 지정할 수 있다.
  • string,number 이런 것뿐만이 아니라 일반 글자도 타입이 될 수 있다
  • 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입
	//변수 할당
	let kim : '김씨';
	let choi : '최씨';

	// 함수 할당
	function Def(a:'Hi') : 1 | 0{
      return 1
    }
  • const 변수의 업그레이드 버전
  • const는 값을 바꿀수 없는 변수지만 literal type을 이용시 변경 가능
profile
생각을 기록하자

0개의 댓글

관련 채용 정보