타입스크립트(애플코딩)2

 

Narrowing

type이 아직 하나로 확정되지 않았을 경우 사용한다.

const 내함수 =(x:number|string)=>{
	return x+1
}

위 코드는 number가 들어올지 string이 들어올지 알 수 없기 때문에 에러가 발생한다.

이럴경우 narrowing을 사용해야 한다.

const 내함수 =(x:number|string)=>{
	if(typeof x === 'number'){
	    return x + 1
    }else {	
    	return x + '1'
    }
}

이런식으로 if문으로 타입을 확정을 해줘야한다.

 

주의 ! 

if문 썼으면 끝까지 써야 안전하다. else, else if 안쓰면 에러로 잡아줄수도 없을 수 있다. 

 

assertion문법

const 내함수 =(x:number|string)=>{
	let array : number[] = [];
    array[0] = x as number;
}

as문법의 용도 ! 

1. narrowing 할 때 쓴다.

2. 어떤 타입이 들어올지 확실할때! 

 

대부분 as문법을 사용하지 않는다! 

 

타입변수

let 동물 : string | number | undefined;

이렇게 타입이 길어질 경우 변수에 담는다.

type Animal = string | number | undefined;
let 동물 : Animal = 123;

type Animal = {name:string, age:number}
let 동물 :Animal  = {name:'uri', age : 3}

변수를 작명할땐 일반 변수와 차별화를 주기위해 대문자로 시작해야한다! 

 

const 여친 = {
	name : 'uri'
}

여친.name = 'ura'

자바스크립트는 const 상수를 사용했을때 객체안에 값은 변경이 가능하다. 

다만 typescript를 사용하면 object자료 수정도 막을 수 있다.

 

type Girlfriend = {
	readonly name : string
}

const 여친 :Girlfriend = {
	name : 'uri'
}

여친.name = 'ura'
// 에러 발생

readonly를 사용해서 읽기전용으로 해준다. 그치만 타입스크립트에서는 에러가 발생하지만 자바스크립트로 변환하면 에러가 싹 사라진다.

 

 

type keyword합치기!

type Name = string;
type Age = number;

type Person = Name | Age ;
// Person에는 string 또는 number가 들어올 수 있다.

type PositionX = { x : number };
type PositionY = { y : number };

type NewType = PositionX & PositionY

// x속성과 y속성을 합쳐줄 수 있다.

let position :NewType = { x : 10, y : 20 }

type변수는 재정의가 불가능하다!

 

 

Literal Types

변수

let 이름 : 123

이름 : 456
// 에러발생 : 이름의 타입은 123이기 때문에 변경할 수 없다.

함수

function 함수(a : 'hello') :(1 | 0){
	return 54
}

// 에러발생 : return값으로는 1이나 0만 들어올 수 있다.

 

 

1. 가위 or 바위 or 보 중 1개 입력가능해야한다.

2.가위 or 바위 or 보 만 들어올 수 있는 array를 return해야한다. 

type 게임 = '가위' | '바위' | '보'

function 함수 (a:게임):게임[]{
	return ['바위']
}

함수('가위')

 

var 자료 = {
	name : 'kim'
}

function 내함수(a : 'kim'){

}

내함수(자료.name)

이렇게 되면 자료.name은 'kim'이 맞으나 내함수를 실행시킬때 파라미터 타입도 'kim'으로 되어있어도 에러가 발생한다. 

이유는 a에 들어올 수 있는 건 자료형 'kim'이 아니라 타입이 'kim'인게 들어올 수 있다. 

여기서 name의 타입은 string이기 때문에 타입이 'kim'인거에 대입할 수 없다. 

 

여기서 해결방법으로는 as const가 있다.

var 자료 = {
	name : 'kim'
} as const

function 내함수(a : 'kim'){

}

내함수(자료.name)

as const는 object value값을 그대로 타입으로 지정을 해준다 (name의 타입은 'kim'이 된다.)

readonly로 변경되기 때문에 다른곳에서 name을 수정하고 싶어도 에러가 발생한다.

 

 

함수 타입지정! 

함수타입은 화살표함수 형식으로 써줘야 한다!

type 함수타입 = (a: string) => number;
// string타입이 들어오고 number타입으로 리턴된다.

let 함수 :함수타입 = function (){

}