Static typing(정적 타이핑)

HYUK·2023년 3월 14일

typescript

목록 보기

3/6

1. Static typing이란?

타입을 선언하고 선언된 타입의 값만이 할당될 수 있다.
static typing에는 타입추론(type Inference), 타입명시(Type Annotations) 이렇게 2가지가 있다.

1-1. 타입 추론 (Type Inference)이란?

타입스크립트에서는 타입표기가 없는경우 타입 정보를 제공하기위해서 타입을 추론하게 되는데 아래 예시 코드에서 보면

let user = {
  name: 'code kim',
  course : 'typescript'
  score : 90
  code: function(){
    console.log('good');
  }
}

user.name = 10; 
// type '10' in not assignable to type 'string'	 이라는 오류가 나온다.

function score(point){
  return 100 - point;
}
// 여기서는 return에서 100-point 부분에서 타입이 number로 추론되고 
//있기때문에 파라미터 부분에서 에러가 발생하게 된다.

이렇게 타입스크립트에서는 타입 표기가 없는 경우 코드를 읽고 분석하여 타입을 유추할 수 있다.

1-2. 타입명시(Type Annotations)

//app.ts

let userId : number = 1;
//userId = hello -> 에러발생
let userName : string = 'code kim';
let age : number = 30;
let gender : string = 'male';
let courseCompleted : boolean = true;

//여기서 만약 userId = hello로 입력하게되면 
//userId 변수는 number타입으로 명시되어있기 때문에 에러가 발생된다.

---------------------------------------------------------

//app.js
  
var userId = 1;
var userName = 'code kim';
var age = 30;
var gender = 'male';
var courseCompleted = true;

app.ts 파일의 형태처럼 변수명 앞에 직접 타입을 명시해서 사용을 하는 방법을 타입명시라고 한다.

위의 app.ts를 반환하는 함수를 작성하게되면 아래처럼 작성할 수 있다.

function getUserDetail(userId:number):{
  userId : number;
  userName : string;
  age : number;
  gender : string;
  courseCompleted : boolean;
  // 반환되는 객체의 구조를 타입으로 지정
}{
	return null;
}

타입이 명시된 함수는 반드시 값이 return 되야한다.

1-2-1 Interface

위의 타입명시 부분에서 입력한 코드를 조금더 간결하고 가독성있게 작성하기 위해서 Interface라는 방법이 있는데 아래 예시 코드를 통해서 보도록 하겠다.

let userId : number = 1;
let userName : string = 'code kim';
let age : number = 30;
let gender : string = 'male';
let courseCompleted : boolean = true;

interface UserInfo{
  userId : number;
  userName : string;
  age : number;
  gender : string;
  courseCompleted : boolean;
}

function getUserDetail(userId: number): UserInfo {
  {
    return {
      userId: 3,
      userName: "code lee",
      age: 27,
      gender: "female",
      courseCompleted: true,
    };
  }
}

interface의 이름은 대문자로 시작하며 interface는 타입으로서 사용가능하다. interface를 타입으로 가지는 값은 interface의 구조를 값으로 가지도록 강제되는데 이뜻은 위 코드 내용으로 설명하게되면 getUserDetail의 반환값은 UserInfo의 정의된 프로퍼티를 가져야한다는 뜻이다.

1-2-2 선택적 프로퍼티(Optional Properties)

위에 설명처럼 만약 여기서 반환되는 프로퍼티중 gender 부분을 지우게 된다면 에러가 발생하게된다.

function getUserDetail(userId: number): UserInfo {
  {
    return {
      userId: 3,
      userName: "code lee",
      age: 27,
      //gender: "female", // 이렇게 삭제하게되면 에러발생
      courseCompleted: true,
    };
  }
}

하지만 프로퍼티중 필수적이지않은 경우도 있을 수 있다 이러한 경우에는 interface부분에 선택적 프로퍼티(Optional Properties)를 사용해주면 되는데 사용 방법은 아래 코드를 통해 확인 해 보도록 하겠다.

interface UserInfo{
  userId : number;
  userName : string;
  age : number;
  gender? : string; // key값앞에 선택적 프로퍼티인 '?'를 붙여준다.
  courseCompleted : boolean;
}

function getUserDetail(userId: number): UserInfo {
  {
    return {
      userId: 3,
      userName: "code lee",
      age: 27,
      gender: "female",
      // gender부분에 선택적 프로퍼티가 적용되었기 때문에 에러가 발생되지 않는다.
      courseCompleted: true,
    };
  }
}

위와같이 선택적 프로퍼티를 사용하게되면 프로퍼티중 필수적이지 않은 값에 대해서 유연하게 적용 할 수 있다.

1-2-3 Interface 재사용

선언되어진 interface는 함수의 파라미터 값에 타입으로 지정하게 되면 재사용이 가능하다.

interface UserInfo{
  userId : number;
  userName : string;
  age : number;
  gender? : string;
  courseCompleted : boolean;
}



function getUserDetail(userId: number): UserInfo {
  {
    return {
      userId: 3,
      userName: "code lee",
      age: 27,
      gender: "female",
      courseCompleted: true,
    };
  }
}
  
function saveUserDetails(user:UserInfo): void{
 // 반환되는 값이 없으므로 void로 처리
} // 함수의 파라미터에 interface값을 지정
  
saveUserDetails({
      userId : 2,
	  userName : 'code park',
	  age : 29,
	  gender : 'female',
	  courseCompleted : false
}) // 위에 선언한 함수르 호출하여 인자값을 할당하게 되면 interface를 재사용 할 수 있다.

위의 코드내용처럼 함수의 파라미터에 interface를 지정하고 return값이 없으므로 void처리한 후 함수호출 시 인자값을 UserInfo 형식에 맞춰 호출하게되면 재사용이 가능하다.

object를 인자값에 할당하여 사용하는 방법도 가능하다.

interface UserInfo{
  userId : number;
  userName : string;
  age : number;
  gender? : string;
  courseCompleted : boolean;
}

let user1 = {
	userId : 2,
	userName : 'code park',
	age : 29,
	gender : 'female',
	courseCompleted : false
} // 선언되어진 interface의 타입과 동일하게 작성 후 객체를 아래 saveUserDetails 함수의 인자값으로 할당

function getUserDetail(userId:number): UserInfo{
{
	return {
      userId : 3,
	  userName : 'code lee',
	  age : 27,
	  gender : 'female',
	  courseCompleted : true
    }
}
  
function saveUserDetails(user:UserInfo): void{
 // 반환되는 값이 없으므로 void로 처리
} // 함수의 파라미터에 interface값을 지정
  
saveUserDetails(user1)
//인자값으로 위에 선언한 객체인 user1을 할당하게되면 
//위에서 설명한 interface 재사용의 결과물처럼 동일한 내용을 얻을 수 있다.

객체를 따로 선언한 뒤 그 선언된 객체를 호출할 함수의 인자값으로 넣어주게 되면 동일한 결과를 얻을 수 있다.

1-2-4 메소드를 인터페이스에 정의

interface UserInfo{
  userId : number;
  userName : string;
  age : number;
  gender : string;
  courseCompleted : boolean;
  addComment? : (comment : string) => string; 
  //addComment라는 메소드 정의 후 comment라는 string 값을가진 파라미터를 가지고 있고 string 값을 반환 해 준다. 
}

1-2-4 read only 속성

읽기전용 프로퍼티로 객체생성시 할당된 프로퍼티의 값을 바꿀 수 없다.

interface UserInfo{
  readonly userId : number; // 키값 앞에 readonly 지정
  userName : string;
  age : number;
  gender : string;
  courseCompleted : boolean;
}
  
function saveUserDetails(user:UserInfo): void{
 UserInfo.userId = 3456;
  // userId는 읽기전용 프로퍼티이기 때문에 수정될 수 없어서 에러가 발생
}