프로그래머스 데브코스: Interface

함수의 타입을 명시해줄때의 예시를 한번보자. (저번 포스팅에서 했었음)

function getInfo(id:number):{
stdId:number;
stdName:string;
age:number;
gender:string;
course: string;  
}
{
  return null
}

이런식으로 함수의 반환내에서 사용하는 타입이 다양하면 이렇게 객체의 형태로 타입을 명시해줄 수 있다.

즉 위코드는 객체를 Return하는 함수이고 Optional 즉, ?:로 해당 데이터 타입을 정의하지 않았기 때문에 stdId, stdName, age, gender, course 까지모든 프로퍼티를 객체의 형태로 리턴해야한다.

이렇게 객체의 형태로 타입을 명시해주는 방법을 더 깔끔하게 도와주는 부분이
Interface이다.

Interface

interface Student{
stdId:number;
stdName:string;
age:number;
gender:string;
course: string;  
  
}

function getInfo(id:number):Student{
  
  return {
    stdId:12,
    stdName:"park",
    age:12,
    gender:"남자",
    course: "타입 
  }
}

즉, 이렇게 객체를 리턴하고 싶을때도 interface 사용이 가능하다.

또 매개변수에도 담을 수 있다.

function setInfo(student: Student): void {
  // 이건 이제 뭔가 데이터를 받아서 set해주는 함수로 컨셉잡음
  console.log(student);
}
setInfo({ stdId: 123123 });

이런식으로 매개변수로 어떤 값을 받아올때 그 값이 만약 객체형태라면?

그대로 Interface로 타입을 지정해줄 수 있다(재사용함 good)

마지막으로 함수도 interface로 정의가 가능하다.

nterface Student {
  stdId: number;
  stdName?: string;
  stdAge?: number;
  gender?: string;
  course?: string;
  completed?: boolean;
  setName?: (name: string) => void;
  getName?: () => string;
}

이런식으로 객체내부에 함수를 interface로 타입을 지정해줄 수 있다.

Class에 Interface 상속(구현)받기

Typescript는 Class에 Interface를 상속받을 수 있다.
이는 클래스가 인터페이스의 형태르를 따르도록 강제하는데 사용할 수 있다.

interface userI{
 id:string;
 pwd:number;
 nickname:string;
 phone:number;
 getUserId:()=>void 
 setUserId:(id:string)=>void 
}

class User implements userI{
 id="Park"; 
 pwd=1212;
 nickname="modric";
 phone=123123;
 getUserId():string{
   return this.id
 }
 setUserId(id:string):void{
   this.id=id
   console.log(this.id)
 }
}

const user = new User()

console.log(user.getUserId())
user.setUserId("JUN")

이런식으로 사용이 가능하다. 이를 tsc를 통해 컴파일하면

var User = /** @class */ (function () {
    function User() {
        this.id = "Park";
        this.pwd = 1212;
        this.nickname = "modric";
        this.phone = 123123;
    }
    User.prototype.getUserId = function () {
        return this.id;
    };
    User.prototype.setUserId = function (id) {
        this.id = id;
        console.log(this.id);
    };
    return User;
}());
var user = new User();
console.log(user.getUserId());
user.setUserId("JUN");

다음과 같이 컴파일된 js코드를 볼 수 있다.

이를 실행해보면

Park과 Jun이 잘 출력된다.

객체리터럴

리터럴은 JavaScript에서 값을 나타냅니다. 이는 변수가 아닌 여러분이 문자 그대로 스크립트에 제공한 고정된 값입니다.
즉
상수는 메모리 공간
리터럴은 메모리 공간 안에 저장되는 값

1. const number =2에서 number는 상수, 2는 리터럴이다.
2. const name="PARK"에서 name은 상수, PARK는 리터럴이다.
3. const obj={name:"park",num:23}에서 obj는 상수, {name~}은 리터럴이다.
4. const arr = []에서 arr은 상수, []는 리터럴이다.

이때 3번에 리터럴이 객체 리터럴

interface Student{
  stdId:string;
  steName:string;
  gender:'male'|'female'
}

리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야한다.
1. 문자열 리터럴

let status: 'success'|'error'
status='success'//유효
status='pending'//에러:'pending'은 허용되지 않음

2. 문자열 리터럴

let isTrue:true;
isTrue=true//유효
isTrue=false//에러

3. 객체 리터럴

let person:{name: 'John',age:30}
person = {name:'John',age:30}//유효
person = {name:'Alice',age:25}//에러

그러니깐 이런식으로 타입스크립트에서는 사용된다.

const user = {
  name:'sangha',
  age:29
}

이러한 Js코드를

const user:{name:string,age:number}={
name:'sangha',
  age:29
}

좀 더 타이트하게 관리한다면

const user:{name:'sangha',age:29}={
name:'sangha',
age:29
}

타입별칭(Alias)

function convertToString(value:string|number):string{
 return String(value) 
}

위 코드에서 convertToString함수에서 value에 있는 타입을 따로 지정해줄수있는데

결국 이는 사용자 지정 타입이 되고(interface도 사용자지정타입) 이를 타입 별칭 또는 Type Alias라고한다.

type strOrNum = string|number;
function convertToString(value:strOrNum):string{
 return String(value) 
}