TypeScript 101

101

💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

 

💡 각각의 프로퍼티마다 타입을 지정해 준다.

 

💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

 

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수

101

<aside> 💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

</aside>

<aside> 💡 각각의 프로퍼티마다 타입을 지정해 준다.

</aside>

<aside> 💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

</aside>

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수

101

<aside> 💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

</aside>

<aside> 💡 각각의 프로퍼티마다 타입을 지정해 준다.

</aside>

<aside> 💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

</aside>

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수

101

<aside> 💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

</aside>

<aside> 💡 각각의 프로퍼티마다 타입을 지정해 준다.

</aside>

<aside> 💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

</aside>

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수

101

<aside> 💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

</aside>

<aside> 💡 각각의 프로퍼티마다 타입을 지정해 준다.

</aside>

<aside> 💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

</aside>

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수

101

<aside> 💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

</aside>

<aside> 💡 각각의 프로퍼티마다 타입을 지정해 준다.

</aside>

<aside> 💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

</aside>

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수

101

<aside> 💡 TodoItem.ts 에서 접근 지정자를 통해 타입을 지정해 줄 수 있다.

</aside>

<aside> 💡 각각의 프로퍼티마다 타입을 지정해 준다.

</aside>

<aside> 💡 함수를 사용하며 기본 리턴값을 타입을 지정해 준다.

</aside>

• 개발 환경 구성
  • 필수 모듈은 typescript.js
  • node설치를 기본 전제로 함 npm혹은 yarn을 설치함
  • .ts파일에 대한 컴파일이 가능
    • 이 파일은 tsc컴파일 과정을 거치면 .js파일로 트랜스컴파일 됨
  • 기본 구성 디렉토리는 src, build로 구분해 작성소스, 컴파일 소스로 구분
  • 디렉토리를 구분해서 소스파일을 관리하기 위해 tsconfig.json파일을 생성하고 관련 내용을 수정
  • package.json파일을 생성하고 nodemon과 concurrently 모듈 설치
  • package.json파일에 scripts 내용을 추가해 빌드와 실행 명령을 스크립트로 실행되도록 설
• 기본
  • node.js설치
  • 디렉토리 구성
  • 
  • 타입스크립트 전역으로 설치

  npm install -g typescriptㅇㅇㅇㅇ
  

  • ts파일을 js파일로 컴파일

  tsc 파일명.ts
  

  • node 파일명.js 로 실행할 수 있다.
• npm init
  • tsconfig.json
    • rootDir 소스코드가 있는 디렉토리 (./src)
    • outDir 컴파일된 js가 있는 디렉토리(./build)
  • tsconfig에 지정을 해놨기 때문에 파일명을 지정해주지 않아도 컴파일이 알아서 됨.
• 
• package.json 설치
  • npm init -y
  • npm install nodemon concurrently
    • node_modules에 로컬로 설치됨
• package.json 수정
  • "start:build": "tsc -w", //ts가 컴파일 될때 콘솔에서 확인하겠다는 뜻
  • "start:run": "nodemon build/index.js", // 노드몬을 사용해 디렉토리 안의 파일을 실행하겠다.
  • "start": "concurrently npm:start:*" //빌드와 런을 둘다 병행 실행하게 만드는 작업
  • npm start // 실행된 내용들과, 컴파일된 내용들을 터미널에서 확인할 수 있음. //실시간으로 변경이 반영

Defining the Data Model

• toDoList 프로젝트에서 기본 데이터에 해당하는 toDoItem 클래스를 정의
• 기본 js와 ts 클래스 차이 확인

• 테스트
  • index.js
  • class TodoItem{ constructor(id,task,complete){ // 생성자를 정의하고 id, task, complete가 파라메터로 들어옴 this.id = id; //파라메터로 초기화 this.task = task; this.complete = complete; } printDetails(){ console.log(`${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}` ); } } //데이터 const data=[ {id: 1, task: '장보기', complete:true}, {id: 2, task: '음쓰버리기', complete:false}, {id: 3, task: '재활용 안하기', complete:false}, ] //테스트 코드 let todoItem = new TodoItem(data[0].id,data[0].task,data[0].complete) console.log(todoItem); for(i=0; i<data.length; i++){ let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete); todoItem.printDetails(); }
  • 이걸 ts로 바꿀때 어떻게 바뀌느냐!
  • TodoItem.ts
    • 에러뜸
    • 
    • 생성자를 이용해 초기화를 해야함.
    • 
    • 접근 지정자를 넣어줄 수도 있음.
    • class TodoItem{ public id : number; // private, public, protected public task : string; public complete : boolean; constructor(id:number,task:string,complete:boolean){ this.id = id; this.task = task; this.complete = complete; } }
    • 두번 반복해서 작성하는건 불편하니 접근 지정자에 한번만 해도됨

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    }
    
    // class TodoItem{
    //     public id : number; // private, public, protected
    //     public task : string;
    //     public complete : boolean;
    
    //     constructor(id:number,task:string,complete:boolean){
    //         this.id = id;
    //         this.task = task;
    //         this.complete = complete;
    //     }
    // }
    

    • return이 존재하지 않을때는 void

    class TodoItem{
        constructor(public id:number, public task:string, public complete:boolean){
            this.id = id;
            this.task = task;
            this.complete = complete;
        }
    
        printDetails():void{ //return이 존재하지 않을때는 void로 지정해줌
            console.log(
                `${this.id}\\t${this.task}\\t${this.complete ? "\\t(complete)" : ""}`
            );
        }
    }
    
    export default TodoItem;
    

  • index.ts에서 사용

  import TodoItem from "./TodoItem";
  
  const data=[
      {id: 1, task: '장보기', complete:true},
      {id: 2, task: '음쓰버리기', complete:false},
      {id: 3, task: '재활용 안하기', complete:false},
  ]
  
  console.log('My Todo List');
  
  for(let i=0; i<data.length; i++){
      let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
      todoItem.printDetails();
  }
  

  • npm start
  • 
• 정적 타입을 기본으로 하는 C,Java와 마찬가지로 변수 선언에 타입을 지정할 수 있다.
• 변수에 대한 타입을 지정하면 해당 변수에 다른 타입의 값을 대입할 수 없다.
• 변수에 정의한 타입과 다른 타입의 값을 대입하는 코드는 ts 컴파일러에 의해 컴파일 오류가 발생된다.
• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 나열하는 형태로 정의한다.

const data=[ //data 타입추론
    {id: 1, task: '장보기', complete:true},
    {id: 2, task: '음쓰버리기', complete:false},
    {id: 3, task: '재활용 안하기', complete:false},
]

console.log('My Todo List');

for(let i=0; i<data.length; i++){ //i 타입추론
    let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
    todoItem.printDetails();
}

• 함수를 정의할 때 파라미터와 반환값에 타입을 지정한다.
• 함수의 종류(선언, 익명, 람다)에 따라 타입 지정에 대한 표현에 차이가 있다.
• 함수의 파라미터를 정의할 때 선택적 매개변수를 지정할 수 있다.
• js는 기본적으로 가변인자를 통한 함수 호출이 가능했지만 ts는 가변인자를 지원하지 않는다.
• 대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현한다.
• 선택적 매개변수는 함수 호출시 전달인자를 선택적으로 보낼 수 있는 기능의 매개변수이다.
• 기본 매개변수, 나머지 매개변수