사용 환경
Typescript v4.6.4 변수 선언
타입스크립트는 두가지 변수 선언이 존재한다.
typescript안에서 스스로 타입을 판단하는 것과 개발자가 직접 타입을 지정해주는 것이다.
타입스크립트는 우리 생각보다 뛰어나니 타입스크립트 스스로가 판단하게 하도록 하는게 좋다. 물론 특별한 경우는 제외하고 말이다.
implicit 와 explicit
implict (내포된, 암시의)
let a = 1;
a = "hello"; // 오류가 발생한다.
let b = "hello";
b = 1; //오류가 발생한다.
let c = [1,2,3];
c.push("hello") //오류가 발생한다.Typescript는 타입을 알아서 판단하고, 잘 못된 타입이라는 것을 알려준다.
explicit (명백한, 명시적인)
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 //오류발생Typescript 타입 종류
기본타입
string, boolean, number 등등
우리가 생각하는 타입들
Object에서 타입 설정
implicit
const player = {
name: 'hou',
age:13
}
player.name //hou
player.age = '13' //에러발생explicit
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만 작성해줘도 된다.
TS의 다른 신기한 타입 선언 방법
readonly
오직 읽기 전용 변수를 만드는 것이다. 수정이 불가능하다
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은 처음 선언한 이후에 건드릴 수가 없다.
tuple
하나의 배열에 여러가지 타입들이 들어갈 수 있다. openAPI에서 이런 경우들이 존재한다.
const player: [string, number, boolean] = ["hou", 12, true]undefined, null
undefined, null 로 선언하고 싶은 경우
let a : undefined = undefined
let b : null = nullany
어떤 타입이든 허용이 된다. 다시 js의 바보같은일을 허용해달라는 말이다.
let c : any[] = [1,2,3,4,5]
let d : any = true;
console.log(c+d)
//결과값 "1,2,3,4,5,tru"전에 설명햇던게 그대로 된다!
unknown
넘어 오는 타입이 무엇인지 알수 없을때 선언한다.
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의 타입을 판단하고 맞는 타입에 따른 결과를 실행한다.
void
함수에서 반환 값이 없을때 상용한다. JAVA에서 많이 봣다.
function hello() :void {
console.log('x')
}
//아래 와 같이 가능
function hello() {
console.log('x')
}void는 삭제해도 정상 작동한다.
never
절대로 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강의
완전 강추우!
