[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)
0 likes488 views
TechDays Korea 2015
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-2-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-3-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-6-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-7-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-9-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-10-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-11-320.jpg)
![[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-12-320.jpg)
![(참고) 데모시 사용한 코드 조각
• {
• "compilerOptions": {
• "target": "ES5",
• "module": "commonjs"
• },
• "files": [
• "server.ts", "client.ts"
• ]
• }
• /// <reference path="./typings/node/node.d.ts" />
• import { createServer } from "http";
• export function simpleServer(port:number, message: string) {
• createServer((req, res) => {
• res.writeHead(200, { "Content-Type": "text/html" });
• res.write("<h1>" + message + "</h1>");
• res.end();
• }).listen(port);
• }
• import { simpleServer } from "./server";
• simpleServer(1337, "Hello TypeScript...");
• console.log("Listening on 1337...");](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-17-320.jpg)
![(참고) 데모시 사용한 코드 조각
• type NameOrNameArray = string | string[];
• function printNames(
• name: NameOrNameArray, age: number = 20, ...email: string[]): string {
• var n: string;
• if (typeof name === "string") {
• n = name;
• }
• else {
• n = name.join(" ");
• }
• return `name: ${n}, age: ${age}, emails: ${email.join(', ') }`;
• }
• var r = printNames(["Red", "Plus"], 21, "a@a.com", "b@b.com", "c@c.com");
• document.write(r);](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-18-320.jpg)
![(참고) 데모시 사용한 코드 조각
• interface Entity {
• name: string;
• }
• var products = [
• { name: "Apple", price: 150, id: 1 }, { name: "Orange", price: 100, id: 2 }, { name: "Mango", price: 250, id: 3 }
• ];
• function sortByName<T extends Entity>(a: T[]) {
• var result = a.slice(0);
• result.sort(function (x, y) {
• var name = "red";
• return x.name.localeCompare(y.name);
• });
• return result;
• }
• function sortBy<T>(a: T[], keyOf: (item: T) => any): T[] {
• var result = a.slice(0);
• result.sort(function (x, y) {
• var kx = keyOf(x);
• var ky = keyOf(y);
• return kx > ky ? 1 : kx < ky ? -1 : 0;
• });
• return result;
• }
• var sorted = sortByName(products);
• document.body.innerText = JSON.stringify(sorted, null, 4);](https://image.slidesharecdn.com/td2015javascripttype-151104051048-lva1-app6892/85/Td-2015-java-script-type-typescript-19-320.jpg)
[Td 2015]java script에게 형(type)이 생겼어요. typescript(박용준)
- 1. 박용준 MVP / 데브렉(http://devlec.com) JavaScript에게 형(Type)이 생겼어요. TypeScript
- 8. JS JSTS
- 13. var conf: string = "TechDays 2015"; Declare it Name it Annotate it Type it Set it Type Annotations
- 14. 더 이상의 슬라이드가 없음
- 15. (참고) 데모시 사용한 코드 조각 • var msg: string = "TechDays 2015"; • class Car { • public name: string; • } • var car = new Car(); • car.name = "TechCar";
- 16. (참고) 데모시 사용한 코드 조각 • class Point • { • x: number; • y: number; • private color: string; • constructor(x: number, y: number) { • this.x = x; • this.y = y; • this.color = "red"; • } • dist() { return Math.sqrt(this.x * this.x + this.y + this.y); } • static oright = new Point(0, 0); • } • class Point3D extends Point { • constructor(x: number, y: number, public z: number) { • super(x, y); • } • } • module Utils { • export class Point { • } • }
- 17. (참고) 데모시 사용한 코드 조각 • { • "compilerOptions": { • "target": "ES5", • "module": "commonjs" • }, • "files": [ • "server.ts", "client.ts" • ] • } • /// <reference path="./typings/node/node.d.ts" /> • import { createServer } from "http"; • export function simpleServer(port:number, message: string) { • createServer((req, res) => { • res.writeHead(200, { "Content-Type": "text/html" }); • res.write("<h1>" + message + "</h1>"); • res.end(); • }).listen(port); • } • import { simpleServer } from "./server"; • simpleServer(1337, "Hello TypeScript..."); • console.log("Listening on 1337...");
- 18. (참고) 데모시 사용한 코드 조각 • type NameOrNameArray = string | string[]; • function printNames( • name: NameOrNameArray, age: number = 20, ...email: string[]): string { • var n: string; • if (typeof name === "string") { • n = name; • } • else { • n = name.join(" "); • } • return `name: ${n}, age: ${age}, emails: ${email.join(', ') }`; • } • var r = printNames(["Red", "Plus"], 21, "[email protected]", "[email protected]", "[email protected]"); • document.write(r);
- 19. (참고) 데모시 사용한 코드 조각 • interface Entity { • name: string; • } • var products = [ • { name: "Apple", price: 150, id: 1 }, { name: "Orange", price: 100, id: 2 }, { name: "Mango", price: 250, id: 3 } • ]; • function sortByName<T extends Entity>(a: T[]) { • var result = a.slice(0); • result.sort(function (x, y) { • var name = "red"; • return x.name.localeCompare(y.name); • }); • return result; • } • function sortBy<T>(a: T[], keyOf: (item: T) => any): T[] { • var result = a.slice(0); • result.sort(function (x, y) { • var kx = keyOf(x); • var ky = keyOf(y); • return kx > ky ? 1 : kx < ky ? -1 : 0; • }); • return result; • } • var sorted = sortByName(products); • document.body.innerText = JSON.stringify(sorted, null, 4);
- 20. http://docs.com/redplus TypeScript 관련 추가 정보는 아래 링크를 참고해 주세요.
- 21. http://aka.ms/td2015_again TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서 추후에 다시 보실 수 있습니다.
- 22. 감사합니다. • MSDN Forum http://aka.ms/msdnforum • TechNet Forum http://aka.ms/technetforum
- 23. http://aka.ms/td2015_again TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서 추후에 다시 보실 수 있습니다.