TypeScript

타입스크립트는 자바스크립트에 타입을 부여한 언어로 자바스크립에 확장된 언어로 자바스크립트보다 엄격한 형식으로 쓰여진다 그래서 

에러를 사전에 방지할수 있고, 

코드가이드 및 자동완성 기능이 있어서 개발 생산성이 올라가는 효과가 있다

 

이런식으로 변수에 처음에 문자열으 넣고  변수에 재할당을 할때 같은 타입을 넣어야지 오류가 안나옴  원래는 변수명 뒤에 어떤 타입이 들어갈지 명시를 해주어야 하는데 타입스립트에서 자동으로 변수에 쓰여진 값을 보고 이 변수에는 같은 타입이 들어가는 변수로 인식해서 재할당할때 다른 타입의 값을 쓰면 아래처럼 오류가 난다 

타입을 명시

//타입 명시
let bbb: string = "반갑습니다";
bbb = "안녕하세요";


let num: number = 500;
num = 10;

let boo: boolean = true;
boo = false;

이런 식으로 타입을 명시해서  써주어야 오류가 안난다 

 

//타입명시가 필요한 상황
let ccc: number | string = 1000;
ccc = "1000원";

이렇게  1000원을 어떤 사람들은 숫자로서 쓸수도 있고 문자열로도 쓸수도 있어서 
| 를 사용해 두가지 타입으로 쓰이게 해줄수 있다

 

 

배열 타입

//배열 타입
let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; 
//여기서도 오류가 난다 hhh 변수처럼 두가지 타입이 들어가면 |를 이용해서 하면 오류가 안난다

let ggg: string[] = ["철수", "훈이", "맹구", "짱구"];

let hhh: (string | number)[] = ["철수", "훈이", "맹구", "짱구", 10, 20];
//타입을 추론해서 어떤 타입을 쓰는지 알아보기

 

객체 타입 

//객체 타입
interface IProfile {
  name: string;
  age: number | string;
  school: string;
  hobby?: string; //?있어도 되고 없어도 되고
}

const profile: IProfile = {
  name: "맹구",
  age: 8,
  school: "공룡초등학교",
};

profile.name = "훈이"; // 타입 추론으로 인해 이것만 가능
profile.age = "8";
profile.hobby = "수영";

interface

interface 는 객체형태로 있을때 그 안에 값을을 객체를 만들때 타입을 하나하나 지정해주면서 만들면 코드를 쓸때 힘드니 

위에 예시처럼  IProfile를 interface를  객체안의 형태로 정의 해주면  IProfile를 이용해서 객체를 만들때  변수명 뒤에 타입을 써줄때 IPfile를 써주면  객체안의 키에 각각 타입을 지정해주지 않아도  위에 처럼 쓰일수 있다 

 

?

이건 객안의 값을 가져올때 쓰일수도 있고 안쓰일 수도 있는 키 값에 지정해주면 좋다 

 

함수타입 

//함수 타입 =>어디서 몇번이든 호출이 가능해서 타입추론 할수 없음 (반드시 타입 명시 필요)

function add(num1: number, num2: number, unit: string): string {
  return num1 + num2 + unit;
}

const result = add(1000, 2000, "원"); //결과의 리턴 타입도  예측 가능!!




const add2 = (num1: number, num2: number, unit: string): string => {
  return num1 + num2 + unit;
};

const result2 = add2(1000, 2000, "원"); //결과의 리턴 타입도  예측 가능!!

 

any타입

기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입입니다. 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있습니다.

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

//그냥 자바스크립트처럼 아무거나 쓸수 있다고 생가하면 좋을거 같다

 

 

 

 

출처

https://joshua1988.github.io/ts/why-ts.html#%EC%99%9C-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C%EC%9A%94https://joshua1988.github.io/ts/why-ts.html#%EC%99%9C-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C%EC%9A%94