TypeScript 기본 문법

• 타입스크립트의 기본 타입
  Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

변수에 타입 지정

const name:string = 'Nami';

변수명 바로 옆에 콜른으로 타입명을 작성함으로써 해당 변수의 타입을 지정할 수 있다

함수에 타입 지정

const Add(a:number, b:number): number {
    return a+b;
}

함수명 바로 옆 괄호 내부에는 파라미터의 타입을 지정하고, 괄호가 끝난 다음에는 return값의 타입을 지정할 수 있다.

타입은 이렇게 바로 옆에 하나씩 지정하거나, 타입이나 인터페이스로 선언하고 해당 타입이나 인터페이스의 변수를 작성해줄 수 있다.

interface User {
    age: number;
    name: string;
}

let person: User = {
    age: 30, name: 'Jami'
}

function getUser(user:User) {
    console.log(user);
}

인터페이스를 활용한 배열의 인덱싱 타입정의

interface NameBookType {
    [index:number]: string;
}

let names: NameBookType = ['a', 'b', 'c'];
names[0] = 10 // Err, 값자리에는 문자가 들어가기로 정의해뒀기 때문에

딕셔너리 타입정의

interface NameBookDictionary {
    [key: string] : string;
}

let UserBook:NameBookDictionary = {
    'Jake': 'highschool friend',
    'Kite': 'coworker',
    'Hied': 'middleschool',
}

인터페이스 확장

interface NameBookDictionary {
    [key: string] : string;
}
interface UnCompanyBook extends NameBookDictionary {
    company: string;
}

새로 작성하는 타입 extends 기존의 타입 {}

오퍼레이터 (연산자)

| 혹은 & 을 사용해 타입의 or 연산자(:합집합)나, and 연산자(:교집합)으로 사용할 수 있다.

function askUser(someone: 고객 | 잠재적고객) {
   console.log(someone);
}

function askRecentUser(someone: 이용객 & 최근이용객) {  
 console.log(someone);  
}

 

헷갈리던 용어

타입추론

: 타입스크립트가 코드를 해석하는 과정, 변수의 타입 정의없이 값을 선언해 사용하다, 재할당하거나, 인자로 넘기거나할 때 타입이 달라질 경우 에러를 반환한다.

• 인터페이스와 제네릭을 이용한 타입 추론 방식

interface Dropdown{  
 value: T,  
 text: 'String'  
}

var items: Dropdown {  
 value: true,  
 text: 'aa'  
}

타입 단언

: 타입 단언이란 타입스크립트가 해석하는 것보다 더 확실한 목적을 가지고 개발자가 직접 타입을 지정하는 것이다. 타입 단언은 타입스크립트 컴파일러보다 개발자가 더 해당 타입을 잘 알고 있을 때 사용해야 합니다.

타입 단언을 통해 null을 대비한 분기문을 작성하지 않아도 된다.

//타입추론시 HTMLDivElementㅣnull로 반환  
var div = document.querySelector('div') as HTMLDivElement;  
div.innerText;

타입 호환

: 특정 타입이 다른 타입에 잘 호환되는 지를 의미

• 구조적 타이핑 : 코드 구조 관점에서 타입이 서로 호환되는 지를 판단하는 것으로, 구조적으로 더 큰 타입(타입 속성 개수가 더 많은!)은 작은 타입을 호환할 수 없다.

  interface Developer {
   name: string;
   age: string;
  }
  interface Person {
   name: string;
  }
  
  var developer: Developer;
  var person: Person;
  
  developer = person; //Error
  person = developer;

• type vs interface
  타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다. 따라서, 가능한한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다.
  • 타입에서도 확장이 가능해졌고, 요즘에는 타입 기능이 추가가 되었기 때문에..! (업데이트 필요)
  • https://blog.logrocket.com/types-vs-interfaces-typescript/

출처 : https://www.samsungsds.com/kr/insights/typescript.html