The TypeScript Handbook 1

 

 

 

What is Typescript

A static Type Checker.

 

 

Getting started

1. install

npm install -g typescript

 

2. compiler

tsc hello.ts;

 

 

Types

The primitives : string, number, boolean

 

Arrays

const number[]; //=== Array<number>
const string[];//=== Array<string>

 

any

type checking을 하지 않고 자바스크립트처럼 동작시키고 싶을 때

let obj:any = { x:0 };

 

 

 

Type Annotations on Variables

const, var, let 키워드로 변수를 정의할 때 

let variableName : type = "";

 

functions 

Parameter Type Annotations

function greet(name:string){
	console.log(name);
}

Return Type Annotaions

function getFavoriteNumber():number{
	return 26;
}

Anonymous Functions

 

 

Object Types

function example(obj: { x:number, y:number}){

}

 

Optional Properties : add a ?after the property name

function example(obj: { x:number, y?:number}){

}

 

Union Types

Defining a Union Type

let id : number | string = 2;

 

 

Type Aliases

타입을 정의해두고 가져다 사용할 수 있다

 

type TypeName = {
  x : number;
  y : number;
}

function printCoord(pt:TypeName){
  
}

type ID = number | string;
let id : ID = 1;

 

Interfaces

object type의 다른 이름이다.

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

 

 

Differences Between Type Aliases and Interfaces

 

1. 상속 방식 

interface Animal{
  name : string
}

interface Bear extends Animal{
  honey : boolean;
}

type Animal = {
  name : string;
}

type Bear = Animal & {
  honey : boolean;
}

 

2. type 방식은 한 번 정의되면 변경하지 못한다.

interface Window{
	title : stirng;
}

interface:window{
	title : number;
}

type Window{
	title : stirng;
}

type:window{
	title : number;
}
//Error : Duplicate identifier

 

 

Type Assertions

타입스크립트가 모르는 타입을 사용할 때

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

.tsx 파일에서 다음과 같이 변경 

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

 

 

 

 

 

타입스크립트 사용법

- 타입을 모두 정의해준다. 최대한 any 타입 사용 x

let name:string = "sinyoung";

그러나 위와 같이 변수 선언과 값을 같이 선언하는 경우에는 따로 할 필요가 없다. => 자동으로 들어간 값의 타입으로 세팅됨.

 

 

 

 

 

Documentation - The Basics

 

 

Types

1. number

2. string

3. boolean

4. null

5. undefined

6. void

7. object

8. array

9. tuples

10..

11. any

12. never

13. unknown