[ 3D Web : Front&Back_Type Script ] Type Script의 개념 및 기초

 

 

 

 

[ 3D Web : Front&Back_Type Script ] Type Script의 개념 및 기초

 

---

 

∇ TypeScript의 개념 및 기초.

목   차

1. TypeScript의 개념과 등장배경
2. TS === "컴파일언어"
3. TypeScript는 JavaScript의 슈퍼셋
4. 타입 : 튜플 & 객체
5. Any타입
6. 함수 타입 지정
7. 유니온 타입 & 인터섹션 타입.

 

 

---

Ⅰ. TypeScript의 개념과 등장배경.

---

◎ JS(JavaScript) 기반에서 고정된 타입( "정적타입" ) 문법을 추가한 컴파일 언어. 

 

 

             ＠ 타입을 자유자재로 바꿀 수 있는 JS에서 타입을 자유자재로 변경하지 못하도록,

                  타입을 고정시킨 언어가 바로 타입스크립트입니다.

                     == TS는 "타입" 즉, 자료형을 "컴파일 시에 결정" 하는 것이 큰 특징입니다.

                           - 변수를 생성할 때마다 매번 타입을 써줘야 하지만, 

                              런타임 환경 이전 단계인  코드 작성 단계에서부터 이미 타입 오류를 잡을 수 있기 때문에

                            오류를 줄일 수 있습니다 !

---

 ※ 왜 JS보다 타입에 더 엄격한 타입스크립트가 등장한 것일까요?

      = > 가장 큰 목적은 "에러 발생률"을 현저히 줄이는 것 입니다.

                           

              ○ JS는 TS와 달리, 타입지정이 동적이기 때문에 매번 타입을 써줄 필요가 없기에 빠른 코드 작성이 가능하지만,

                  빠르게 코딩을 하다보면  타입을 중복으로 연산하는 실수로 인해 오류가 발생 가능합니다.

                  ++ 또한, 타입지정이 자유롭기 때문에 런타임시점까지 타입에 대한 결정을 끌고가는 사태도 발생합니다.

 

        

       ☆ 코드의 안정성 향상.

               - 자바스크립트의 동적 타이핑은 유연하지만, 프로젝트의 규모가 커지면 문제가 될 수 있습니다.

 

            -- >> "TS의 정적 타이핑은 컴파일 시점에 '타입 관련 오류'를 잡아내어 런타임 에러를 크게 줄여줍니다.

                         

           

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(5, "10")); 
// 컴파일 에러: 'string' 타입의 인자는 'number' 타입 매개변수에 할당될 수 없습니다.

        

이 코드는 TypeScript로 작성된 함수이며, 두 개의 숫자를 더하여 결과를 반환하는 함수입니다. 

그러나 함수가 호출될 때 문자열 "10"을 포함한 두 번째 매개변수는 숫자 타입을 요구하는 매개변수에 할당될 수 없기 때문에

 컴파일 에러가 발생합니다. 

이는 TypeScript의 타입 안전성을 보여주는 예시로, 

잘못된 타입의 값이 함수에 전달되는 것을 방지하여 프로그램의 안정성을 높이는 역할을 합니다.

 

---

 

       ☆ 코드의 가독성과 유지보수성 개선.

 

              - "타입 정보"를 명시적으로 제공함으로써, 코드의 의도를 더 명확하게 표현 가능합니다.

                      이는 특히, 대규모 프로젝트나 팀 협업상황에서 매우 유용합니다.

 

---

 

       ☆ '확장성'과 '유지보수성' 개선.

              - 타입스크립트의  Interface, Generic, 열거형 등의 기능은 코드의 구조화와 재사용성을 높여줍니다.                   - > 이것 역시, 프로젝트의 규모가 커질수록 더욱 중요해집니다.

 

interface User {
  id: number;
  name: string;
  email: string;
}

function getUserInfo(user: User): string {
  return `${user.name} (${user.email})`;
}

 

위의 코드는 TypeScript로 작성된 코드로, User라는 인터페이스를 정의하고, getUserInfo라는 함수를 정의하고 있다. 
User 인터페이스는 id, name, email이라는 세 개의 속성을 가지고 있으며, 각각은 number, string, string 타입을 가지고 있다.
getUserInfo 함수는 User 타입의 user 객체를 매개변수로 받아서, 해당 유저의 이름과 이메일을 조합하여 문자열로 반환하는 함수이다. 

---

 

       ☆ 오류 감지 시점 개선.

           - JS에서는 타입 관련 오류가 '런타임 시점'에 발견되는 반면,  타입스크립트는 컴파일 시점에 이를 감지 가능합니다.

                   - > 개발 과정에서 오류를 더 빨리 발견하고 수정할 수 있게 해줍니다.

---

 

       ☆ 대규모 애플리케이션 개발 지원

           - TS의 정적 타이핑은 대규모 애플리케이션 개발에 특히 유용합니다.

                   - > 코드 베이스가 커질수록 타입 시스템의 이점이 더욱 두드러집니다.

 

 

JS vs TS

 

---

 

 

 

Ⅱ.TS === 컴파일언어. 

---

 

 

            - '브라우저' 나 Node.js 환경은 "TS(타입스크립트)"를 직접적으로 동작시킬 수 없습니다.

 

                 == TS는 '타입스크립트 컴파일러'를 통해 JS로 변환(컴파일) 과정을 거친 후에야,

                           브라우저나 Node.js 환경에서 동작 가능합니다.

 

                       - TypeScript의 컴파일은 거의 같은 수준의 추상화를 가진 다른 언어 ( JS )로 변환하기 때문에

                           엄밀히 말하자면, 트랜스파일입니다.

                            *컴파일 ⊃ 트랜스파일  

 

 

 주의! TS 컴파일시 에러가 있으면 컴파일이 안될 것 같지만 문제없이 자바스크립트로 변환이 됩니다.
타입스크립트 에러 타입 검사와 컴파일은 별개로 작동합니다.
물론 변환이 된 js 파일은 제대로 동작이 어렵겠지만요!

---

 

 

Ⅲ. TypeScript는 JavaScript의 슈퍼셋

---

☆ TypeScript는 JavaScript의 모든 기능을 포함하면서, 

      다른 기능까지 포함하도록 향상*확장된 상위개념인 슈퍼셋임으로 완벽하게 호환.

 

 

 

 

 

---

◇ 타입스크립트의 문법.

let isShow:boolean = true;
let number1:number =0.5;
let firstName:string ="coding";
//배열 
//1 번째 방법 
let items :string[] =["apple", "a", "grape"];
//2 번째 방법: 제네릭 
let numberList :Array<number> =[4,7,100];

 

 

 

※ 배열 타입은 기본적으로 '하나의 타입' 만 작성하도록 되어있습니다.

 

 

---

 

 

Ⅳ. Type :  튜플(Tuple)  vs 객체 (Object)

---

 

  ◎ 튜플 타입(Tuple Type)

        :  요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.

 

let user:[string,number,boolean]= ["kimcoding",20,true];

 

 

  ◎ 객체 타입(Object Type)

        :   원시타입이 아닌 타입,  typeof 연산자를 사용했을 때 "Object" 변환하는 모든 타입을 의미합니다.

              

                * 원시타입으로는  [ number,  string, boolean,  undefined, null, symbol ]

 

let obj:object={};

let user:{name:string, age:number}={
	name: "kim",
	age:20
};

 

 

---

Ⅴ. Type :  Any 타입.

---

 

    ◎ any 타입은 변수에 값을 재할당하는 경우,  타입을 명시한 변수와 달리 값을 재할당할 수 있습니다.

 

          - 실제 할당된 값의 타입이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않습니다.

               == 대신, 반환되는 값은 undefined로 나옵니다.

 

let maybe: any =4;

console.log(maybe.length);
//실제 할당된 값 4의 타입(number 타입)이 갖지 않는 length 메서드로 접근해도 에러가 발생하지 않으며 
//undefined로 반환되어 출력됩니다.

let list: any[] = [1,true,"free"];

list[1] = 100;
//any 이므로 다른 타입으로 재할당이 가능합니다.

 

 

 

---

Ⅵ. Type :  함수 타입지정

---

※ 함수를 표현할 때는 매개변수의 타입과 리턴값의 타입을 명시해야 하나,

         리턴 값은 *타입추론을 이용해서 생략 가능합니다.

 

           - 함수에 리턴 값이 없다면, void를 사용해 작성 가능합니다.

 

주의! TS 는 JS 와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 합니다.

 

 

'전달인자'보다 '매개변수'가 많으면 에러가 발생하며, 

 

매개변수를 전달인자보다 적게 선택적으로 받고 싶다면

매개변수의 이름 끝에 물음표(?)를 붙여서 선택적으로 받을 수 있습니다.

 

++ 매개변수에 물음표와 default parameter를 같이 사용할 수 없습니다.

function add(x:number,y :number) :number{
	return x+y;
}
//타입 추론
function add(x:number,y :number){
	return x+y;
}
//void 사용
function print =():void=>{
	console.log("리턴값이 존재하지 않으므로 타입을 void로 지정합니다.");
}

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러가 납니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

let greeting = (firstName: string, lastName: string ="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상 작동. 
greeting('coding');

//정상 작동. 뒤의 인자로 undefined를 보내도 값은 “hello, coding kim”으로 반환
greeting('coding', undefined); //hello, coding kim

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동하지만 lastName의 값을 넘겨주지 않아 undefined로 반환됩니다.
greeting('coding'); //hello, coding undefined 

//정상적으로 작동합니다.
greeting('coding', 'kim');//hello, coding kim

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

 

 

 

---

 

 

Ⅶ. Type :  유니온 타입  & 인터섹션 타입

---

 

☆ 유니온 타입은

| 연산자를 이용하여 자바스크립트의 OR 연산자, 즉 "A타입 이거나 B타입이다."라는 의미의 타입을 표현할 수 있습니다.

 

유의!  유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 타입만 접근 가능합니다.

 

타입스크립트는 공통되고 보장된 프로퍼티만 제공해야하기 때문인데

나머지 프로퍼티에도 접근하고 싶다면 *타입 가드를 사용해야 합니다. 

 

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}
//Developer 와 Person을 유니온타입으로 받는 someone 매개변수
function askSomeone(someone: Developer | Person) {
//함수내에서 Developer 와 Person의 공통 타입인 name 만 접근 가능하여 사용할 수 있습니다.
	console.log(someone.name);
}
//타입가드를 적용한 예제 
//타입 가드(Type Guard)란? TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나입니다. 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 줍니다.
function askSomeone2(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

}

 

 

---

 

★ 인터섹션 타입(Intersection Type )은 & 연산자를 사용하여  자바스크립트의 && 연산자,

즉 "A타입이고 B타입이다."라는 의미입니다.

전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 함으로 모든 프로퍼티에 접근 가능합니다. 

 

 

 

 

 

*컴파일 : 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것. 꼭 고수준의 언어를 저수준언어로 변환하는 것이 컴파일이 아니며 한 언어로 작성된 코드를 다른 언어로 옮기는 일을 통칭합니다. 

* 트랜스파일 : 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다. 트랜스파일 은 컴파일 개념에 포함되는 좁은 개념입니다. 컴파일 ⊃ 트랜스파일  

 

*타입추론: 타입을 지정하지 않아도 TypeScript 컴파일이 스스로 판단하여 타입을 넣어주는 것을 말합니다.