[TypeScript] 타입선언

4991 단어 typescripttypescript

⏳ 타입선언

타입스크립트에서는 자바스크립트와 다르게 변수를 선언할 때 타입을 지정해 줄 수 있다.

위와 같이 변수 옆에 : Type 을 통해 해당 변수에 타입을 지정해줄 수 있으며,
' | ' 기호를 통해 해당 변수의 타입을 number 또는 boolean 으로 지정 해줄 수 있습니다.

🔺 Error
위의 test 변수는 number 또는 boolean 타입으로 선언되었습니다, 이 변수에
"안녕하세요" 라는 문자열을 할당할 경우 타입 에러를 발생시킵니다.

🎐 타입 종류

타입 스크립트는 자바스크립트의 타입을 지원하며 몇 개의 타입이 추가로 제공됩니다.
이 글에서는 타입스크립트를 배우면서 새롭게 알게 된 사실만 작성 할 것입니다.
더 많은 종류의 타입은 아래 url 을 참고해주세요
https://typescript-kr.github.io/pages/basic-types.html

문자열 (String)

let text_1: string = 'World';
let text_2: string = `Hello ${text_1}`;
string 타입은 ES6 의 템플릿 문자열도 지원합니다.

배열 (Array)

배열은 두가지 방법으로 타입을 선언 할 수 있습니다.
1. string[] = ['a','b'];
2. Array<string> = ['a','b'];

ex1) string[]
let arr1: string[] = ['Apple', 'banana'] ; 	//문자열만 가지는 배열
let arr2: number[] = [3, 4] ;			//숫자형만 가지는 배열
let arr3: (string | number)[] = [3, 4, "5"];	//문자열과 숫자형을 가지는 배열
let arr4: any[] = [3, 4, "hello", true];	//타입 추측할 수 없을때는 any

ex2) Array<string>
let arr5: Array<string> = ['Apple', 'banana'] ; //문자열만 가지는 배열
let arr6: Array<number> = [3, 4] ;		//숫자형만 가지는 배열
let arr7: Array<string | number> = [3, 4, "5"];	//문자열과 숫자형을 가지는 배열
let arr8: Array<any> = [3, 4, "hello", true];	//타입 추측할 수 없을때는 any

함수 (Function)

파라미터에서 각 변수에 타입을 선언해주며 () 우측에 리턴값의 타입을 선언해준다.
  function hello(text1:string, text2:string): string{
      let text3: string = "";

      text3 = text1 + text2
      return text3;
  }

  hello("hello" ,"world")

return의 타입이 맞지 않거나, hello() 함수에 전달되는 값들이 선언된 타입과 일치 하지 않을 때는 에러를 발생한다.

객체 (Object)

객체의 경우 객체내부에 있는 각각의 속성 모두 개별적으로 타입을 지정해 줄 수 있다.
  let person: {name: string, age:number} = {
      name: 'Taehee',
      age: 25,
  }

튜플 (Tuple)

배열과 유사하지만, 배열의 크기와 순서를 미리 선언하여 사용한다
  let person: [number, string];
  person = [24, 'LEE'];
  person = [24, 'LEE', "test"]; // size Error
  person = ["LEE", 24];   // sequence Error


// 타입지정을 할당값 으로 대신할 수도 있다. 
  let person: [number, "LEE"];
  person = [24, 'LeeTaeHee']; // 선언할 때와 다른값이 들어와 Error


튜플은 정해진 타입과 고정된 길이의 배열이지만, 값을 할당할 때만 해당된다.
push() 또는 splice() 같은 메소드를 통해 값을 핸들링 하는건 막을 수 없다.
    

모든 타입 (Any)

Any는 어떠한 타입을 수용할수 있는 타입이다. 

특정 타입으로 선언 할 수 없는 경우 유용하게 사용할 수 있다.
  let test:any = "Hello";
  test = 3
  test = true
  
  3개 모두 타입 에러를 반환하지 않는다.

빈 타입 (Void)

리턴값이 없는 함수에서는 void를 통해 undefined를 반환한다.
function hello(text1:string, text2:string): void{
    console.log(text1, text2);      // Hi Lee
}

console.log(hello("Hi" ,"Lee")) // undefined

never

never 타입은 발생할 수 없는 타입을 말한다.
function errorMsg(): never {
    throw new Error("err");
  }
console.log(errorMsg()); // Uncaught Error: err

errorMsg 함수는 (null, undefined 를 포함한) 어떤 값도 반환하지 않는다.
이럴 경우에는 never 타입을 사용하면 된다.

좋은 웹페이지 즐겨찾기