타입스크립트 #1

김태현·2020년 12월 14일
18

타입스크립트

목록 보기
1/2
post-thumbnail

타입스크립트란 ??

꼬부기는 물타입, 파이리는 불타입, 이상해씨는 풀타입 입니다.
꼬부기가 불을 뿜거나, 파이리가 풀공격을 하거나 하면 안돼요..

타입스크립트는 자바스크립트 + 타입, 즉 자바스크립트에 타입 표기를 할 수 있도록 한 자바스크립트 슈퍼셋(상위호환) 프로그래밍 언어 입니다.
원산지는 마이크로소프트 이고, 확장자로는 .ts를 사용하는 것이 특징 입니다.
컴파일의 결과로 js파일을 출력하고, 런타임에서는 자바스크립트 코드를 구동시키게 됩니다.

타입스크립트는 정적 타입 언어 입니다.

그 말 뜻은 컴파일 타임에 타입이 결정된다는 소리입니다.
말 그대로 정적 이므로, 개발자가 의도한대로 변수나 함수 등을 목적에 맞게 명확하게 전달할 수 있고, 에러 알림 같은 피드백도 받을 수 있으므로 자바스크립트에 비해 눈에 띄는 생산성 향상을 꾀할 수 있습니다.

타입스크립트는 왜 쓸까??

자바스크립트 실사용 전 일으킬만한 타입 에러들을 미리 잡는것이 우리가 타입스크립트를 사용하는 목적입니다.
시스템의 규모가 커짐에 따라 복잡도도 늘어나고 에러가 일어날 위험도 커지는데, 이때 타입스크립트가 빛을 발휘합니다.
자바스크립트의 유연함과 간결함이라는 장점이 나중으로 갈수록 유지보수가 힘들어진다는 단점으로 바뀌게 되기 때문이죠
즉, 타입스크립트를 사용하면 안전하게 코드를 작성하는 것이 가능해집니다.

이렇게 number 타입 연산인데 sum을 string이라고 타입을 정해버리면 컴파일 조차 하지 않고 error가 뜹니다. 친절하게 TS2322 라고 에러코드도 뱉기 때문에 구글링으로 에러를 쉽게 해결할 수도 있습니다 ^^7

기존에 사용하던 자바스크립트는 실행 중에 비로소 타입을 알수 있게되므로 동적 타입 언어라고 부릅니다.

둘 사이의 차이점

const a = 3;
const b = '5';

console.log(a*b);

자바스크립트에서는 서로 타입이 다른데도 불구하고 계산이 돌아가면서 출력을 해버립니다.

반면, 타입스크립트에서는

const a:number = 3;
const b:string = '5';
console.log(a*b);

미리 숫자면 숫자, 문자열이면 문자열 이라고 타입을 선언해주기 때문에 계산 작동이 안되게 하거나, 컴파일 전 오류메시지를 출력하게 합니다.

타입 선언을 해보자

let str: string;
let red: string = 'Red';
let green: string = 'Green';
let myColor: string = `My color is ${red}`;
let yourColor: string = 'Your color is' + green;
console.log(red, green, myColor, yourColor);
// 출력결과 >>> Red, Green, My color is Red, Your color is Green
let fruits: string[] = ['Apple', 'Banana', 'Mango'];
let fruits: Array<string> = ['Apple', 'Banana', 'Mango'];
console.log(fruits);
// 출력결과 >>> ['Apple', 'Banana', 'Mango']

let oneToSeven: number[] = [1,2,3,4,5,6,7];
let oneToSeven: Array<number> = [1,2,3,4,5,6,7];
// 출력결과 >>> [1,2,3,4,5,6,7]
// 문자열과 숫자를 동시에 가지는 다중타입 배열도 선언할 수 있습니다
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];
// 출력결과 >>> ['Apple', 1, 2, 'Banana', 'Mango', 3]

// 배열의 타입을 단언할 수 없다면 any를 사용할 수 있습니다. 다만 any를 많이 쓰면 타입스크립트를 쓰는 목적이 사라지므로 지양하는 편이 좋음!!
let someArr: any[] = [0, 1, {}, [], 'str', false];
// 출력결과 >>> [0, 1, {}, [], 'str', false]

특별한 타입

  • any: 모든 타입과 호환이 가능하나, 자주 쓰면 내가 타입스크립트를 쓰고 있는건지 자바스크립트를 쓰고 있는건지 착각을 하게 된다...
  • void: null과 undefined만 값으로 가질 수 있는 타입이며, 아무 값도 return 하지 않는 함수의 반환 타입을 표시할 때 사용한다.
    function nothing(): void {}

이어서 계속 ...

profile
프론트엔드 개발자

11개의 댓글

comment-user-thumbnail
2020년 12월 16일

파이리 꼬부기 이상해씨ㅋㅋㅋㅋㅋㅋㅋ
비유 찰떡ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

답글 달기
comment-user-thumbnail
2020년 12월 16일

너무 잘해??? 왜 이렇게 잘하는거야?? 나 ~ 타입스크립트 가르쳐주세요~😁

답글 달기
comment-user-thumbnail
2020년 12월 16일

당신 그만 잘해...

답글 달기
comment-user-thumbnail
2020년 12월 16일

초롱이 천재
-꼬미가-

답글 달기
comment-user-thumbnail
2020년 12월 16일

오 타입스크립트!! 이거 보면서 공부해야겠다 앞으로도 좋은자료 부탁드릴게요 ㅎㅎ

답글 달기
comment-user-thumbnail
2020년 12월 18일

초롱이도 이해할 수 있게 너무 친절하게 잘 써주셨네요~
하트 남기고 갑니다....총총...

1개의 답글
comment-user-thumbnail
2020년 12월 18일

타입스크립트라.. 주인분이 초롱이를 닮아 멋지네요

1개의 답글
comment-user-thumbnail
2020년 12월 21일

뭐야 힘 숨기고 있었네

1개의 답글