[TypeScript] interface

hojung choi·2021년 8월 29일
0

TypeScript

목록 보기
2/2
post-thumbnail

interface

let user:object;

user = {
    name : 'jjung',
    age:26
}

console.log(user.name);

이렇게 작성하면 ts에서는 user.name에서 오류가 난다!

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    name : string;
    age : number;
    gender? : string; // 있어도 되도 없어도 되는 옵셔널
    readonly birthYear : number; // 읽기전용 속성으로 수정 할 수 없음
    [grade:number] : Score;
}

let user : User = {
    name : 'jjung',
    age:26,
    gender:"fale",
    birthYear : 1996,
    1:'A',
    2:'B',
}

user.gender = 'male'; // 수정또한 가능

이럴떄는 interface를 사용하자!
각각의 설명은 코드에 적어놓았다!
? 옵셔널, readonly, [], score

interface Add {
    (num1:number,num2:number) : number;
    // 매개변수 : 리턴값 or void
}

const add : Add = function (x,y) {
    return x+y;
}
add (10,20);

interface IsAdult {
    (age:number) : boolean;
    // 인터페이스에서 함수의 속성값도 지정이 가능하다.
}

const a :IsAdult = (age) => {
    return age > 19;
}

a(26) // true

이렇게 함수로도 나타낼 수 있다!
()은 매개변수를, :는 리턴값을 나타낸다

함수를 좀 더 자세히 보면...

function addFun (num1:number,num2:number):number {
    return num1+num2
}

function IsAdultFun (age:number):boolean {
    return age > 19
}

function hello(name?:string){
    return `Hello, ${name || 'world'}`
}
function hello2(name = "world"){ // 매개변수에 초기값 할당 , 자동으로 타입은 string이 된다. 매개변수에 초기값이 있으면 자동으로 옵셔널이 된다.
    return `Hello, ${name}`
}
const result = hello();
// 매개변수를 옵셔널로 지정을 하여 name이 있으면 name을 출력하고,
// 없으면 world를 출력합니다. (선택적 매개변수)
// 매개변수가 두개 일 경우 반드시 선택적 매개변수는 뒤에 위치하고 있어야한다.

function addFun2 (...nums:number[]) { // 입력하는 모든 것을 nums에 담는다. 스프레드 연산자는 반드시 배열로 할당을 해야한다.
    return nums.reduce((result,num) => result + num,0);
}

addFun2(1,3,4);
// 스프레드 연산자를 통해 매개변수를 배열로 만들어줌

함수를 저장할 변수의 타입은 화살표 기호를 이용 할 수 있다.
함수를 구현하는 코드에서는 따로 타입을 정의하지 않아도 된다.

const getText: (name:string, age:number) => string = function(name,age) {
 return '123';
}
profile
🧚🏻‍♀️ Front-End Developer

0개의 댓글