TypeScript로 변수에 타입을 지정할때

변수에 타입을 지정할 때.

let myName:string = 'Lee';

let age:number = 27;

let me:boolean = true;

let money:null = null;

let future:undefined = undefined;

let arr:string[] = [ '와', '무슨', '이딴게', '다있지' ]

let arr:number[] = [ 1, 2, 3, 4 ]

let obj:{ myName : string } = { myName : 'lsiron' }

let obj1:{ age? : number } = { age : 28 }  // 이렇게 ? 를 붙이면 age가 들어올 수 있고 안 들어올 수 있다는 뜻
// 즉, age 속성은 옵션이다 라는 뜻

 
만약 타입을 지정해놓고 지정 해 놓은 타입대로 입력하지 않을 시, 오류가 발생한다.
 
특이점은 배열과 객체이다. 
 
배열과 객체는 배열과 객체 안에 들어갈 타입을 위와 같이 지정해줘야한다. 예를들어 문자면 string, 숫자면 number..
 

이렇게 잘못 입력할 시, 오류가 바로 뜬다. 마우스를 가져다대면 무슨 오류인지 정확하게 알려준다.
 

허나 중요한 것. 하나하나 다 직접 써 줄 필요없이 타입지정은 원래 자동으로 된다.
 
즉, 타입지정 문법은 생략이 가능하다.

 
다시 말해서, 아래와 같이 써 놓아도 알아서 string을 씌운 것 처럼 작동을 한다는 것.
숫자로 바꾸면 number를 씌운 것 처럼 작동 한다.

 
그러면 타입지정은 필요없는 것이 아닌가?
 
아니다. 타입을 여러개 지정한다던지 다양한 경우의 수가 존재한다. 아래 예제를 보며 살펴보자.
 

변수에 다양한 타입 지정할 때. (Union type)

let age:string | number = '스물여덟' //28 을 넣어도 된다.

let person:(string[] | string) = '나' //괄호 씌워줘도 상관없다.

let member:(number | string | boolean) = 123

let num:(number | string)[] = [1, '2', 3]; // 인덱스 값을 여러 타입으로 할땐 괄호 필수이다.

let num:number | string[] = 1 // 이렇게 괄호 없으면 number 또는 string[] 타입이다.

let obj:{ a : string | number } = { a : 123 } // a 속성은 string도 되고 number도 된다.

 
위와 같이 다양한 타입을 지정하여 여러 타입을 사용할 수 있도록 지정할 수 있다. 허나 한번 할당을 하면 할당된 타입으로 확정이 된다.
 
예를들어 위 처럼 age에 string 타입을 할당했을땐 string으로 쭉 유지가 된다. 허나 다시 

age = 28;

 
이렇게 재할당을 해주면, age는 number 타입으로 쭉 유지가 된다.
 
이렇게 가변적으로 사용할 수 있다.
 
참고로 TypeScript 에서 Union type으로 수학연산을 적용할 수 없다.

let str:string = '1'

str + 1 // '11'

let num:number = 1

num +1 // 2

let strNum:string | number = '1'

strNum + 1 // 오류발생!!!

 
위의 결과와 같이 타입을 하나만 적용했을땐, JavaScript 처럼 적용이 되나, union type으로 타입을 지정 해 주면 수학연산을 적용할 수 없다.
 

변수에 모든 타입을 허용하고 싶을 때.

1) any - 타입실드 해제문법(변수 선언할땐 안 씀)

let lsiron:any = 28

lsiron = 'youngnrich'

lsiron = 'tallnhandsome'

lsiron = false

 
이렇게 any를 사용하여 모든 타입을 허용할 수 있다ㅠ 허나 이는 타입실드를 해제시키기 위한 용도로만 쓰인다.
 
any type은 아래와 같이 다른 변수의 타입에도 이리저리 적용을 시킬 수가 있다.
 
다른 변수의 타입을 해제시킨다고 하여, 타입실드 해제문법이라고 한다. 어지간하면 쓰지 않는게 좋음.

let lsiron:any = 28

lsiron = 'youngnrich'

lsiron = 'tallnhandsome'

lsiron = false

let siron:number = lsiron  // lsiron을 boolean type 으로 인식하지 못하고 siron은 number type 이기 때문에 오류발생 X

 
2) unknown - 변수 선언 시 모든 타입을 허용할 때 사용하는 문법

let lsiron:unknown = 28

lsiron = 'youngnrich'

lsiron = 'tallnhandsome'

lsiron = false

 
이렇게 unknown을 사용하여 모든 타입을 허용할 수 있다ㅠ unknown은 any보다 안전하다.
 
왜냐하면 any처럼 타입실드를 해제 시킬 수 없고, 아래와 같이 변수를 선언하면 오류가 발생한다.
 
즉, lsiron이 any 가 아니라 unknown으로 타입을 받고있기 때문이다.

let lsiron:unknown = 28

lsiron = 'youngnrich'

lsiron = 'tallnhandsome'

lsiron = false

let siron:number = lsiron  // lsiron을 boolean type 으로 인식하고 siron은 number type 이기 때문에 오류발생

 
참고로 unknown으로 변수에 타입을 지정해서 수학연산을 적용하고자 할 땐 오류가 발생한다.
 
TypeScript는 간단한 수학연산도 타입이 맞아야하며, any / number / bigint 타입이 아닌이상 수학연산을 사용할 수 없다.
 
union type으로 타입을 지정해 주었을 때와 똑같이 Type Script는 정확한 타입끼리의 연산만 허용해준다. (엄격함 적용)
 

변수에 타입을 담아서 사용할 때. (Type alias)

type Mine = string | number;

let age:Mine = 28;

 
위와 같이 타입을 변수에 담아서 사용 가능하다. 타입명은 보통 대문자로 시작하도록 작명한다.
 

함수에 타입을 지정할 때.

function test(x:number):number {
	return x * 2
}

 
parameter와 return 값에 타입 지정이 가능하다. 단, return 값에 타입을 지정할 땐, 리턴 값 옆이 아니라 파라미터 소괄호 오른쪽에 해준다.
 
즉, 위 test함수는 무조건 number가 들어와야하며, return 값은 무조건 number가 반환돼야한다.
 

array 에는 tuple 타입을 사용할 때. ( 특정 index에 특정 type을 넣고자 할 때)

type Tuple = [number, boolean];
let age:Tuple = [28, true];

 

object에 타입을 지정할 속성이 너무 많을 때

type Obj = {
    [key:string] : string,
}

let member:Obj = {
    myName : 'lsiron',
    age : '28',
}

 
글자로 된 모든 속성이 전부 타입이 string 이어야 한다는 뜻이다.
 

class 문법에 타입을 지정 할 때

class User {
    name:string;
    constructor(name:string){
        this.name = name;
    }
}

 
 
참조 : 코딩애플