[TypeScript] 기본 문법 알아보기

 

이제 기본 문법에 대해서 알아보자

먼저 간단한 변수 타입지정으로는

 

let Name: string = 'Lee';
Name = '123';

위와 같이 이 Name 변수에는 string(문자) type만 들어올 수 있습니다.

string 말고도 number, boolean, neull, undefined, bigint, [], {} 등 type으로 들어갈 수 있다.

 

let Name: string[] = {'Lee', 'Kim'};
let Name: { name : string } = {name, 'Kim'};
let Name: { name? : string } = { }; 
// ?는 name이라는 속성이 들어올 수도 있고 안들어올 수도 있다. (일종의 옵셥)

위 코드의 첫번째 줄은 Name 변수에는 string이 담긴 array만 들어올 수 있습니다.

두번째 줄로는 name이라는 속성에는 string 타입만 들어올수 있다.

세번째 줄로는 name이라는 속성이 들어올 수도 있고 안들어올 수도 있다.

 

let Name: string | number = 123;
let Name: string | number = 'Lee';

위 코드는 | 를 활용하여 string이나 number 둘중에 한가지가 들어올 수있다는 의미입니다.

 

type Name = string | number;
let NameA: Name = 'Lee';

위 코드는 Name이라는 type을 활용하여 변수에 담아쓸 수 있습니다.

 

type Member = [number, boolean]; 
// 튜블타입이라고 한다.
// [number, boolean]<- 이 array에서 첫번째는 number, 두번째는 boolean이라고 지정해준다.

let john: Member = [123, true];

위 코드로는 튜블타입으로 array의 첫번째 타입 두번째 타입을 지정해 줄 수 있습니다.

 

function test (x: number): number { // 파라미터로 number, return 값으로 number를 지정
  return x * 2; 
}

test('123'); // Error 문자이기때문에 에러가 난다.
test(123);

위 코드와 같이 함수에서도 활용이 가능합니다. test 함수에서의 파라미터는 number로 return 값도 number로 지정하겠다는 의미이며 test 함수를 사용할때 문자등 number가 아닌 다른 타입이 들어가게 된다면 에러가 발생합니다.

function 함수 (x : number) : void {
	return 1 + 1; // Error
}

위 코드에 있는 : void는 실수로 뭔가 return 하는걸 사전에 막을 수 있습니다.

function 함수(x? : number) : void {
}

함수();

function 함수2(x : number | undefined) : void {

}

함수2();

타입스크립트에서는 파라미터 변수가 지정되어있으면 함수를 불러올때 파라미터 변수를 불러와야 하지만 원치 않을 경우에는 파라미터 변수? : 타입의 문법을 지켜줘야 합니다. 또는 | undefined를 넣어줍니다.

 

type Member = {
    name : string,
    age : number
}

let john : Member = { name : 'kim' };

위 코드와 같이 name, age의 타입을 지정해서 john 변수 처럼 사용할 수 있지만 타입지정해야할 속성이 너무 많아진다면 코드가 길어지며 가독성 또한 떨어질 수 있습니다. 

type Member = {
    [key : string] : string, // 글자로 된 모든 object 속성의 타입은 string으로 가진다.
}

let john : Member = { name : 'kim', age : '123' };

그런 문제를 방지하고자 위와 같이 [ key : string ] : string 같이 코딩을 하여 글라조 된 모든 object 속성의 타입을 string으로 지정해줄 수 있습니다.

 

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

위 코드와 같이 class 타입 지정도 가능합니다. JavaScript와 비슷하지만 type을 지정해주었다는 차이점이 있습니다.

 

let 이름 : any;
이름 = 123;
이름 = true;
이름 -1;
let 변수1 : string = 이름; // Error가 나지 않는다.

let 장소 : unknown;
장소 = 123;
장소 = {} ;
이름 -1; // Error가 나온다.
let 변수2 : string = 장소; // Error가 난다.

위 코드와 같이 any타입을 사용하면 모든 자료형을 허용해줍니다.

일반 JS 변수로 만들고 싶을때 사용한다.

unknown타입 같은 경우 any랑 비슷하지만 조금더 안전하다. 그 이유로는  let 변수명 : string = 이름 같이 완전 허용까지는 아닌점이다.

 

let 나이 : string | number;
나이 + 1; // Error

let 나이 : unknown = 1;
나이 -1;

위 코드는 첫번째 코드는 왜 Error가 나올까? 그 이유는 string, number 둘다 허용하기 때문에 string | number 타입은 허용되지 않습니다. 두번쨰 코드는 unknown은 될 것 같지만 숫자타입이여야만 숫자처럼 연산을 해줍니다.

 

이와 같이 타입스크립트는 엄격합니다. 간단한 수학연산도 타입이 맞아야 합니다.