이어서 타입스크립트의 타입을 알아보자

참고한 싸이트

• https://medium.com/humanscape-tech/type-vs-interface-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-f36499b0de50
• https://typescript-kr.github.io/

타입을 먹이는 법을 알아보자

기본형태

// 기본적인 string, number ,boolean 표현식
// 타입스크립트는 타입을 변수명:타입=값 으로 선언한다.
let a:string="난스트링"
let b:boolean=false
let c:number=1

// 혹은 그냥 "" 이나 1 이나 false를 줘도 된다 ts에선 타입 추론을 지원하기떄문
// 만약 값을 할당하지 않고 변수를 선언한다면 해당 변수는 any타입이 된다.
let d; // any타입으로 추론
d="s"
d=1


//array
let stringArr:string[]=["1","2"]
let numberArr:number[]=[1,2]
let booleanArr:boolean[]=[true,false,true]

//튜플
let x:[string,number]=["1",1]

//object
const obj:object={}

// any
let e:any =1 or "1" or false or object or array and anything else....

리터럴타입

할당될 값의 값을 정의할 수 있다.

// 스트링 리터럴
const stringLiter:"1"|"2"|"3"="1"
// 넘버 리터럴
const numberLiter:1|2|3=1

if에서 분기처리할시에 자동완성이 지원된다.

타입단언

ts보다 프로그래머가 타입을 더 잘알수 있는 상황이 있다 이럴떄 타입단언을 사용한다.

let anyValue:any ="im any But string"
// anyValue을 string이라고 단언한뒤 string의 length 프로퍼티에 접근
let getNumber:number=(anyValue as string).length

interface

타입스크립트에서 가장 많이 사용되는 기능이다.
오프젝트 형식으로 선언하며 해당 인터페이스의 프로퍼티의 타입을 정해서 사용할 수 있다.

사용 예시

// 함수의 파라미터를 오브젝트로 받는다고 한다면

const pringObject (object:{name:"paramerObject"})=>{
  console.log(object.name)
}
// 위와같이 일일히 파라미터의 타입을 정해주어야하지만 인터페이스를 사용할경우
interface StringObject {
  name:string
}
const pingObject(object:StringObject){
  console.log(object.name)
}
// 위와같이 파라미터의 타입을 interface으로 적용할수있다.
// 뿐만아니라 변수의 타입도 인터페이스로 적용할수있다.
const parameter:StringObject={
  name:"string"
}

선택적 프로퍼티

interface에서 어떤 프로퍼티는 있을수도 없을수도 있다 선택적 프로퍼티라고한다 (optinalProperties)

interface MaybeNotBeThere{
  name:string
  age?:number
}
const personInfo:MaybeNotBeThere={
  name:'yjj'
}
const pingObject(object:MaybeNotBeThere){
  console.log(object.name)
  // 선택적 프로퍼티를 사용할땐 if문안에서 해당 프로퍼티가 존재하는지 여부를 따져봐야한다.
  if(object.age){
    console.log(object.age)
  }
}

읽기 전용 프로퍼티

처음할당된 값을 읽기전용으로 만든다 즉 처음 할당한 이후에 다른값을 할당할수 없다.

interface ReadOnly{
  readonly x : number
  readonly y : number
}
const point:ReadOnly ={
  x:100,
  y:100
}
point.x=200 //에러

인터페이스으로 object or array 만들기 : 인덱서블타입

js의 array인덱싱을 number으로한다 object는 인덱싱을 string으로한다

interface stringIndexing{
 [index:string]:string
 // 인덱스타입은 string, value의 값을 string
}
let imObject:stringIndexing={
  name : "stringindexing",
  age : 10
}
interface numberIndexing{
 	[index:number]:string
}
let imArray:numberIndex=["1","2"]

인터페이스로 함수 정의하기

인터페이스를 통해 함수를 정의할수있다.
(파라미터타입:types):리턴값

interface FuncInterface{
 (param1:string,params2:number):boolean 
}
const func:FuncInterface=(param1,param2)=>{
  if(typeof param1 ==="string){
     
  }
  if(typeof param2==="number"){
    
  }
  return true
}

인터페이스 확장

인터페이스에 다른 인터페이스를 확장할수있다.

interface parentInterface {
 name : string 
}
interface childInterface extends parentInterface {
 age:string 
}
const asd:childInterface={
 name:'확장된 인터페이스'
 age:10
}

하이브리드 인터페이스

밸류와 펑션이 동시에 존재하는 인터페이스

interface hybrid {
  name: string;
  age: number;
  print(): void;
}
const getHybrid: hybrid = {
  age: 1,
  name: "2qweqwe",
  print: () => {
    console.log(getHybrid.age, getHybrid.name);
  },
};
asa.print();

제너릭

제너릭은 타입을 나중에 정의겠다는 의미이다.
그리고 나중에 할당된 타입을 활용한다.

const generic=<T>(arg:T):T=>{
  return arg
}
// 해석 T의 타입으로 파라미터를 받고 그 T타입으로 리턴하겠다.

typeof generic<number>(1) // number

제너릭 인터페이스

인터페이스 안에 제너릭을 사용한 함수를 적용한다.

interface generic {
  gen<T>(arg: T): T;
}
let gen: generic = {
  
  gen:function <T>(arg: T): T {
    console.log(arg);
    return arg;
  },
};
gen.gen<number>(1);

type

interface 와 비슷하게 자주쓰이는 기능이다. 오브잭트형태로 타입을 만들수있고 그자채로 타입이 될수있다.

	type object={
         name:string
      	 age:number
    }
    type notObject="name"|"string"|"qweqwe"

유니온 타입 교차타입

type은 interface와 type의 프로퍼티를 유니온/교차해서 받을수있다.

// 유니온타입
interface a{
  name:string
  age:number
}
interface b{
  name:string
  job:string 
}
type union =a|b
const getUnion:union={
  name:"난나라난나",
  job:"백수",
  age:40  
}

getUnion.job //에러
getUnion.age //에러
getUnion.name //난나라난나
// 유니온타입은 서로 공통된 프로퍼티에만 접근할수있다.
// 다른 프로퍼티에 접근하려면
if("age" in getUnion){
  getUnion.age
}
if("job" in getUnion){
  getUnion.job
}
// 프로퍼티를 체크하면된다.

// 교차타입
type cross=a&b
const getCross:cross={
  name:"난나라난나",
  job:"백수",
  age:40  
}
// 모두 접근이 가능하다.
getCross.age
getCross.job
getCross.name

Interface vs Type

둘의가장 큰 차이점

선언병합
interface는 동일한 이름으로 여러번 선언해도 컴파일 시점에서 합쳐진다 이런 동작을 선언병합이라고한다.

interface a{
  name:string
}
interface a{
  age:number 
}

const declarationMerging:a={
  name:"백수",
  age:40
}

일단 typeScript를 만든 팀의 입장에선 다음과같이 권장하고있다.

TypeScript 팀의 의도
TypeScript 팀은 개방-폐쇄 원칙에 따라 확장에 열려있는 JavaScript 객체의 동작 방식과 비슷하게 연결하도록 Interface를 설계했습니다.
그래서 TypeScript 팀은 가능한 Type Alias보단 Interface를 사용하고, 합 타입 혹은 튜플 타입을 반드시 써야 되는 상황이면 Type Alias를 사용하도록 권장하고 있습니다.

즉 interface 이나 type을 유니온/교차 시켜야한다면 type을 그 외에 상황에선 interface를 사용하라고 한다.