MS가 만든 타입 체크가 가능한 스크립트 - TypeScript


안녕하세요 수빈빠 입니다.

이것저것 보다가 재밌는게(MS가 했다는게?) 있어서 공유합니다.

 

요새 워낙 Script language가 대세라(구글 dart도 그렇고, CoffeeScript도 그렇고)

MS도 "TypeScript"라는 걸 내놨습니다. ( http://www.typescriptlang.org/ )

 

http://www.typescriptlang.org/Playground/ 여기에서는 온라인으로 컴파일을 해 볼 수 있습니다.

 

1. 개념

간단히 설명을 하자면(물론 더 많은 기능이 숨어 있는 것 같은데 거기까지는 못 봤네요)

type을 체크할 수 있는 문법을 두어서 개발을 한 후, 이것을 javascript로 pre-compile하는 방식입니다.

 

2. 환경

에디터는 vim, emacs, subtime text 같은 것을 지원하고요..

컴파일은 node.js나 visual studio를 사용하는 방식입니다.

node의 경우, npm을 통해서 "npm install -g typescript" 하면 바로 설치가 가능합니다.

컴파일의 경우에는 "tsc aaaa.ts" 하면 js가 만들어집니다.

 

3. 사용 범위

문서에 보면 어떤 javascript host도 가능하다고 되어 있습니다.

주로 예제는 브라우저용이기는 한데, node용 스크립트도 됩니다.

다만 일부 global wide한 내장 변수의 경우 경고를 뱉기는 합니다만, 컴파일은 됩니다.

 

4. 예제

예제를 봐야겠죠? 먼저 컴파일이 실패하는 예제 입니다.

 

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = {firstname: 123, lastname: "User"};

console.log(greeter(user));
 

보시면 바로 아실 겁니다. type이 맞지 않죠? 아래와 같은 오류가 발생합니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

person-error.ts(12,12): Supplied parameters do not match any signature of call target:
        Types of property 'firstname' of types '{ firstname: number; lastname: string; }' and 'Person' are incompatible

 

요번에는 성공하는 예제 입니다. 왼쪽은 TypeScript, 오른쪽은 JavaScript 입니다.

 

interface Person {
    firstname: string;
    age: number;
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.age;
}

var user = {firstname: "Jane", age: 20};

console.log(greeter(user));

var user2 = {firstname : "", age : 0}

process.argv.forEach(function (val, index, array) {
    if(index == 2) {
        user2.firstname = val;
    }   
    if(index == 3) {
        user2.age = val;
    }
})

console.log(greeter(user2));

function greeter(person) {
    return "Hello, " + person.firstname + " " + person.age;
}
var user = {
    firstname: "Jane",
    age: 20
};
console.log(greeter(user));
var user2 = {
    firstname: "",
    age: 0
};
process.argv.forEach(function (val, index, array) {
    if(index == 2) {
        user2.firstname = val;
    }
    if(index == 3) {
        user2.age = val;
    }
});
console.log(greeter(user2));
 

 

딱 결과를 보시면 아시겠지만, javascript 쪽에는 type check를 위한 코드가 만들어지지 않습니다.

즉 compile time에만 체크하고, run time에는 체크하지 않습니다.

 

위의 javascript를 node에서 실행할 경우...

 

node person.js First fasdfasd => Number가 아님에도 이렇게 실행해도 잘 되고

node person.js First 12345 => 이렇게 실행해도 잘 됩니다.

 

5. 기타 등등

type check를 하지 않는 script language는 양날의 검이죠.

생산성이 올라가지만, 디버깅 하기 어려운...

TypeScript는 이 문제를 잡겠다고 했지만, 좀 부족한 면이 있습니다.

 

예전에(지금은 거의 쓰지 않지만) commons-validator 모듈을 사용하면

client javascript 까지 제공해 주어서, 사용자의 값을 체크할 수 있었는데,

TypeScript의 경우에는 그런 면이 조금 아쉽습니다.

 

[출처] http://okky.kr/article/205297

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
1195 [ 一日30分 인생승리의 학습법] VBA Web Scraping: How Can VBA Be Used To Scrape Website Data? file 졸리운_곰 2024.04.13 3
1194 [ 一日30分 인생승리의 학습법] 윈도우 실행파일 구조(PE파일) file 졸리운_곰 2024.03.31 3
1193 [ 一日30分 인생승리의 학습법] [Analysis] PE(Portable Executable) 파일 포맷 공부 file 졸리운_곰 2024.03.31 3
1192 [ 一日30分 인생승리의 학습법] 성공하는 메타버스의 3가지 조건 file 졸리운_곰 2024.03.30 7
1191 [ 一日30分 인생승리의 학습법] REST, REST API, RESTful 과 HATEOAS file 졸리운_곰 2024.03.10 9
1190 [ 一日30分 인생승리의 학습법] 렌더링 삼형제 CSR, SSR, SSG 이해하기 file 졸리운_곰 2024.03.10 2
1189 [ 一日30分 인생승리의 학습법] 엑셀 VBA에서 셀레니움 사용을 위한 Selenium Basic 설치 file 졸리운_곰 2024.02.23 11
1188 [ 一日30分 인생승리의 학습법]500 Lines or Less Blockcode: A Visual Programming Toolkit : 500줄 이하의 블록코드: 시각적 프로그래밍 툴킷 졸리운_곰 2024.02.12 4
1187 [ 一日30分 인생승리의 학습법] 구글 클라이언트(앱) 아이디를 발급받으려면 어떻게 해야 하나요? 졸리운_곰 2024.01.28 3
1186 [ 一日30分 인생승리의 학습법] 빅뱅 프로젝트를 성공적으로 오픈하기 위한 팁 졸리운_곰 2023.12.27 16
1185 [ 一日30分 인생승리의 학습법]“빅뱅 전환보다 단계적 전환 방식이 이상적 애자일팀과 협업 쉽게 체질 개선을” file 졸리운_곰 2023.12.27 12
1184 [ 一日30分 인생승리의 학습법] Big-bang / phased 접근 file 졸리운_곰 2023.12.27 3
1183 [ 一日30分 인생승리의 학습법] CodeDragon 메뉴 데이터 전환의 개념 이해 - 데이터 전환의 개념, 데이터 전환방식, 데이터 전환방식 및 장단점 비교, 데이터전환 이후 검토해야 할 사항 졸리운_곰 2023.12.27 5
1182 [ 一日30分 인생승리의 학습법] 블록체인과 IPFS를 이용한 안전한 데이터 공유 플랫폼 - 분쟁 해결 시스템 file 졸리운_곰 2023.12.27 6
1181 [ 一日30分 인생승리의 학습법] 블록체인과 IPFS를 이용한 안전한 데이터 공유 플랫폼 - 개념과 리뷰 시스템 file 졸리운_곰 2023.12.27 4
1180 [ 一日30分 인생승리의 학습법] 소켓 CLOSE_WAIT 발생 현상 및 처리 방안 file 졸리운_곰 2023.12.03 7
1179 [ 一日30分 인생승리의 학습법] robots 설정하기 졸리운_곰 2023.12.03 3
1178 [ 一日30分 인생승리의 학습법] A Tutorial and Elementary Trajectory Model for the Differential Steering System of Robot Wheel Actuators : 로봇 휠 액츄에이터의 차동 조향 시스템에 대한 튜토리얼 및 기본 궤적 모델 file 졸리운_곰 2023.11.29 6
1177 [ 一日30分 인생승리의 학습법] Streamline Your MLOps Journey with CodeProject.AI Server : CodeProject.AI 서버로 MLOps 여정을 간소화하세요 file 졸리운_곰 2023.11.25 2
1176 [ 一日30分 인생승리의 학습법] Comparing Self-Hosted AI Servers: A Guide for Developers / : 자체 호스팅 AI 서버 비교: 개발자를 위한 가이드 file 졸리운_곰 2023.11.25 10
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED