개발야옹

Literal Types

let 이름 : "Lee";
이름 = "kim"; //error, 이름에는 "Lee"이외의 값 들어올 수 없다.

function 함수( a : "hi" ){
	console.log(a);
}

함수("hello"); // error 함수의 parameter로 "hi"만 가능
return type도 똑같이 Literal type으로 지정해 줄 수 있다.

as const

아래와 같은 경우 Name.name의 type이나, show function의 parameter type 이 둘 다 "kim"이지만, Name.name 의 type을 찍어보면 string이 나온다. 이 경우 Name의 type을 직접 object라고 지정을 해주거나, Name의 뒤에 as const를 붙여주어 object value 값을 그대로 type으로 지정해주게 한다.

as const 장점

1. object value값을 그대로 타입으로 지정해준다.

2. object 속성들에 모두 readonly를 붙여준다.

var Name = {
	name : "kim"
};

function show( x : "kim" ){

}

show(Name.name); // error 발생

var Name = {
	name : "kim"
}as const;

or

var Name : object = {
	name : "kim"
};

function show( x : "kim" ){

}

show(Name.name); // 정상 동작

const

const는 = ( 등호 ) 로 재할당만 막는 역할로 const가 object 유형일 경우 const로 담은 object 수정은 자유롭게 가능하다.

const user = { name : "kite" };
user.name = "joy"; // 가능하다.

user = { name : "joy" }; // 불가능하다.

// 충격.. 몰랐다. 

but typescript file안에서는 object 수정을 막을 수 있다. 

실제 js file에서는 error가 발생하지 않음.

// typescript

type Person = {
	readonly name : string // readonly : 읽기전용이라는 뜻
}

const Minseo : Person = {
	name : "Minseo"
}

Minseo.name = "민서"; // error

type allias

Typescript에서는 type도 따로 선언할 수 있다. 길고 복잡한 Union type을 따로 type allias로 만들어 사용하여 가독성 향상시키고 코드 길이를 줄일 수 있다. 

type 변수의 이름은 첫 글자를 대문자로 하는게 국룰

!! type은 재정의가 불가능하다 !!

type Person = { name : string, age : number };
let minseo : Person = { name : Minseo, age : 21 };

type extend

type Name = { name : string };
type Age = { age : number };

type Person = Name & Age;

let Minseo : Person = { name : Minseo, age : 21 };

function type allias

함수 type allias는 함수 표현식에만 사용할 수 있다.

type FunctionType = ( a : string ) => number; 
// string type의 매개변수를 갖고, return type이 number인 함수 type allias

let myFunction : FunctionType = function(){
	// 함수 표현식
}

object 내의 함수도 함수 type allias를 지정할 수 있다. 

type Member = {
	name : string,
    age : number,
    plusOne : ( x : number ) => number,
    changeName : () => void
}

Typescript

Typescript는 type을 명시하지 않는 Javascript 문법에 type이 추가된 언어로, 1 + "3"과 1 + 3의 결과 값이 같은 Javascript와 달리 Typescript에서는 type을 검사하여 error message를 띄워준다. 

install

# global install
$ npm i typescript -g

# local install
$ npm i typescript --save-dev

Type

1. primitives : string, number, boolean

2. Array

3. any

 - any type의 경우 특정 값으로 인해 type check error가 발생하는 것을 원하지 않을 경우 마다 사용할 수 있는 특수 타입으로 모든 type을 할당 할 수 있다. => typescript을 사용하는 의미가 없어지게 된다. 

type 관련 버그를 잡아주지 않는다.

let obj : any = { x: 0 } ;

obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n : number = obj;

4. Object

let student : { name : string, grade : number } = {
	name : "kitez",
    grade : 3
};

console.log(student); // { name : "kitez", grade : 3 }

5. void

void는 return값이 없는 함수에서 return type으로 사용된다. return 값이 없는 함수는 undefined를 반환한다.

function a() : void{
	console.log("a");
}

console.log(a()); // undefined

6. Union

Union은 type을 2개 이상 합친 새로운 type을 말한다.

let id : number | string = 123;
id = "123";
id = 456;
// type이 number or string 가능

7. unknown

any와 같이 모든 자료형을 허용해주나, any보다 안전하다. 왜냐하면 any의 경우 아래와 같이 다른 type의 변수에 값을 넣어도 error가 발생하지 않지만 unknown의 경우 이러한 type error를 잡아준다.

let name : any;
name = 123;

let name2 : unknown;
name2 = 123;

let name3 : string = name; // error no
let name4 : string = name2; // error yes

Functions

Parameter type

function add(x : number, y : number) : number{
	return x + y;
}

add(2,3); => return 5
# Argument of type 'string' is not assignable to parameter of type 'number'.
add("2",3) => error

Return type

function message() : string{
	return "Hello!";
}

message() => return "Hello!"

출처 :

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

https://www.digitalocean.com/community/tutorials/typescript-new-project