Typescript 로 기초부터 시작하기

 

 

typescript variables

// There are 3 basic types in Typescript
var isDone: boolean = false;
var age: number = 42;
var myname: string : "Anders";

 

chcek

 

console.log(isDone)
console.log(age)
console.log(myName)

 

null vs undefined

//print null
var emptyVariable = null;
console.log(emptyVariable);

// prints undefined
var newVariable;
console.log(newVariable);

 

collection

// list
var list: number[] = [1,2,3];
var list: Array<number> = [1,2,3];

 

Function concept

function sayMyName (name: string){
	alert('name:' + name);
    console.log('function sayMyName was called');
}
sayMyName('function sayMyName was called');

function addTwoNumber(a: number, b: number) {
	return a + b;
}

alert(addTwoNumber(2, 3));

var f1 = function(i: number): number {return i * i;}
var f2 = function(i: number) { return i * i;}
var f3 = (i: number): number => { return i * i;}
var f4 = (i: number) => {return i * i;}
var f5 = (i: number) => i * i;

 

if conditions

var homeworkDone : boolean = true;
// if 괄호 안에는 참 혹은 거짓 표현만 올 수 있음.
// == 는 같은지 다른지 표현
if (homeworkDone == true ){
	alert('Then you can play from now.')
}

var age: number = 15;

if(age > 20 ){
	alert('Then you can play adult.');
} else {
	alert('You are not an adult.')
}

var kor: number = 60;
var eng: number = 80;

if ( kor > 70 && eng > 70){
	console.log('1');
} else {
	console.log('2');
}

var score = 'C';
switch (score) {
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');
    break;
  case 'C':
    console.log('C');
    break;
  default:
    console.log('default')
    break;
}

 

Loops

var i;
// i는 0부터 시작해서 1씩 증가한다. 3보다 작은 상황에서만 반복을 계속한다.
for (i = 0; i < 3; i = i + 1){
  console.log(i);
}

 

collection Loop

var myArray: string[] = ["A","B","C"];

for ( var i = 0; i < myArray.length; i++){
  console.log("index: " + i + " -> " + myArray[i])
}

 

while

var i = 10;

// i가 0보다 큰 상황에서 계속 반복한다.
while (i > 0){
  console.log(i + " left");
  // 매번 1씩 감소시킨다. 즉, 언젠가는 반복이 멈추게 된다.
  i -= 1;
}

 

 

break VS continue

var i = 10;

while (true) {
  console.log(i + " left");
  i -= 1;
  if (i == 0){
    break;
  }
}

for (var i = 0; i < 10; i++){
  if(i % 2 == 0){ //i가 짝수
    continue;
  }
  console.log(i + ' is an odd number.');
}

 

Object

var emptyObject = {};
var personObject = {
  firstName = "John",
  lastName = "Smith"
}

personObject["salary"] = 14000

for (var member in personObject){
  if(personObject.hasOwnProperty(member)){
    console.log("the member " + member + 
    " of personObject is" + personObject[member])
  }
}

 

 

Interface

Interface = object에 대한 타입

여러 개의 함수와 여러 개의 변수 등이 구조적으로 어떻게 결합되어야 하는지에 대한 약속

하나의 함수가 가져야 할 구조에 대한 약속

interface Person {
  name: string;
  age?: number; // optional 선택사항
  
  move(): void;
}

var person: Person = {
  name: "John",
  move: () => { }
}

var person2: Person = {
  name: "John",
  age: 42,
  move: () => { }
}

var person3: Person = {
  name: "John",
  age: true
}

▶ Person3에는 move 라는 함수가 없고, age에 대한 타입이 맞지 않아서 오류

 

// Interfaces can also describe a function type
interface SearchFunc {
  (source: string, substring: string): boolean;
}

// Only the parameters' types are important, names are not important.
var mySearch: SearchFunc;
mySearch = function (src: string, sub: string){
  return src.search(sub) != -1;
}

▶ 입력은 string으로 받고, 결과같음 boolean으로 받음

▶ != -1 값이 같지 않을때 참을 반환

 

 

 

Class

Class = 실제 세계의 물체를 표현하는데 사용

* 정보(변수)와 행동(함수)

인터페이스와 차이점

* Constructor

* 함수의 내용을 꼭 써야 함

 

Class Point {
  x: number;
  
  constructor(x: number, public y: number = 0 ){
    this.x = x;
  }
  
  dist() {
    return Math.sqrt(this.x * thix.x + this.y * this.y)
  }
  
  static origin = new Point(0, 0);
}

var Point1 = new Point(10, 20);
var Point2 = new Point(25)

static 한번 만들고 변하지 않는 값

어떤 함수인지 반드시 써줘야함. 직관적으로 작성됨.

 

interface Point {
  x: number;
  y: number;
  
  dist: number;
}

var origin: Point = {
  x: 0, y: 0,
  dist: () => Math.sqrt(this.x * thix.x + this.y * this.y)
}

var Point1: Point = {
  x: 10, y: 20,
  dist: () => Math.sqrt(this.x * thix.x + this.y * this.y)
}

var Point2: Point = {
  x: 25, y: 0,
  dist: () => Math.sqrt(this.x * thix.x + this.y * this.y)
}

인터페이스는 클래스와 다르게 변수를 만들든 함수를 만들든 구조를 잡는데 사용됨.

 

 

Callback

* 넘길 수 있는 실행가능한 코드 조간

* 원하는 시간이나 조건에 그 코드 조각이 실행되기 원할때

 

var callback = function() {
  alert('callback was exe')
}
setTimeout(callback, 3000)





setTimeout(function(){
  alert('callback was exe')
})

 

 

 

 

 

 

 

 

 

 

 

 

 

타입스크립트 플레이그라운드

www.typescriptlang.org/play