타입스크립트는 두가지 변수 선언이 존재한다.
typescript안에서 스스로 타입을 판단하는 것과 개발자가 직접 타입을 지정해주는 것이다.
타입스크립트는 우리 생각보다 뛰어나니 타입스크립트 스스로가 판단하게 하도록 하는게 좋다. 물론 특별한 경우는 제외하고 말이다.
let a = 1;
a = "hello"; // 오류가 발생한다.
let b = "hello";
b = 1; //오류가 발생한다.
let c = [1,2,3];
c.push("hello") //오류가 발생한다.
Typescript는 타입을 알아서 판단하고, 잘 못된 타입이라는 것을 알려준다.
let a :number =1; //이렇게 직접 타입을 지정해준다.
a = "hello"; //오류발생
let b :string = "jou";
b = 1; // 오류발생
let c : number[] = [1,2,3]
c.push("hello") //오류발생
let d : boolean[] = [true];
c+d //오류발생
string
, boolean
, number
등등
우리가 생각하는 타입들
const player = {
name: 'hou',
age:13
}
player.name //hou
player.age = '13' //에러발생
const player : {
name:string,
age:number
} = {
name: "hou",
age: 12
}
라고 할 수 있다.
하지만 여기서 age를 빼고 선언하게 되면 에러가 발생하는데
const player : {
name:string,
age:number
} = {
name: "hou",
}
이런 상황을 예방하기 위해서 optional
로 처리 할 수있다. age
를 넣을 수도 있고 안 넣을수도 있게 처리해주려면 type선언부에 age ?: number
라고 표현해주면 된다.
const player : {
name:string,
age?:number
} = {
name: "hou"
}
이러면 오류가 발생하지 않는다.!
이제 player
를 여러개 만들 려면 우리는 어떻게 해야할까? 단순하게
const player1 : {
name:string,
age?:number
} = {
name: "hou"
}
const player2 : {
name:string,
age?:number
} = {
name: "minsoo"
}
...
이러면 공통되는타입이 너무 반복 되어지는 수고로움이 있다. 이런 수고를 줄여주기 위해 ts는 위에서 type
이란 명령어로 타입을 선언할 수 있다.
//type설정
type Name = string;
type Age = number;
type Player = {
name: Name,
age?: Age
}
const hou : Player = {
name:"hou"
}
const minsoo : Player ={
name:"minsoo",
age:24
}
type
을 변수를 만들때는 첫 글자를 대문자로 작성해주는 것을 잊지말자
function playerMaker(name: string) :Player {
return{
name:name
}
}
parameter 값에도 타입을 지정해주고 반환되는 함수의 타입도 지정해줘야한다. JAVA
랑 좀 비스무리하네 return 값 같은 경우 key와 parameter의 이름이 동일함으로 name만 작성해줘도 된다.
오직 읽기 전용 변수를 만드는 것이다. 수정이 불가능하다
type Player = {
readonly name: Name,
age?: age
}
const playerMaker = (name:string) :Player => ({name})
const hou = playerMaker("hou");
hou.age = 20;
hou.name="las" //오류가 발생한다!
readonly
로 변수를 선언하였기 때문에 name은 처음 선언한 이후에 건드릴 수가 없다.
하나의 배열에 여러가지 타입들이 들어갈 수 있다. openAPI에서 이런 경우들이 존재한다.
const player: [string, number, boolean] = ["hou", 12, true]
undefined, null 로 선언하고 싶은 경우
let a : undefined = undefined
let b : null = null
어떤 타입이든 허용이 된다. 다시 js의 바보같은일을 허용해달라는 말이다.
let c : any[] = [1,2,3,4,5]
let d : any = true;
console.log(c+d)
//결과값 "1,2,3,4,5,tru"
전에 설명햇던게 그대로 된다!
넘어 오는 타입이 무엇인지 알수 없을때 선언한다.
let a :unknown;
//a가 어떤 type인지 모르기 때문에 아래코드 오류발생
let b = a + 1;
if (typeof a === 'number') {
let b = a + 1
}else if(typeof a ==="string") {
let b = a.toUpperCase();
}
typeof a
를 통해서 a
의 타입을 판단하고 맞는 타입에 따른 결과를 실행한다.
함수에서 반환 값이 없을때 상용한다. JAVA
에서 많이 봣다.
function hello() :void {
console.log('x')
}
//아래 와 같이 가능
function hello() {
console.log('x')
}
void
는 삭제해도 정상 작동한다.
절대로 return 하지 않는 함수다. return값이 있으면 오류가 난다. Error처리에 많이 사용되는 함수 throw
와 같이 작성
function hellos():never {
throw new Error('xxx');
}
function hello(name: string|number) {
if(typeof name === "string"){
name
}else if (typeof name === "number"){
name
} else {
name
}
}
if
와 else if
안의 name
의 타입은 string
과 number
이지만 else
의 name
타입은 never
이다. 여기다가 Error
코드를 작성해주면 된다.!
니콜라스 쌤의 TS강의
완전 강추우!