안녕하세요!! 백엔드 개발자 3년차입니다!
Node.js만 3년동안 했는데 왜 기본 JavaScript 말고 TypeScript를 사용해야하는지 지금부터 알려드릴게요..(저의 생각이기때문에 그점은 이해해주세요...ㅠ)
JavaScipt 는 가장 널리 사용되는 프로그래밍 언어 중 하나입니다.
다른 언어 JAVA,Python,Go.. 등등 언어보다는 자바스크립트는 그냥 코딩하면 작동을 합니다. 이게 왜되는지도 모를수도 있어요.. 그만큼 JavaScript는 너무너무 자유로워요~~
자자 이제 코드를 한번 볼까요?? 말보다는 보는게 제일 이해하기 쉽더라고요
//반환값을 예상할수 있나요???
const pikachu = (a, b) => {
return a + b;
}이코드만 봤을때 pikachu 함수는 문자열, 숫자 등과 같은 모든 유형의 변수를 사용할수 있기 때문에 저도 저 함수 보았을때 예상이 안됩니다..
// 숫자형 일때.
const pikachu = (a, b) => {
return a + b;
}
const result = pikachu(2021, 9);
console.log(result); // 2030
// 문자형일때
const pikachu = (a, b) => {
return a + b;
}
const result = pikachu("2021", "9");
console.log(result); // 2030
JavaScript는 동적 타이핑 언어입니다. 이는코드를 보다 쉽게 작성하는 데 유용합니다. 다른 개발자들이 이코드를 보고 함수에 어떤 인수가 필요한지 함수에세 어떤 값이 반환이 되는지에 대해 더 주의를 기울여야 합니다.이런 수많은 코드를 해석할려고 하면 벌써부터 스트레스가 많아져서 담배피러갈거같네요..
자자 이제 등장합니다. 이코드를 한번 보세요!!
// 반환값을 예상할수 있나요???
const pikachu = (a: number, b: number): number => {
return a + b;
}이야...이제 여기서 타입스크립트가 등장합니다. TypeScirpt에는 정적 타이핑이 있습니다. 이 코드를 보면 함수 반환값에 형이 Number 라고 생각합니다.
회사에는 코드가 많고 복잡하기 때문에 코드를 이해하는데 매우 유용합니다.
따라서 과거에 누군가가 작성한 코드를 읽고 이해하는 데 많은 시간이 걸리기 때문에 더 읽기 쉬운 방법을 사용해야 합니다.
기본 TypeScirpt
기본 TypeScirpt 에는 String, Number, Bool, null 정의 되지 않는 등과 같은 기본 데이터 유형이 있습니다
이코드는 단순 데이터 유형의 코드입니다.
// string, number and boolean.
const caterpie01: number = 2021; // OK
const caterpie02: number = false; // NG
const Metapod01: string = "sleepy"; // OK
const Metapod02: string = true; // NG
const Wartortle01: boolean = true; // OK
const Wartortle02: boolean = 1111; // NG
}이와 같은 컴파일 오류가 발생합니다.
typescript.ts:10:7 - error TS2322: Type 'boolean' is not assignable to type 'number'.
10 const caterpie02: number = false; // NG
~~~~~~~~~~
typescript.ts:13:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.
13 const Metapod02: string = true; // NG
~~~~~~~~~
typescript.ts:16:7 - error TS2322: Type 'number' is not assignable to type 'boolean'.
16 const Wartortle02: boolean = 1111; // NG
~~~~~~~~~~~다음으로 null과 undefined 데이터 타입에 대해 생각해 보시기 바랍니다.
// null and undefined.
const Butterfree: null = null;
const ButterfreeNull: string = Butterfree;
console.log(ButterfreeNull) // null
const Kakuna: undefined = undefined;
const KakunaNull: string = Kakuna;
console.log(KakunaNull) //undefined이 코드는 내 환경에서 작동합니다. 문자열 값에 null 및 정의되지 않은 값을 할당할 수 있습니다.
이 경우 strict mode 를 설정하지 않았습니다. strict mode를 true로 지정하면 이 코드는 다음과 같이 작동합니다.
typescript.ts:21:7 - error TS2322: Type 'null' is not assignable to type 'string'.
21 const ButterfreeNull: string = Butterfree;
~~~~~~~~~~~~~~
typescript.ts:25:7 - error TS2322: Type 'undefined' is not assignable to type 'string'.
25 const KakunaNull: string = Kakuna;좋다! 유형 오류를 잡을 수 있습니다.
tsconfig.json 에서 strict mode를 설정하거나 --strict 와 같은 tsc 명령 인수를 사용할 수 있습니다 . TypeScript 환경을 설정하는 방법을 잘 모르겠다면 당연히 공홈가서 봐야죠~~(무조건 공홈가세요 그냥)
링크는 여기-> 타입스크립트 공홈
데이터 유형이란 무엇입니까?
TypeScript에는 모든 데이터 유형이 있습니다 . 모든 데이터 유형이 유형 오류 없이 작동할 수 있습니다. 이것은 바닐라 자바스크립트와 같습니다.
이 샘플 코드를 살펴보십시오.
// any data type
let pidgey: any = 1991;
console.log(typeof pidgey) // number
pidgey = "bird";
console.log(typeof pidgey) // string
pidgey = false;
console.log(typeof pidgey) // boolean
pidgey = null;
console.log(typeof pidgey) // object
pidgey = undefined;
console.log(typeof pidgey) // undefinedpidgey 변수는 모든 데이터 유형을 수신할 수 있습니다!
any 타입은 마법의 데이터 유형이에요.🙀
데이터 유형을 저렇게 사용하고 코드를 만들면 TypeScript 를 사용하는 의미가 없어지지요..
완전 JavaScript 처럼 사용하는것입니다.
위의 샘플 코드를 아래 코드로 대체할 수 있습니다.
// any data type
const caterpie01: number = 2021; // number
const caterpie001 = 2021; // number
const Metapod01: string = "sleepy"; // string
const Metapod001 = "sleepy"; // string
const Wartortle01: boolean = true; // boolean
const Wartortle001 = true; // boolean 이것은 더 읽기 쉽고 짧습니다. 물론 이 변수에 다른 데이터 유형을 할당할 수는 없습니다.
let caterpie001 = 2021; // number
caterpie001 = "text"; // type error반면에 함수에서 변수 데이터 유형을 정의하지 않으면 typescript는 데이터 유형을 any 로 판단합니다 . 이 코드를 확인하십시오.
const pikachu = (a, b): number => {
return a + b;
}
pikachu(2021, 9);(제 환경에서는 strict mode 를 true 해논상태입니다~~ strict mode false 면 컴파일에 성공하고 아무런 에러가 뜨지 않습니다)
typescript.ts:57:18 - error TS7006: Parameter 'a' implicitly has an 'any' type.
57 const pikachu = (a, b): number => {
~
typescript.ts:57:21 - error TS7006: Parameter 'b' implicitly has an 'any' type.
57 const pikachu = (a, b): number => {typescript는 수신되는 값을 추측할 수 없기 때문입니다.
따라서 모든 데이터 유형은 typescript에 의해 정의되었습니다. TypeScript에서 함수를 사용할 때, 이렇게 인자의 데이터 타입을 정의해야 합니다.(어려우시면 무조건 데이터는 타입이 있다고 생각하시면 됩니다)
const pikachu = (a: number, b: number): number => {
return a + b;
}또는
const pikachu = (a: number, b: number) => {
return a + b;
}Typescript 로 함수를 만들려면 _. 특정 상황을 제외하고는 어떤 데이터 유형도 사용하지 않는 것이 좋습니다. 예를 들어 JavaScript에서 TypeScript로 코드를 마이그레이션합니다.
객체 데이터 유형
TypeScript는 인터페이스 로 객체 데이터 유형을 정의할 수 있습니다 .
처음에 이 코드를 보세요.
// 인터페이스로 객체 데이터 유형을 정의합니다.
interface PokemonObj {
name: string,
age: number,
skill: string
}
// 객체에 데이터 유형 할당.
const pokemon: PokemonObj = {
name: "pikachu",
age: 6,
skill: "Electric Shock!"
}어때요?? 진짜 어려운게 하나도 없다니까요??? 맞는형에 맞춰서 데이터를 넣어준다 기깔나지요?
객체 데이터 유형을 생성하기 위해 인터페이스 구문을 사용할 수 있습니다 . 그런 다음 개체에 할당합니다.
객체의 데이터 유형을 변경하면 이와 같은 유형 오류가 발생합니다.
// 인터페이스로 객체 데이터 유형을 정의합니다.
interface PokemonObj{
name: string,
age: number,
skill: string
}
// 객체에 데이터 유형 할당.
const pokemon: PokemonObj = {
name: "pikachu",
age: "change age", // 변경된 부분
skill: "Electric Shock!"
}
이것은 유형 오류 메세지 입니다.
typescript.ts:75:3 - error TS2322: Type 'string' is not assignable to type 'number'.
75 age: "change age",
~~~
typescript.ts:69:3
69 age: number,
~~~
The expected type comes from property 'age' which is declared here on type 'PokemonObj'유형 오류가 발생합니다. 인터페이스 로 객체의 데이터 유형을 정의하는 것이 유용합니다 . 물론 이 코드처럼 데이터 타입을 직접 정의할 수도 있습니다.
// 데이터 할당을 직접 할수있다
const pokemon: {name: string, age: number, skill: string} = {
name: "pikachu",
age: 6,
skill: "Electric Shock!"
}하지만 이방법은 저 함수만 해당되는 거면 상관은 없지만 공통으로 쓰이는 부분이 있을거 같은면 무조건 인터페이스로 뺴야맞는거 같다.
배열 데이터 유형
데이터 유형이 있는 배열은 다음과 같습니다.
// 배열데이터 유형정의
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];데이터 유형을 변경하면 유형 오류가 발생합니다.
// 배열 데이터 유형 변경
const pokemon: string[] = ["pikachu", "Raichu", false];이것은 유형 오류 메시지입니다.
typescript.ts:80:49 - error TS2322: Type 'boolean' is not assignable to type 'string'.
80 const pokemon: string[] = ["pikachu", "Raichu", false];이것은 각 배열 요소의 데이터 유형을 관리할 필요가 없기 때문에 매우 유용하고 강력합니다. 그런데 다른 표현 방법을 보여드리고 싶습니다. 위의 코드와 동일합니다. 이렇게 생겼습니다.
// defined array with another way.
const pokemon: Array<string> = ["pikachu", "Raichu", "Charizard"];다음 데이터 유형으로 Generics 데이터 유형을 보여드리겠습니다. 이것은 일반적인 데이터 유형입니다. 제네릭 데이터 유형을 정의한 후 정의할 수 있습니다. 샘플 코드는 다음과 같습니다.
(제네릭이 뭔지 모르는 분들은) 바로 알아봐야겠지요?? -> Generics 설명
// 제네릭 데이터 유형에 배열입니다.
type Pokemon<T> = T[];
// 정의된 제네릭 유형 후에는 특정 데이터 유형을 정의할 수 있습니다.
const pokemon: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];
// 위의 코드는 이것과 동일합니다.
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];제네릭 데이터 유형으로 일부 데이터 유형을 정의할 수 있습니다.
이것은 좋은 샘플은 아니지만 제네릭 데이터 유형을 사용하는 방법을 쉽게 이해할 수 있습니다. 샘플은 이렇습니다.
// 제네릭 데이터 유형에 배열입니다.
type Pokemon<T> = T[];
// 정의된 제네릭 유형 후에는 특정 데이터를 유형을 재정의 할수 있습니다.
const pokemon01: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];
const pokemon02: Pokemon<number> = [6, 14, 16];
const pokemon03: Pokemon<boolean> = [true, true, false];
결론
TypeScript의 기본 데이터 유형을 작성했습니다.
이글은 TypeScirpt에 대한 기본적인 지식일 뿐입니다.
전 직장에서 JavaScript 만 사용하면 될줄 알았지만 TypeScript 를 배우고 나서 이좋은걸 왜 지금 이제서야 알았지 라는 생각이 너무 많이 들었습니다. TypeScript 에 장점은 어마어마 합니다.계속해서 찾아 보고 블로그를 쓸생각입니다. 잘못된게 있으면 댓글로 피드백 주세요. 저는 피드백 너무 좋아합니다. 어떠한 사람이든간에 시간써줘서 정말 감사합니다~
출저: https://dev.to/hiro9108/javascript-vs-typescript-why-we-should-learn-typescript-4d5o
