꼬부기는 물타입, 파이리는 불타입, 이상해씨는 풀타입 입니다.
꼬부기가 불을 뿜거나, 파이리가 풀공격을 하거나 하면 안돼요..
타입스크립트는 자바스크립트 + 타입, 즉 자바스크립트에 타입 표기를 할 수 있도록 한 자바스크립트 슈퍼셋(상위호환) 프로그래밍 언어 입니다.
원산지는 마이크로소프트 이고, 확장자로는 .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]
이어서 계속 ...
파이리 꼬부기 이상해씨ㅋㅋㅋㅋㅋㅋㅋ
비유 찰떡ㅋㅋㅋㅋㅋㅋㅋㅋㅋ