[TypeScript] 기본 문법

TypeScript 기본 문법

1. 변수에 타입 지정하기

// 올바른 예
let 이름 : string = 'hyo';
let 나이 : number = 5;
let a : string | number = 'kk'; // 다양한 타입이 들어올 수 있게 -> Union Type

// 에러 발생 예
let 이름2 : number = 'hyohyo'; // 타입이 number인데 string형식의 값이 들어가서 에러발생!

2. 배열에 타입 지정 하기

// 배열 타입 지정 올바른 예
let arr : number [] = [1,2];
let arr2 : string [] = ['a','b'];
let arr3 : (string | number) [] = [1, 'a'];
let arr4 : (string | number) [] = [1, 'a'];

// 에러 발생 예
let arrr : string [] = [1]; // 배열안의 값이 string 형식으로만 와야해서 에러 발생!

3. 객체에 타입 지정하기

// 객체 타입 지정 올바른 예
let obj : { a : string } = { a : 's' };
let obj2 : { a : number } = { a : 3 };
let obj3 : { a? : string } = {  }; // '?' 를 넣어서 속성이 들어올 수도있고 안들어올수도 있다를 의미!
            
// 에러 발생 예
let objj : { a : string } = { b : 's' }; // key가 달라서 에러!
let objj2 : { a : string } = { a : 3 }; // value의 형식이 달라서 에러!

4. type을 변수에 담아 사용하기

type NumStr = number | string; // Type명을 작명할땐 대문자로 보통 작명 한다! 일반변수와 차별화해서 관리할 수 있어서! 
let abc : NumStr = 'dd';
let abcd : NumStr = 5;

// 에러 발생 예
let abc2 : NumStr = [1,2]; // NumStr타입의 형식에 맞지않는 값 할당 되어 에러!

// type으로 형식말고 값을 지정 가능
type MyType = 'hyo' | 'kim';
let abcde : MyType = 'hyo';
let abcdef : MyType = 'kim';

// 에러 발생 예
let abcde2 : MyType = ['hyo']; // MyType타입의 형식에 맞지않는 값 항당 되어 에러!

5. Tuple 타입

• array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple 타입을 쓰면 된다.

// 올바른 예
type ArrType = [string, number];
let aarrr : ArrType = ['hyo', 2];

// 에러 발생 예
let aarrr2 : ArrType = [1, 'hyo']; // ArrType타입의 배열안의 타입의 순서가 달라서 에러!
let aasd : ArrType = ['jj', 1, 2]; // [string, number]형식의 길이 2인 배열만 올수 있기에 에러! 

6. type으로 객체 지정하기

type ObjType = {
  name : string
};
let nameObj : ObjType = { name : 'hyo'};

// 에러 발생 예
let nameObj2 : ObjType = {name : 2}; // ObjType타입의 value값은 string만 올 수 있기에 에러!

7. 객체의 속성이 많을 떄 한번에 지정해주는 방법

type ObjType2 = {
  [key : string] : string // string으로 된 모든 key의 타입은 string만 올 수 있다!
}
let aadsww : ObjType2 = { a : 'hyo' };

8. 함수의 인자에 타입 지정하기

function 함수(x : number) { // 인자 x의 타입이 number로만 와야한다!
  return x * 2;
}

// 에러 발생 예
function 함수2(x : string) {
  return x * 2; // 인자 x의 타입이 string만 오는데 string형식의 값과 숫자를 곱할순 없어 에러!
}

함수('hyo') // 마찬가지로 이것도 에러! 함수()의 인자로는 number형식만 들어갈 수 있다!

10. 함수의 인자와 return값의 타입 지정하기

function 함수3(x : number) : number { // 인자와 return값의 형식이 number로 나와야한다!
  return x * 2;
}

// 에러 발생 예
function 함수4(x : number) : string { // return값이 string이 나올수 없기에 에러발생!
  return x * 2;
}