[TypeScript] Solo Learn 2일차

katsukichi·2021년 4월 3일

TIL typescript

TypeScript Solo Learn

목록 보기

2/4

Type Inference 타입 추론

Static Typing 정적타이핑

타입을 선언하고 , 선언된 타입의 맞는 값 만이 할당 또는 반환 되어야 한다.

예시를 보면

let a = 5;
a = "hello"

자바스크립트에서는 정상적으로 재할당 되는 문장이지만

타입스크립트의 경우


let a = 5;
a = "hello" // a 밑에 빨간 밑줄이 그어진다.

컴파일을해도 실행되지 않는다.

타입스크립트는 타입표기가 없는경우 타입정보를 제공하기위해서 타입을 추론한다.

변수에 할당된 값이 숫자 5였기 때문에 Number로 결정된것이다.

타입스크립트는 타입표기가 없는경우 우리의 코드를 읽고 분석하여 타입을 유추해낼수 있다.

이것이 타입추론 (Type Inference)

얼마나 똑똑한가.


let student = {
  name : "Shin",//string
  course : "Getting Started with TypeScript", // string
  codingIQ : 80, // number
  code : function(){ // function
    console.log('brain is working hard'); // return void
  }
}
function calculateCodingIQ(lostPoints){ // function parameter:any
  return 100 - lostPoints; // return number
}

타입 명시

변수를 선언할때 변수값의 타입을 명시함으로써 , 변수값의 데이터타입을 지정한다.

문법 (Syntax)

let x : string = "Shin"

x변수는 스트링만 할당될수있다.


let studentID :number = 12345;
let studentName :string = "Shin";
let age:number = 27;
let gender:string = 'male';
let subject:string = 'Ts';
let courseCompleted:boolean = false;

function getStudentDetails(studentID:number)
:object { //함수반환값 타입명시는 여기서
  return null
}

function getStudentDetails(studentID:number):{
	studentID :number,
	studentName :string,
	age:number,
	gender:string,
	subject:string,
	courseCompleted:boolean,
} {
  return null
}

이렇게 오브젝트 내부 디자인을 통째로 제시해줄수도있다.

하지만 너무 복잡하고 코드가 이쁘지않다.

그래서 사용하면 좋은것이 인터페이스(Interface)이다.

인터페이스 (Interface)

인터페이스


interface Student { // 인터페이스 네이밍컨벤션 앞에 대문자 -> 다른언어에서는 i를 붙이는경우가있으나 TS에서는 안붙이는게 관습적이다.
 	studentID :number;
	studentName :string;
	age:number;
	gender:string;
	subject:string;
	courseCompleted:boolean;
}

function getStudentDetails(studentID:number):Student
{
 	return {
    	studentID :12345,
        studentName :"Shin",
        age:27,
        gender:"male",
        subject:"TS",
        courseCompleted:false // 이 propery중 하나라도 없으면 바로 컴파일에서 error가 발생한다. 만약  있어도되고 없어도되는 프로퍼티라면? "?" 사용하자. 선택적프로퍼티
    }
}

선택적 프로퍼티 `?`


interface Student { 
 	studentID :number;
	studentName :string;
	age?:number; // age property는 있어도되고 없어도되는 값이다.
	gender:string;
	subject:string;
	courseCompleted:boolean;
}
function getStudentDetails(studentID:number):Student
{
 	return {
    	studentID :12345,
        studentName :"Shin",
		//age:27 없다면      
        gender:"male",
        subject:"TS",
        courseCompleted:false,
    }
}

//이렇게 작성한다면 문제가없다. ?를 사용해서 선택적 프로퍼티를 지정해서 인터페이스를 구상할수있다.


function saveStudentDetails (student:Student) :void { // 코드의 재사용
  
}

let student1 = {
  studentID :12345,
  studentName :"Shin",
  age:27,
  gender:"male",
  subject:"TS",
  courseCompleted:false,
}
saveStudentDetails(student1)

메소드 method

객체내에서 선언된 함수

인터페이스 내에서 정의할수있다.

두가지방법이있다.

addCommnet (comment:string):string;
addComment: (comment:string)=>string;

Read Only 속성

읽기 전용 프로퍼티

객체 생성시 할당된 프로퍼티 값는 바꿀수없다.


interface Student{
  readonly studentID : number;
  studentName:string;
  age?:number;
  gender:string;
  subject:string;
  courseCompleted:boolean;
  // addComment (comment:string):string;
  addComment?: (comment:string)=> string;
}

function saveStudentDetals (student:Student):void{
  student.studentID = 1123323; // 읽기 전용이기때문에 error를 띠운다.
}

실제로 인터페이스는 코드가 렌더링될때

아무런 영향력이 없기때문에 TS -> JS 컴파일시 사라진다.

인터페이스는 작성중인 코드에대한 더많은 정보를 TypeScript에게 제공하기위해서 존재한다.

타입스크립트에게 더많은 정보를 제공할수록, 타입스크립트는 더 많은 도움을 준다.

Enum 과 리터럴(Literal)

Enum

Enum 은 열거형, 연관된 아이템들을 함께 묶어놓은 자료

나라 라는 열거형 자료가있다면

그안에는 미국,한국,중국,일본... 등등등 여러 나라이름들이 존재할수있다.

열거형을쓴다면 좋은점은?

통상적으로 성별 Gender라고 한다면 , male,female 이다.

다른 값이 들어오는것을 제한하려면 if를 걸어야하는가 ?

타입스크립트를 사용하면 Enum타입으로 이것을 타입명시로 제한할수있다.

enum GenderType {
  Male,
  Female
}

interface Student{
  readonly studentID : number;
  studentName:string;
  age?:number;
  gender:GenderType;
  subject:string;
  courseCompleted:boolean;
  // addComment (comment:string):string;
  addComment?: (comment:string)=> string;
}

// 실제 값 부여시에는 GenderType.male 이런식으로 `.`을 사용해서 접근한다. 즉 객체처럼 쓴다.

컴파일된 내용을 봐도 enum 열거형 자료처럼

js내부에서 선언된 순서대로 0,1,2 순서대로 값을 가지고

객체가 만들어진다.

GenderType = {
	Male:0,
    Female:1,
    //...
}

이것을 숫자 열거형 Numeric Enum 이라고 한다.

string Enum 으로 하려면


enum GenderType {
  Male="male",
  Female="female"
}
// 숫자가 자동증가하는 기능은없지만 코드를 실행할때 조금더 읽기 쉬운 값을 주는 장점이있다.

리터럴 Literal


interface Student{
  readonly studentID : number;
  studentName:string;
  age?:number;
  gender:"male"|"female"|"genderNeutral";// 이런식으로 간단하게 해결가능
  subject:string;
  courseCompleted:boolean;
  // addComment (comment:string):string;
  addComment?: (comment:string)=> string;
}

katsukichi

front-back / end developer / Let's be an adaptable person

이전 포스트

[TypeScript] Solo Learn 1일차

다음 포스트

[TypeScript] Solo Learn 2일차